Nuxt data fetching (useFetch, useAsyncData) in Vue - Step-by-Step Execution

Concept Flow - Nuxt data fetching (useFetch, useAsyncData)

Component Setup

↓

Call useFetch or useAsyncData

↓

Start Data Fetching

↓

Wait for Promise

↓

Success

→Store Data in Reactive State

↓

Component Renders with Data

↓

Error

→Store Error State

↓

Component Renders with Error

The component calls useFetch or useAsyncData to start fetching data asynchronously, waits for the result, then stores the data or error in reactive state for rendering.

Execution Sample

Vue

const { data, pending, error } = useFetch('/api/items')

This code fetches data from '/api/items' and tracks loading and error states.

Execution Table

Step	Action	State Before	Result	State After	Component Render
1	Component setup starts	data: undefined, pending: undefined, error: undefined	Call useFetch	pending: true, data: undefined, error: undefined	Render loading state (pending true)
2	Fetch promise starts	pending: true	Fetching data from /api/items	pending: true	Still loading
3	Fetch promise resolves	pending: true	Data received: [{id:1,name:'A'},{id:2,name:'B'}]	pending: false, data: [{id:1,name:'A'},{id:2,name:'B'}], error: null	Render data list
4	User sees data rendered	data present	Display list items	No state change	Data visible on screen
5	If fetch failed	pending: true	Error received	pending: false, error: Error object, data: null	Render error message
6	Component unmounts	Any state	Cleanup	State cleared	Component removed
Exit	No more updates	Final state stable	No action	Stable state	Component shows final UI

💡 Data fetch completes successfully or with error, component renders accordingly and stops updating.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	Final
data	undefined	undefined	[{id:1,name:'A'},{id:2,name:'B'}]	null	[{id:1,name:'A'},{id:2,name:'B'}] or null
pending	undefined	true	false	false	false
error	undefined	undefined	null	Error object	null or Error object

Key Moments - 3 Insights

Why is 'pending' true before data arrives?

'pending' is true during the fetch promise to indicate loading, as shown in execution_table step 1 and 2.

What happens if the fetch fails?

If fetch fails, 'error' stores the error object and 'data' becomes null, shown in step 5 of execution_table.

Why does the component re-render after data arrives?

Because 'data' changes from undefined to the fetched array, triggering reactive updates and re-render (step 3 and 4).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'pending' at step 3?

A false

B true

C undefined

D null

💡 Hint

Check the 'State After' column at step 3 in execution_table.

At which step does the component render the fetched data?

A Step 1

B Step 2

C Step 4

D Step 5

💡 Hint

Look for 'Render data list' or 'Data visible on screen' in execution_table.

If the fetch fails, what happens to the 'data' variable?

A It becomes an empty array

B It becomes null

C It stays undefined

D It keeps previous data

💡 Hint

See execution_table step 5 and variable_tracker for 'data' changes on error.

Concept Snapshot

Nuxt data fetching uses useFetch or useAsyncData.
Call them in setup to start async fetch.
They return reactive data, pending, and error states.
Component renders loading while pending is true.
On success, data updates and component re-renders.
On error, error state updates and shows error UI.

Full Transcript

In Nuxt, you fetch data inside components using useFetch or useAsyncData. When the component starts, these functions begin fetching data asynchronously. While waiting, the 'pending' state is true, so the component can show a loading message. When the data arrives successfully, 'pending' becomes false and 'data' holds the fetched result. The component then re-renders to show the data. If the fetch fails, 'error' holds the error details and the component shows an error message. This flow ensures the UI updates automatically based on fetch status.

Practice

1. What is the main difference between useFetch and useAsyncData in Nuxt?

easy

A. useAsyncData automatically refreshes data, useFetch never does.

B. useAsyncData requires a unique key for caching, useFetch does not.

C. useFetch is only for server-side, useAsyncData is client-side only.

D. useFetch caches data with a key, useAsyncData fetches without caching.

Solution

1. Step 1: Understand useFetch behavior

   useFetch fetches data from a URL quickly but does not require a key for caching.

2. Step 2: Understand useAsyncData behavior

   useAsyncData needs a unique key to cache the fetched data, allowing more control over data reuse.

3. Final Answer:

   useAsyncData requires a unique key for caching, useFetch does not. -> Option B

4. Quick Check:

   Key caching difference = D [OK]

