useLazyAsyncData provides a wrapper around useAsyncData that triggers navigation before the handler is resolved by setting the lazy option to true.
useAsyncData blocks navigation until its async handler is resolved. useLazyAsyncData allows navigation to occur immediately while data fetching continues in the background.<script setup lang="ts">
const { status, data: posts } = await useLazyAsyncData('posts', () => $fetch('/api/posts'))
</script>
<template>
<div>
<div v-if="status === 'pending'">
Loading...
</div>
<div v-else-if="status === 'error'">
Error loading posts
</div>
<div v-else>
{{ posts }}
</div>
</div>
</template>
When using useLazyAsyncData, navigation will occur before fetching is complete. This means you must handle pending and error states directly within your component's template.
useLazyAsyncData is a reserved function name transformed by the compiler, so you should not name your own function useLazyAsyncData.export function useLazyAsyncData<DataT, ErrorT> (
handler: (ctx?: NuxtApp) => Promise<DataT>,
options?: AsyncDataOptions<DataT>,
): AsyncData<DataT, ErrorT>
export function useLazyAsyncData<DataT, ErrorT> (
key: string,
handler: (ctx?: NuxtApp) => Promise<DataT>,
options?: AsyncDataOptions<DataT>,
): AsyncData<DataT, ErrorT>
useLazyAsyncData has the same signature as useAsyncData.
useLazyAsyncData accepts the same parameters as useAsyncData, with the lazy option automatically set to true.
useLazyAsyncData returns the same values as useAsyncData.
<script setup lang="ts">
/* Navigation will occur before fetching is complete.
Handle 'pending' and 'error' states directly within your component's template
*/
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
// Because count might start out null, you won't have access
// to its contents immediately, but you can watch it.
})
</script>
<template>
<div>
{{ status === 'pending' ? 'Loading' : count }}
</div>
</template>