useLazyFetch - Nuxt — ContextQMD

useLazyFetch provides a wrapper around useFetch that triggers navigation before the handler is resolved by setting the lazy option to true.

Usage

By default, useFetch blocks navigation until its async handler is resolved. useLazyFetch allows navigation to proceed immediately, with data being fetched in the background.

vue

<script setup lang="ts">
const { status, data: posts } = await useLazyFetch('/api/posts')
</script>

<template>
  <div v-if="status === 'pending'">
    Loading ...
  </div>
  <div v-else-if="status === 'error'">
    Error loading posts
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- do something -->
    </div>
  </div>
</template>

::note useLazyFetch has the same signature as useFetch. ::

::warning Awaiting useLazyFetch initializes the call but does not wait for the data. During client-side navigation, check status === 'pending' and status === 'error' in your component's template before using the result. ::

::warning useLazyFetch is a reserved function name transformed by the compiler, so you should not name your own function useLazyFetch. ::

Type

export function useLazyFetch<ResT, ErrorT = NuxtError<unknown>, DataT = ResT> (
  url: string | Request | Ref<string | Request> | (() => string | Request),
  options?: UseFetchOptions<ResT, DataT>,
): AsyncData<DataT, ErrorT> & Promise<AsyncData<DataT, ErrorT>>

::note useLazyFetch is equivalent to useFetch with lazy: true option set. See useFetch for full type definitions. ::

Parameters

useLazyFetch accepts the same parameters as useFetch:

URL (string | Request | Ref<string | Request> | () => string | Request): The URL or request to fetch.
options (object): Same as useFetch options, with lazy automatically set to true.

:read-more{to="/docs/4.x/api/composables/use-fetch#parameters"}

Return Values

Returns the same AsyncData object as useFetch:

Name	Type	Description
`data`	`Ref<DataT \| undefined>`	The result of the asynchronous fetch.
`refresh`	`(opts?: AsyncDataExecuteOptions) => Promise<void>`	Function to manually refresh the data.
`execute`	`(opts?: AsyncDataExecuteOptions) => Promise<void>`	Alias for `refresh`.
`error`	`Ref<ErrorT \| undefined>`	Error object if the data fetching failed.
`status`	`Ref<'idle' \| 'pending' \| 'success' \| 'error'>`	Status of the data request. Use it to distinguish `idle`, `pending`, `success`, and `error`.
`pending`	`Ref<boolean>`	`true` while a request is in flight. See `useFetch`.
`clear`	`() => void`	Resets `data` to `undefined`, `error` to `undefined`, sets `status` to `idle`, and cancels any pending requests.

:read-more{to="/docs/4.x/api/composables/use-fetch#return-values"}

Example

Handling Loading State

vue

<script setup lang="ts">
/* useLazyFetch lets navigation continue before the fetch completes.
 * Handle loading and error states in the template.
 */
const { status, data: posts } = await useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
  // Because posts 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 posts
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- do something -->
    </div>
  </div>
</template>

:read-more{to="/docs/4.x/getting-started/data-fetching"}