Published: February 01 2023

Vue 3 - Fetch Data from an API

Tutorial built with Vue 3.2.45

Below is a quick example of how to fetch JSON data from an API in Vue 3 using the fetch() function which comes built into all modern browsers.

Fetch Data with Vue 3

This sends an HTTP GET request to the Test JSON API, a fake online REST API that includes a /products route that returns an array of products, each with an id and name property.

After the JSON data is fetched from the API it is rendered as a list with the Vue v-for directive.

<script setup>
import { ref } from 'vue';
const products = ref(null);
    .then(response => response.json())
    .then(data => products.value = data);

    <div class="card m-3">
        <h5 class="card-header text-center">Vue 3 fetch data from API</h5>
        <div class="card-body">
            <div v-if="products">
                <ul class="mb-0">
                    <li v-for="product in products" :key="">{{}}</li>
            <div v-if="!products" class="text-center">
                <div class="spinner-border spinner-border-sm"></div>

Here it is in action: (See on StackBlitz at

More Vue 3 HTTP Examples

For more examples of how to fetch data from an API with Vue 3 see Vue 3 - HTTP GET Request Examples.


Need Some Vue 3 Help?

Search fiverr for freelance Vue 3 developers.

Follow me for updates

On Twitter or RSS.

When I'm not coding...

Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!


Supported by