Nuxt/docs/content/3.api/1.composables/use-lazy-async-data.md

useLazyAsyncData

This composable behaves identically to useAsyncData with the lazy: true option set.

Otherwise, this function does not block navigation. That means you will need to handle the situation where the data is null (or whatever value you have provided in a custom default factory function).

::ReadMore{link="/api/composables/use-async-data"} ::

Example

<template>
  <div>
    {{ pending ? 'Loading' : count }}
  </div>
</template>

<script setup>
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
  // Because count starts out null, you won't have access
  // to its contents immediately, but you can watch it.
})
</script>

::ReadMore{link="/guide/features/data-fetching"} ::