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

Data Fetching: Async and Lazy Composables

Explore how to handle data fetching in Nuxt 3 using async and lazy composables such as useAsyncData and useLazyFetch. Understand how to fetch data asynchronously without blocking navigation and manage data updates effectively with watch properties.

We'll cover the following...

The useAsyncData composable

Another composable we have in Nuxt is useAsyncData. On the first view, it looks similar to useFetch and can be often used interchangeably. Let's look at the following code:

Javascript (babel-node)
<script setup>
useFetch(url);
useAsyncData(url, () => $fetch(url))
</script>

  • Line 2: The useFetch method is a convenient wrapper to provide a better experience for the developer. This means we only need to pass in the URL.

  • Line 3: The useAsyncData performs the same search as the useFetch example but requires a function to be passed in to fetch from the URL.

Both of these options are the same in terms of what they do. They both fetch data from a provided URL.

We use useFetch for simple ...