useLazyFetch()
Like useFetch but does not block navigation while the request resolves.
Syntax
const { data, pending, error } = useLazyFetch(url, options)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
url | string | Ref | (() => string) | Yes | The request URL, optionally reactive. |
options | object | No | Same options as `useFetch`; `lazy` is forced to `true`. |
Returns
AsyncData<DataT, ErrorT> — Reactive data, error, pending/status, refresh.
Examples
<script setup lang="ts">
// Navigation is not blocked; render a skeleton while pending
const { data: posts, pending } = useLazyFetch('/api/posts')
</script>
<template>
<SkeletonList v-if="pending" />
<PostList v-else :posts="posts" />
</template>
<script setup lang="ts">
const { data, status } = useLazyFetch('/api/slow-report')
watch(data, (val) => {
if (val) console.log('report ready')
})
</script>
Notes
Equivalent to `useFetch(url, { lazy: true })`. The handler still runs
on the server during SSR, but on client-side navigation the route
changes immediately and `data` is `null` until resolved, so you must
handle the loading and null states in the template.