Nuxt data fetching (useFetch, useAsyncData) in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Nuxt component using useFetch?

Consider this Nuxt 3 component that fetches user data:

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

return () => {
  if (pending.value) return 'Loading...'
  if (error.value) return 'Error!'
  return `User: ${data.value.name}`
}

Assuming the API returns { name: 'Alice' }, what will the rendered output be?

Vue

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

return () => {
  if (pending.value) return 'Loading...'
  if (error.value) return 'Error!'
  return `User: ${data.value.name}`
}

A User: Alice

B Loading...

C User: undefined

D Error!

💡 Hint

Think about what useFetch returns and when the component renders.

useFetch returns reactive references. Once the data is fetched successfully, pending becomes false and data.value holds the API response. So the component renders User: Alice.

❓ state_output

intermediate

What is the value of data after useAsyncData resolves?

Given this Nuxt 3 setup:

const { data, error } = await useAsyncData('post', () => $fetch('/api/post/1'))

If the API returns { id: 1, title: 'Hello' }, what is data.value?

Vue

const { data, error } = await useAsyncData('post', () => $fetch('/api/post/1'))

A null

B undefined

C { id: 1, title: 'Hello' }

D Error object

💡 Hint

useAsyncData resolves with the fetched data inside data.value.

After awaiting useAsyncData, data.value contains the API response object.

📝 Syntax

advanced

Which option correctly uses useFetch with error handling in Nuxt 3?

Choose the code snippet that correctly fetches data and handles errors using useFetch in a Nuxt 3 setup.

A

const { data, error } = useFetch('/api/data')
if (error.value) console.error(error.value)

B

const { data, error } = useFetch('/api/data')
if (error) console.error(error)

C

const { data, error } = await useFetch('/api/data')
if (error.value) console.error(error.value)

D

const { data, error } = useFetch('/api/data')
if (error.value) console.log(data.value)

💡 Hint

Remember that error is a ref and must be accessed with .value.

useFetch returns refs for data and error. To check error, use error.value. Option A correctly checks and logs the error.

🔧 Debug

advanced

Why does this useAsyncData call cause a runtime error?

Examine this code snippet:

const { data } = useAsyncData(() => fetch('/api/items').then(res => res.json()))
console.log(data.value.length)

What causes the runtime error?

Vue

const { data } = useAsyncData(() => fetch('/api/items').then(res => res.json()))
console.log(data.value.length)

A The <code>then</code> callback returns a promise instead of data

B <code>data.value</code> is undefined because <code>useAsyncData</code> is asynchronous and data is not ready yet

C The fetch URL is incorrect causing a network error

D The <code>console.log</code> is inside the async callback causing a syntax error

💡 Hint

Think about when data.value is available after calling useAsyncData.

useAsyncData returns a ref that is initially undefined until the promise resolves. Accessing data.value.length immediately causes an error because data.value is undefined at that moment.

🧠 Conceptual

expert

Which statement about useFetch vs useAsyncData in Nuxt 3 is correct?

Choose the correct statement about the differences between useFetch and useAsyncData in Nuxt 3.

A <code>useAsyncData</code> returns raw promises, <code>useFetch</code> returns refs

B <code>useFetch</code> automatically serializes and deserializes JSON, while <code>useAsyncData</code> requires manual parsing

C <code>useFetch</code> can only be used on client side, <code>useAsyncData</code> only on server side

D <code>useAsyncData</code> caches data by key and supports server-side rendering, <code>useFetch</code> does not cache by default

💡 Hint

Think about caching and SSR support differences.

useAsyncData caches data by a key and is designed for SSR and hydration. useFetch is a simpler wrapper around fetch with reactive refs but does not cache by default.