Hint: Remember: useAsyncData needs a key, useFetch is simpler [OK]

Common Mistakes:

• Thinking useFetch caches data with keys
• Confusing client/server usage of both
• Assuming useAsyncData auto-refreshes data

2. Which of the following is the correct syntax to use useAsyncData in a Nuxt component?

easy

A. const { data } = useAsyncData('posts', () => $fetch('/api/posts'))

B. const data = useAsyncData('/api/posts')

C. useAsyncData(() => $fetch('posts'), 'posts')

D. const { data } = useAsyncData(() => fetch('/api/posts'))

Solution

1. Step 1: Check the required parameters for useAsyncData

   The first parameter is a unique key string, the second is a function returning a promise.

2. Step 2: Validate each option's syntax

   const { data } = useAsyncData('posts', () => $fetch('/api/posts')) correctly uses a key 'posts' and a fetch function with $fetch. Others miss the key or use wrong order.

3. Final Answer:

   const { data } = useAsyncData('posts', () => $fetch('/api/posts')) -> Option A

4. Quick Check:

   Key first, fetch function second = A [OK]

Hint: Key string first, fetch function second in useAsyncData [OK]

Common Mistakes:

• Omitting the key parameter
• Swapping parameters order
• Using native fetch instead of $fetch

3. Given this code snippet in a Nuxt component:

const { data, pending } = useFetch('/api/user')

return { data, pending }

What will pending be initially when the component loads?

medium

A. undefined

B. false

C. true

D. null

Solution

1. Step 1: Understand useFetch loading state

   pending is a reactive boolean indicating if the fetch is still in progress.

2. Step 2: Initial value of pending

   When the component loads and fetch starts, pending is true until data arrives.

3. Final Answer:

   true -> Option C

4. Quick Check:

   Loading state pending = true [OK]

Hint: pending is true while fetching data [OK]

Common Mistakes:

• Assuming pending is false initially
• Confusing pending with data presence
• Expecting pending to be null or undefined

4. You wrote this code in a Nuxt component:

const { data } = useAsyncData(() => $fetch('/api/items'))

But the data never loads. What is the likely problem?

medium

A. Using $fetch instead of native fetch.

B. Returning data directly instead of inside a function.

C. Not awaiting the useAsyncData call.

D. Missing a unique key as the first argument to useAsyncData.

Solution

1. Step 1: Check useAsyncData parameters

   useAsyncData requires a unique key string as the first argument for caching.

2. Step 2: Identify missing key issue

   Omitting the key causes the fetch not to run properly or cache data, so data never loads.

3. Final Answer:

   Missing a unique key as the first argument to useAsyncData. -> Option D

4. Quick Check:

   Key missing in useAsyncData = B [OK]

Hint: Always provide a key string first in useAsyncData [OK]

Common Mistakes:

• Skipping the key argument
• Confusing $fetch with fetch as cause
• Expecting useAsyncData to be awaited

5. You want to fetch user data and posts in a Nuxt page using useAsyncData. You want posts to refresh every time the user ID changes. Which approach correctly achieves this?

hard

A. Use useAsyncData with a key including the user ID, e.g., useAsyncData(`posts-${userId}`, () => $fetch(`/api/posts?user=${userId}`)).

B. Use useAsyncData with a fixed key 'posts' and rely on automatic refresh.

C. Use useFetch instead of useAsyncData because it auto-refreshes on param change.

D. Call useAsyncData without a key and manually watch userId to refetch.

Solution

1. Step 1: Understand caching with keys in useAsyncData

   Keys uniquely identify cached data. Changing the key triggers a new fetch.

2. Step 2: Use dynamic key with user ID

   Including userId in the key string ensures posts refetch when userId changes.

3. Step 3: Evaluate other options

   Fixed keys won't refresh; useFetch doesn't auto-refresh on param change; manual watch is more complex.

4. Final Answer:

   Use useAsyncData with a key including the user ID, e.g., useAsyncData(`posts-${userId}`, () => $fetch(`/api/posts?user=${userId}`)). -> Option A

5. Quick Check:

   Dynamic key triggers refetch = C [OK]

Hint: Include changing params in key string for refetch [OK]

Common Mistakes:

• Using fixed keys expecting auto-refresh
• Assuming useFetch auto-refreshes on param change
• Skipping key causes no caching or refetch