A Beginner’s Guide To Nuxt 3/

...

/

Data Fetching: Pending and Re-Fetch

Data Fetching: Pending and Re-Fetch

Explore pending and re-fetch data handling techniques.

We'll cover the following...

Handling the data using the watch method is convenient to avoid blocking navigation. The template will render the contents before the data fetching is completed. But what do we do while we are waiting for the data to return?

Pending

When the request is made, and we are awaiting the data to be returned, the request is pending. This will remain until we get the requested data or an error occurs. We can access the pending state as a return value with useLazyFetch:

Press + to interact
<script setup>
const { pending, data: images } = useLazyFetch(url)
watch(images, (newImages) => {
})
</script>
<template>
  <div v-if="pending">
    Loading ...
  </div>
  <div v-else>
    <div v-for="image in images"></div>
  </div>
</template>

  • Lines 9–11: Using conditional rendering in the template means we can handle what to do while the image data is pending.

  • Lines 12–14: Once the pending state is false, we have the data we ...