Skip to main content
Practice Problems

What is the difference between useFetch and useAsyncData in Nuxt?

Both composables fetch data but have different use cases.

useFetch - Simple API Calls

```javascript // Simplest form const { data, pending, error, refresh } = await useFetch('/api/users');

// With options const { data } = await useFetch('/api/products', { method: 'POST', body: { category: 'electronics' }, lazy: true }); ```

useAsyncData - Full Control

```javascript // Custom fetching logic const { data } = await useAsyncData('products', async () => { const response = await $fetch('/api/products'); return response.data.filter(p => p.active); });

// Multiple API calls const { data } = await useAsyncData('dashboard', async () => { const [users, products] = await Promise.all([ $fetch('/api/users'), $fetch('/api/products') ]); return { users, products }; }); ```

Key Differences

FeatureuseFetchuseAsyncData
KeyAuto-generatedManual required
FetchingBuilt-in $fetchCustom function
Use caseSimple API callsComplex logic
URL handlingAutomaticManual

Real Example

```javascript // useFetch - simple const { data: user } = await useFetch(`/api/users/${route.params.id}`);

// useAsyncData - complex const { data: dashboard } = await useAsyncData( `dashboard-${userId}`, async () => { const [stats, recent, notifications] = await Promise.all([ $fetch('/api/stats'), $fetch('/api/recent-activity'), $fetch('/api/notifications') ]); return { stats, recent, notifications }; }, { watch: [userId] } ); ```

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?
Practice Problems