useLazyAsyncData
This wrapper around useAsyncData triggers navigation immediately.
useLazyAsyncData provides a wrapper around useAsyncData that triggers navigation before the handler is resolved by setting the lazy option to true.
By default,
useAsyncData blocks navigation until its async handler is resolved. useLazyAsyncData allows navigation to occur immediately while data fetching continues in the background.Usage
app/pages/index.vue
<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>
useLazyAsyncData lets navigation continue while it fetches data. Check status === 'pending' and status === 'error' in your component's template before using the result.
useLazyAsyncData is a reserved function name transformed by the compiler, so you should not name your own function useLazyAsyncData.Type
Signature
export function useLazyAsyncData<ResT, DataE = unknown, DataT = ResT> (
handler: AsyncDataHandler<ResT>,
options?: AsyncDataOptions<ResT, DataT>,
): AsyncData<DataT, DataE> & Promise<AsyncData<DataT, DataE>>
export function useLazyAsyncData<ResT, DataE = unknown, DataT = ResT> (
key: MaybeRefOrGetter<string>,
handler: AsyncDataHandler<ResT>,
options?: AsyncDataOptions<ResT, DataT>,
): AsyncData<DataT, DataE> & Promise<AsyncData<DataT, DataE>>
useLazyAsyncData has the same signature as useAsyncData.
Parameters
useLazyAsyncData accepts the same parameters as useAsyncData, with the lazy option automatically set to true.
Return Values
useLazyAsyncData returns the same values as useAsyncData.
Example
app/pages/index.vue
<script setup lang="ts">
/* useLazyAsyncData lets navigation continue before the fetch completes.
Handle loading and error states in the 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 v-if="status === 'pending'">
Loading
</div>
<div v-else-if="status === 'error'">
Error loading count
</div>
<div v-else>
{{ count }}
</div>
</template>