🌿 Nuxt.js Intermediate

What is the difference between `useAsyncData` and `useFetch`?

Answer

Both composables fetch data with SSR support and deduplication, but they differ in scope. useFetch is a shorthand specifically for HTTP requests — it wraps useAsyncData with $fetch and auto-generates the cache key from the URL. useAsyncData is more general-purpose — its async handler can be any async operation (database query, file read, complex computation), not just HTTP. Use useFetch for direct API calls for brevity; use useAsyncData when you need a custom key, custom logic, or need to call multiple sources in one composable. Both return { data, pending, error, refresh, execute }.