Nuxt data fetching (useFetch, useAsyncData) in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data using useFetch in a Nuxt component.

Vue

<script setup>
const { data, error } = [1]('https://api.example.com/items')
</script>

Drag options to blanks, or click blank then click option'

AuseAsyncData

BuseFetch

CfetchData

DuseData

Attempts:

3 left

💡 Hint

Common Mistakes

Using useAsyncData instead of useFetch when the question asks specifically for useFetch.

Trying to call a non-existent function like fetchData.

The useFetch composable is used in Nuxt to fetch data reactively in components.

2fill in blank

medium

Complete the code to fetch data using useAsyncData with a key in Nuxt.

Vue

<script setup>
const { data, error } = [1]('users', () => $fetch('/api/users'))
</script>

Drag options to blanks, or click blank then click option'

AuseFetch

BfetchAsync

CasyncData

DuseAsyncData

Attempts:

3 left

💡 Hint

Common Mistakes

Using useFetch without a key when the question requires useAsyncData.

Trying to use a non-existent function like fetchAsync.

useAsyncData is used with a key and a fetcher function to load data asynchronously in Nuxt.

3fill in blank

hard

Fix the error in the code by completing the blank with the correct property to access the fetched data.

Vue

<script setup>
const { data } = useFetch('/api/posts')
const posts = data[1]
</script>

Drag options to blanks, or click blank then click option'

A.value

B.data

C()

D.fetch

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access data.data which does not exist.

Calling data() as if it were a function.

In Vue 3 and Nuxt, useFetch returns a ref, so you access the actual data with .value.

4fill in blank

hard

Fill both blanks to create a reactive data fetch with useAsyncData and handle errors.

Vue

<script setup>
const { data, error } = [1]('products', () => $fetch('/api/products'))
if (error[2]) {
  console.error('Failed to load products')
}
</script>

Drag options to blanks, or click blank then click option'

AuseAsyncData

BuseFetch

C!== null

D== null

Attempts:

3 left

💡 Hint

Common Mistakes

Using useFetch when a key is required.

Checking if error == null instead of !== null.

useAsyncData fetches data with a key, and checking error !== null detects if an error occurred.

5fill in blank

hard

Fill all three blanks to create a reactive fetch with useFetch, destructure data, and check loading state.

Vue

<script setup>
const { data, error, [1] } = [2]('https://api.example.com/info')
if (![3]) {
  console.log('Loading data...')
}
</script>

Drag options to blanks, or click blank then click option'

Apending

BuseFetch

Cloading

DuseAsyncData

Attempts:

3 left

💡 Hint

Common Mistakes

Using loading property which does not exist in useFetch.

Using useAsyncData without a key.

useFetch returns a pending property to indicate loading state. We destructure it and check if loading is ongoing.