useLazyFetch

Source
This wrapper around useFetch triggers navigation immediately.

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.

app/pages/index.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>
useLazyFetch has the same signature as useFetch.
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.
useLazyFetch is a reserved function name transformed by the compiler, so you should not name your own function useLazyFetch.

Type

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>>
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 in Docs > 4 X > API > Composables > Use Fetch#parameters.

Return Values

Returns the same AsyncData object as useFetch:

NameTypeDescription
dataRef<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.
errorRef<ErrorT | undefined>Error object if the data fetching failed.
statusRef<'idle' | 'pending' | 'success' | 'error'>Status of the data request. Use it to distinguish idle, pending, success, and error.
pendingRef<boolean>true while a request is in flight. See useFetch.
clear() => voidResets data to undefined, error to undefined, sets status to idle, and cancels any pending requests.
Read more in Docs > 4 X > API > Composables > Use Fetch#return Values.

Example

Handling Loading State

app/pages/index.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 in Docs > 4 X > Getting Started > Data Fetching.