useLazyFetch

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 [app/pages/index.vue]

::note
`useLazyFetch` has the same signature as [`useFetch`](/docs/4.x/api/composables/use-fetch).
::

::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

```ts [Signature]
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:

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

Example#

Handling Loading State#

```vue [app/pages/index.vue]

```

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