`useLazyAsyncData()`

Like useAsyncData but resolves without blocking client-side navigation.

Since Nuxt 3.0 Spec ↗

Syntax

const { data, pending, error } = useLazyAsyncData(key, handler, options)

Parameters

Name	Type	Required	Description
`key`	`string`	No	Unique cache key; auto-generated from the call site if omitted.
`handler`	`() => Promise<T>`	Yes	Async function returning the data.
`options`	`object`	No	Same options as `useAsyncData`; `lazy` is forced to `true`.

Returns

AsyncData<DataT, ErrorT> — Reactive data, error, pending/status, refresh.

Examples

<script setup lang="ts">
const { data, pending } = useLazyAsyncData('feed', () =>
  $fetch('/api/feed')
)
</script>

<template>
  <Spinner v-if="pending" />
  <Feed v-else :items="data" />
</template>

<script setup lang="ts">
const { data } = useLazyAsyncData('agg', async () => {
  const [a, b] = await Promise.all([
    $fetch('/api/a'),
    $fetch('/api/b'),
  ])
  return { a, b }
})
</script>

Notes

Equivalent to `useAsyncData(key, handler, { lazy: true })`. Useful for non-critical data that should not delay route transitions. Always guard the template against `null` data while pending.