useFetch and useAsyncData
Fetch server-side data with useFetch and useAsyncData, handle pending and error states, and understand how Nuxt hydrates the client.
Data Fetching in Nuxt 3
Nuxt provides two main composables for fetching data: useFetch (URL-based, calls fetch under the hood) and useAsyncData (any async function, with a unique key for caching/deduplication).
useFetch — The Quick Way
Pass a URL — Nuxt fetches it during SSR, hydrates on the client, and prevents the client from re-fetching on hydration.
<script setup>
const { data: posts, pending, error } = await useFetch('/api/posts');
</script>
<template>
<div v-if="pending">Loading...</div>
<div v-else-if="error">{{ error.message }}</div>
<ul v-else>
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
</template>All lessons in this course
- File-based Routing and Auto-imports
- useFetch and useAsyncData
- Nuxt Modules: Image Auth i18n
- Deployment: Static vs SSR