A Beginner’s Guide To Nuxt 3/

...

/

Data Fetching: Async and Lazy Composables

Data Fetching: Async and Lazy Composables

Learn about data fetching techniques using Async and lazy composables.

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:

Press + to interact
<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 ...