Search⌘ K
Home
Courses
A Beginner’s Guide To Nuxt 3

Data Fetching: Pending and Re-Fetch

Explore how to handle data fetching in Nuxt 3 by managing the pending state and using useLazyFetch. Learn to refresh data via reactive query strings or manually with the refresh method, enabling dynamic updates for pagination, filtering, and other interactive features.

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:

Javascript (babel-node)
<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 ...