Data Fetching

Nuxt provides useFetch, useLazyFetch, useAsyncData and useLazyAsyncData to handle data fetching within your application.

useFetch

You can useFetch to universally fetch data from any URL.

Code

/pages/index.vue

<script setup>const { data: posts } = await useFetch('https://api.nuxtjs.dev/posts');</script><template>  <div v-for="post in posts" :key="post.id">    <div>      {{ post.title }}    </div>    <div>      {{ post.description }}    </div>  </div></template>

Result

useLazyFetch

This behaves identically to useFetch with the lazy: true option set, so the async function does not block navigation.

Code

/pages/index.vue

<template>  <div v-if="pending">Loading ...</div>  <div v-else v-for="post in posts" :key="post.id">    <div>      {{ post.title }}    </div>    <div>      {{ post.description }}    </div>  </div></template><script setup>const { pending, data: posts } = useLazyFetch('https://api.nuxtjs.dev/posts');watch(posts, (newPosts) => {  // Because posts starts out null, you won't have access  // to its contents immediately, but you can watch it.});</script>

Result

useAsyncData

You can use useAsyncData to get access to data that resolves asynchronously. useFetch receives a URL and gets that data, whereas useAsyncData might have more complex logic. useFetch(url) is nearly equivalent to useAsyncData(url, () => $fetch(url))

Code

/server/api/count.ts

let counter = 0;export default defineEventHandler(() => {  counter++;  return JSON.stringify(counter);});

/pages/index.vue

<script setup>const { data } = await useAsyncData('count', () => $fetch('/api/count'));</script><template>  <div>Page visits: {{ data }}</div></template>

Result