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
| Feature | useFetch | useAsyncData |
|---|---|---|
| Key | Auto-generated | Manual required |
| Fetching | Built-in $fetch | Custom function |
| Use case | Simple API calls | Complex logic |
| URL handling | Automatic | Manual |
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 readyA concise answer to help you respond confidently on this topic during an interview.