@nuxt/docs-nightly 4.3.0-29356103.2f7957ac → 4.3.0-29430576.f48ea4c8

package/{3.api → 4.api}/2.composables/use-fetch.md

@@ -100,7 +100,7 @@ If you encounter the `data` variable destructured from a `useFetch` returns a st
 
 ### Reactive Fetch Options
 
-Fetch options can be provided as reactive, supporting `computed`, `ref` and [computed getters](https://vuejs.org/guide/essentials/computed.html). When a reactive fetch option is updated it will trigger a refetch using the updated resolved reactive value.
+Fetch options can be provided as reactive, supporting `computed`, `ref` and [computed getters](https://vuejs.org/guide/essentials/computed). When a reactive fetch option is updated it will trigger a refetch using the updated resolved reactive value.
 
 ```ts
 const searchQuery = ref('initial')
@@ -128,7 +128,7 @@ searchQuery.value = 'new search'
 ```ts [Signature]
 export function useFetch<DataT, ErrorT> (
   url: string | Request | Ref<string | Request> | (() => string | Request),
-  options?: UseFetchOptions<DataT>
+  options?: UseFetchOptions<DataT>,
 ): Promise<AsyncData<DataT, ErrorT>>
 
 type UseFetchOptions<DataT> = {
@@ -183,29 +183,29 @@ type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 
 - `options` (object): Configuration for the fetch request. Extends [unjs/ofetch](https://github.com/unjs/ofetch) options and [`AsyncDataOptions`](/docs/4.x/api/composables/use-async-data#params). All options can be a static value, a `ref`, or a computed value.
 
-| Option | Type | Default | Description |
-| ---| --- | --- | --- |
-| `key` | `MaybeRefOrGetter<string>` | auto-gen | Unique key for de-duplication. If not provided, generated from URL and options. |
-| `method` | `MaybeRefOrGetter<string>` | `'GET'` | HTTP request method. |
-| `query` | `MaybeRefOrGetter<SearchParams>` | - | Query/search params to append to the URL. Alias: `params`. |
-| `params` | `MaybeRefOrGetter<SearchParams>` | - | Alias for `query`. |
-| `body` | `MaybeRefOrGetter<RequestInit['body'] \| Record<string, any>>` | - | Request body. Objects are automatically stringified. |
-| `headers` | `MaybeRefOrGetter<Record<string, string> \| [key, value][] \| Headers>` | - | Request headers. |
-| `baseURL` | `MaybeRefOrGetter<string>` | - | Base URL for the request. |
-| `timeout` | `MaybeRefOrGetter<number>` | - | Timeout in milliseconds to abort the request. |
-| `cache` | `boolean \| string` | - | Cache control. Boolean disables cache, or use Fetch API values: `default`, `no-store`, etc. |
-| `server` | `boolean` | `true` | Whether to fetch on the server. |
-| `lazy` | `boolean` | `false` | If true, resolves after route loads (does not block navigation). |
-| `immediate` | `boolean` | `true` | If false, prevents request from firing immediately. |
-| `default` | `() => DataT` | - | Factory for default value of `data` before async resolves. |
-| `timeout` | `number` | - | A number in milliseconds to wait before timing out the request (defaults to `undefined`, which means no timeout) |
-| `transform` | `(input: DataT) => DataT \| Promise<DataT>` | - | Function to transform the result after resolving. |
-| `getCachedData`| `(key, nuxtApp, ctx) => DataT \| undefined` | - | Function to return cached data. See below for default. |
-| `pick` | `string[]` | - | Only pick specified keys from the result. |
-| `watch` | `MultiWatchSources \| false` | - | Array of reactive sources to watch and auto-refresh. `false` disables watching. |
-| `deep` | `boolean` | `false` | Return data in a deep ref object. |
-| `dedupe` | `'cancel' \| 'defer'` | `'cancel'` | Avoid fetching same key more than once at a time. |
-| `$fetch` | `typeof globalThis.$fetch` | - | Custom $fetch implementation. See [Custom useFetch in Nuxt](/docs/4.x/guide/recipes/custom-usefetch) |
+| Option          | Type                                                                    | Default    | Description                                                                                                      |
+|-----------------|-------------------------------------------------------------------------|------------|------------------------------------------------------------------------------------------------------------------|
+| `key`           | `MaybeRefOrGetter<string>`                                              | auto-gen   | Unique key for de-duplication. If not provided, generated from URL and options.                                  |
+| `method`        | `MaybeRefOrGetter<string>`                                              | `'GET'`    | HTTP request method.                                                                                             |
+| `query`         | `MaybeRefOrGetter<SearchParams>`                                        | -          | Query/search params to append to the URL. Alias: `params`.                                                       |
+| `params`        | `MaybeRefOrGetter<SearchParams>`                                        | -          | Alias for `query`.                                                                                               |
+| `body`          | `MaybeRefOrGetter<RequestInit['body'] \| Record<string, any>>`          | -          | Request body. Objects are automatically stringified.                                                             |
+| `headers`       | `MaybeRefOrGetter<Record<string, string> \| [key, value][] \| Headers>` | -          | Request headers.                                                                                                 |
+| `baseURL`       | `MaybeRefOrGetter<string>`                                              | -          | Base URL for the request.                                                                                        |
+| `timeout`       | `MaybeRefOrGetter<number>`                                              | -          | Timeout in milliseconds to abort the request.                                                                    |
+| `cache`         | `boolean \| string`                                                     | -          | Cache control. Boolean disables cache, or use Fetch API values: `default`, `no-store`, etc.                      |
+| `server`        | `boolean`                                                               | `true`     | Whether to fetch on the server.                                                                                  |
+| `lazy`          | `boolean`                                                               | `false`    | If true, resolves after route loads (does not block navigation).                                                 |
+| `immediate`     | `boolean`                                                               | `true`     | If false, prevents request from firing immediately.                                                              |
+| `default`       | `() => DataT`                                                           | -          | Factory for default value of `data` before async resolves.                                                       |
+| `timeout`       | `number`                                                                | -          | A number in milliseconds to wait before timing out the request (defaults to `undefined`, which means no timeout) |
+| `transform`     | `(input: DataT) => DataT \| Promise<DataT>`                             | -          | Function to transform the result after resolving.                                                                |
+| `getCachedData` | `(key, nuxtApp, ctx) => DataT \| undefined`                             | -          | Function to return cached data. See below for default.                                                           |
+| `pick`          | `string[]`                                                              | -          | Only pick specified keys from the result.                                                                        |
+| `watch`         | `MultiWatchSources \| false`                                            | -          | Array of reactive sources to watch and auto-refresh. `false` disables watching.                                  |
+| `deep`          | `boolean`                                                               | `false`    | Return data in a deep ref object.                                                                                |
+| `dedupe`        | `'cancel' \| 'defer'`                                                   | `'cancel'` | Avoid fetching same key more than once at a time.                                                                |
+| `$fetch`        | `typeof globalThis.$fetch`                                              | -          | Custom $fetch implementation. See [Custom useFetch in Nuxt](/docs/4.x/guide/recipes/custom-usefetch)             |
 
 ::note
 All fetch options can be given a `computed` or `ref` value. These will be watched and new requests made automatically with any new values if they are updated.
@@ -222,14 +222,14 @@ This only caches data when `experimental.payloadExtraction` in `nuxt.config` is
 
 ## Return Values
 
-| Name | Type | Description |
-| --- | --- |--- |
-| `data` | `Ref<DataT \| undefined>` | The result of the asynchronous fetch. |
-| `refresh` | `(opts?: AsyncDataExecuteOptions) => Promise<void>` | Function to manually refresh the data. By default, Nuxt waits until a `refresh` is finished before it can be executed again. |
-| `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. See below for possible values. |
-| `clear` | `() => void` | Resets `data` to `undefined` (or the value of `options.default()` if provided), `error` to `undefined`, set `status` to `idle`, and cancels any pending requests. |
+| Name      | Type                                                | Description                                                                                                                                                       |
+|-----------|-----------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `data`    | `Ref<DataT \| undefined>`                           | The result of the asynchronous fetch.                                                                                                                             |
+| `refresh` | `(opts?: AsyncDataExecuteOptions) => Promise<void>` | Function to manually refresh the data. By default, Nuxt waits until a `refresh` is finished before it can be executed again.                                      |
+| `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. See below for possible values.                                                                                                        |
+| `clear`   | `() => void`                                        | Resets `data` to `undefined` (or the value of `options.default()` if provided), `error` to `undefined`, set `status` to `idle`, and cancels any pending requests. |
 
 ### Status values
 

package/{3.api → 4.api}/2.composables/use-head-safe.md

@@ -8,28 +8,12 @@ links:
     size: xs
 ---
 
-The `useHeadSafe` composable is a wrapper around the [`useHead`](/docs/4.x/api/composables/use-head) composable that restricts the input to only allow safe values.
-
 ## Usage
 
-You can pass all the same values as [`useHead`](/docs/4.x/api/composables/use-head)
-
-```ts
-useHeadSafe({
-  script: [
-    { id: 'xss-script', innerHTML: 'alert("xss")' },
-  ],
-  meta: [
-    { 'http-equiv': 'refresh', 'content': '0;javascript:alert(1)' },
-  ],
-})
-// Will safely generate
-// <script id="xss-script"></script>
-// <meta content="0;javascript:alert(1)">
-```
+The `useHeadSafe` composable is a wrapper around the [`useHead`](/docs/4.x/api/composables/use-head) composable that restricts the input to only allow safe values. This is the recommended way to manage head data when working with user input, as it prevents XSS attacks by sanitizing potentially dangerous attributes.
 
-::read-more{to="https://unhead.unjs.io/docs/typescript/head/api/composables/use-head-safe" target="_blank"}
-Read more on the `Unhead` documentation.
+::warning
+When using `useHeadSafe`, potentially dangerous attributes like `innerHTML` in scripts or `http-equiv` in meta tags are automatically stripped out to prevent XSS attacks. Use this composable whenever you're working with user-generated content.
 ::
 
 ## Type
@@ -38,7 +22,9 @@ Read more on the `Unhead` documentation.
 export function useHeadSafe (input: MaybeComputedRef<HeadSafe>): void
 ```
 
-The list of allowed values is:
+### Allowed Attributes
+
+The following attributes are whitelisted for each head element type:
 
 ```ts
 const WhitelistAttributes = {
@@ -53,3 +39,34 @@ const WhitelistAttributes = {
 ```
 
 See [@unhead/vue](https://github.com/unjs/unhead/blob/main/packages/vue/src/types/safeSchema.ts) for more detailed types.
+
+## Parameters
+
+`input`: A `MaybeComputedRef<HeadSafe>` object containing head data. You can pass all the same values as [`useHead`](/docs/4.x/api/composables/use-head), but only safe attributes will be rendered.
+
+## Return Values
+
+This composable does not return any value.
+
+## Example
+
+```vue [app/pages/user-profile.vue]
+<script setup lang="ts">
+// User-generated content that might contain malicious code
+const userBio = ref('<script>alert("xss")<' + '/script>')
+
+useHeadSafe({
+  title: `User Profile`,
+  meta: [
+    {
+      name: 'description',
+      content: userBio.value, // Safely sanitized
+    },
+  ],
+})
+</script>
+```
+
+::read-more{to="https://unhead.unjs.io/docs/typescript/head/api/composables/use-head-safe" target="_blank"}
+Read more on the `Unhead` documentation.
+::

package/4.api/2.composables/use-head.md

@@ -0,0 +1,184 @@
+---
+title: useHead
+description: useHead customizes the head properties of individual pages of your Nuxt app.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/unjs/unhead/blob/main/packages/vue/src/composables.ts
+    size: xs
+---
+
+## Usage
+
+The `useHead` composable allows you to manage your head tags in a programmatic and reactive way, powered by [Unhead](https://unhead.unjs.io). It lets you customize the meta tags, links, scripts, and other elements in the `<head>` section of your HTML document.
+
+```vue [app/app.vue]
+<script setup lang="ts">
+useHead({
+  title: 'My App',
+  meta: [
+    { name: 'description', content: 'My amazing site.' },
+  ],
+  bodyAttrs: {
+    class: 'test',
+  },
+  script: [{ innerHTML: 'console.log(\'Hello world\')' }],
+})
+</script>
+```
+
+::warning
+If the data comes from a user or other untrusted source, we recommend you check out [`useHeadSafe`](/docs/4.x/api/composables/use-head-safe).
+::
+
+::note
+The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `reactive` properties. The `meta` parameter can also accept a function returning an object to make the entire object reactive.
+::
+
+## Type
+
+```ts [Signature]
+export function useHead (meta: MaybeComputedRef<MetaObject>): ActiveHeadEntry<UseHeadInput>
+
+interface MetaObject {
+  title?: string
+  titleTemplate?: string | ((title?: string) => string)
+  base?: Base
+  link?: Link[]
+  meta?: Meta[]
+  style?: Style[]
+  script?: Script[]
+  noscript?: Noscript[]
+  htmlAttrs?: HtmlAttributes
+  bodyAttrs?: BodyAttributes
+}
+
+interface ActiveHeadEntry<Input> {
+  /**
+   * Updates the entry with new input.
+   *
+   * Will first clear any side effects for previous input.
+   */
+  patch: (input: Input) => void
+  /**
+   * Dispose the entry, removing it from the active head.
+   *
+   * Will queue side effects for removal.
+   */
+  dispose: () => void
+}
+```
+
+See [@unhead/schema](https://github.com/unjs/unhead/blob/main/packages/vue/src/types/schema.ts) for more detailed types.
+
+## Parameters
+
+`meta`: An object accepting head metadata properties to customize the page's `<head>` section. All properties support reactive values (`ref`, `computed`, `reactive`) or can be a function returning the metadata object.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | Sets the page title. |
+| `titleTemplate` | `string \| ((title?: string) => string)` | Configures a dynamic template to customize the page title. Can be a string with `%s` placeholder or a function. |
+| `base` | `Base` | Sets the `<base>` tag for the document. |
+| `link` | `Link[]` | Array of link objects. Each element is mapped to a `<link>` tag, where object properties correspond to HTML attributes. |
+| `meta` | `Meta[]` | Array of meta objects. Each element is mapped to a `<meta>` tag, where object properties correspond to HTML attributes. |
+| `style` | `Style[]` | Array of style objects. Each element is mapped to a `<style>` tag, where object properties correspond to HTML attributes. |
+| `script` | `Script[]` | Array of script objects. Each element is mapped to a `<script>` tag, where object properties correspond to HTML attributes. |
+| `noscript` | `Noscript[]` | Array of noscript objects. Each element is mapped to a `<noscript>` tag, where object properties correspond to HTML attributes. |
+| `htmlAttrs` | `HtmlAttributes` | Sets attributes of the `<html>` tag. Each object property is mapped to the corresponding attribute. |
+| `bodyAttrs` | `BodyAttributes` | Sets attributes of the `<body>` tag. Each object property is mapped to the corresponding attribute. |
+
+## Return Values
+
+This composable does not return any value. It registers the head metadata with Unhead, which manages the actual DOM updates.
+
+## Examples
+
+### Basic Meta Tags
+
+```vue [app/pages/about.vue]
+<script setup lang="ts">
+useHead({
+  title: 'About Us',
+  meta: [
+    { name: 'description', content: 'Learn more about our company' },
+    { property: 'og:title', content: 'About Us' },
+    { property: 'og:description', content: 'Learn more about our company' },
+  ],
+})
+</script>
+```
+
+### Reactive Meta Tags
+
+```vue [app/pages/profile.vue]
+<script setup lang="ts">
+const profile = ref({ name: 'John Doe' })
+
+useHead({
+  title: computed(() => profile.value.name),
+  meta: [
+    {
+      name: 'description',
+      content: computed(() => `Profile page for ${profile.value.name}`),
+    },
+  ],
+})
+</script>
+```
+
+### Using a Function for Full Reactivity
+
+```vue [app/pages/dynamic.vue]
+<script setup lang="ts">
+const count = ref(0)
+
+useHead(() => ({
+  title: `Count: ${count.value}`,
+  meta: [
+    { name: 'description', content: `Current count is ${count.value}` },
+  ],
+}))
+</script>
+```
+
+### Adding External Scripts and Styles
+
+```vue [app/pages/external.vue]
+<script setup lang="ts">
+useHead({
+  link: [
+    {
+      rel: 'stylesheet',
+      href: 'https://cdn.example.com/styles.css',
+    },
+  ],
+  script: [
+    {
+      src: 'https://cdn.example.com/script.js',
+      async: true,
+    },
+  ],
+})
+</script>
+```
+
+### Body and HTML Attributes
+
+```vue [app/pages/themed.vue]
+<script setup lang="ts">
+const isDark = ref(true)
+
+useHead({
+  htmlAttrs: {
+    lang: 'en',
+    class: computed(() => isDark.value ? 'dark' : 'light'),
+  },
+  bodyAttrs: {
+    class: 'themed-page',
+  },
+})
+</script>
+```
+
+:read-more{to="/docs/4.x/getting-started/seo-meta"}

package/{3.api → 4.api}/2.composables/use-hydration.md

@@ -8,6 +8,8 @@ links:
     size: xs
 ---
 
+`useHydration` is a built-in composable that provides a way to set data on the server side every time a new HTTP request is made and receive that data on the client side. This way `useHydration` allows you to take full control of the hydration cycle.
+
 ::note
 This is an advanced composable, primarily designed for use within plugins, mostly used by Nuxt modules.
 ::
@@ -16,14 +18,24 @@ This is an advanced composable, primarily designed for use within plugins, mostl
 `useHydration` is designed to **ensure state synchronization and restoration during SSR**. If you need to create a globally reactive state that is SSR-friendly in Nuxt, [`useState`](/docs/4.x/api/composables/use-state) is the recommended choice.
 ::
 
-`useHydration` is a built-in composable that provides a way to set data on the server side every time a new HTTP request is made and receive that data on the client side. This way `useHydration` allows you to take full control of the hydration cycle.
+## Usage
 
 The data returned from the `get` function on the server is stored in `nuxtApp.payload` under the unique key provided as the first parameter to `useHydration`. During hydration, this data is then retrieved on the client, preventing redundant computations or API calls.
 
-## Usage
-
 ::code-group
 
+```ts [With useHydration]
+export default defineNuxtPlugin((nuxtApp) => {
+  const myStore = new MyStore()
+
+  useHydration(
+    'myStoreState',
+    () => myStore.getState(),
+    data => myStore.setState(data),
+  )
+})
+```
+
 ```ts [Without useHydration]
 export default defineNuxtPlugin((nuxtApp) => {
   const myStore = new MyStore()
@@ -41,18 +53,6 @@ export default defineNuxtPlugin((nuxtApp) => {
   }
 })
 ```
-
-```ts [With useHydration]
-export default defineNuxtPlugin((nuxtApp) => {
-  const myStore = new MyStore()
-
-  useHydration(
-    'myStoreState',
-    () => myStore.getState(),
-    data => myStore.setState(data),
-  )
-})
-```
 ::
 
 ## Type
@@ -63,6 +63,12 @@ export function useHydration<T> (key: string, get: () => T, set: (value: T) => v
 
 ## Parameters
 
-- `key`: A unique key that identifies the data in your Nuxt application.
-- `get`: A function executed **only on the server** (called when SSR rendering is done) to set the initial value.
-- `set`: A function executed **only on the client** (called when initial vue instance is created) to receive the data.
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `key` | `string` | A unique key that identifies the data in your Nuxt application. |
+| `get` | `() => T` | A function executed **only on the server** (called when SSR rendering is done) to set the initial value. |
+| `set` | `(value: T) => void` | A function executed **only on the client** (called when initial Vue instance is created) to receive the data. |
+
+## Return Values
+
+This composable does not return any value.

package/4.api/2.composables/use-lazy-async-data.md

@@ -0,0 +1,96 @@
+---
+title: useLazyAsyncData
+description: This wrapper around useAsyncData triggers navigation immediately.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/asyncData.ts
+    size: xs
+---
+
+`useLazyAsyncData` provides a wrapper around [`useAsyncData`](/docs/4.x/api/composables/use-async-data) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
+
+::note
+By default, [`useAsyncData`](/docs/4.x/api/composables/use-async-data) blocks navigation until its async handler is resolved. `useLazyAsyncData` allows navigation to occur immediately while data fetching continues in the background.
+::
+
+## Usage
+
+```vue [app/pages/index.vue]
+<script setup lang="ts">
+const { status, data: posts } = await useLazyAsyncData('posts', () => $fetch('/api/posts'))
+</script>
+
+<template>
+  <div>
+    <div v-if="status === 'pending'">
+      Loading...
+    </div>
+    <div v-else-if="status === 'error'">
+      Error loading posts
+    </div>
+    <div v-else>
+      {{ posts }}
+    </div>
+  </div>
+</template>
+```
+
+When using `useLazyAsyncData`, navigation will occur before fetching is complete. This means you must handle `pending` and `error` states directly within your component's template.
+
+::warning
+`useLazyAsyncData` is a reserved function name transformed by the compiler, so you should not name your own function `useLazyAsyncData`.
+::
+
+## Type
+
+```ts [Signature]
+export function useLazyAsyncData<DataT, ErrorT> (
+  handler: (ctx?: NuxtApp) => Promise<DataT>,
+  options?: AsyncDataOptions<DataT>,
+): AsyncData<DataT, ErrorT>
+
+export function useLazyAsyncData<DataT, ErrorT> (
+  key: string,
+  handler: (ctx?: NuxtApp) => Promise<DataT>,
+  options?: AsyncDataOptions<DataT>,
+): AsyncData<DataT, ErrorT>
+```
+
+`useLazyAsyncData` has the same signature as [`useAsyncData`](/docs/4.x/api/composables/use-async-data).
+
+## Parameters
+
+`useLazyAsyncData` accepts the same parameters as [`useAsyncData`](/docs/4.x/api/composables/use-async-data), with the `lazy` option automatically set to `true`.
+
+:read-more{to="/docs/4.x/api/composables/use-async-data#parameters"}
+
+## Return Values
+
+`useLazyAsyncData` returns the same values as [`useAsyncData`](/docs/4.x/api/composables/use-async-data).
+
+:read-more{to="/docs/4.x/api/composables/use-async-data#return-values"}
+
+## Example
+
+```vue [app/pages/index.vue]
+<script setup lang="ts">
+/* Navigation will occur before fetching is complete.
+  Handle 'pending' and 'error' states directly within your component's template
+*/
+const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
+
+watch(count, (newCount) => {
+  // Because count might start out null, you won't have access
+  // to its contents immediately, but you can watch it.
+})
+</script>
+
+<template>
+  <div>
+    {{ status === 'pending' ? 'Loading' : count }}
+  </div>
+</template>
+```
+
+:read-more{to="/docs/4.x/getting-started/data-fetching"}

package/4.api/2.composables/use-lazy-fetch.md

@@ -0,0 +1,111 @@
+---
+title: 'useLazyFetch'
+description: This wrapper around useFetch triggers navigation immediately.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/fetch.ts
+    size: xs
+---
+
+`useLazyFetch` provides a wrapper around [`useFetch`](/docs/4.x/api/composables/use-fetch) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
+
+## Usage
+
+By default, [`useFetch`](/docs/4.x/api/composables/use-fetch) 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]
+<script setup lang="ts">
+const { status, data: posts } = await useLazyFetch('/api/posts')
+</script>
+
+<template>
+  <div v-if="status === 'pending'">
+    Loading ...
+  </div>
+  <div v-else>
+    <div v-for="post in posts">
+      <!-- do something -->
+    </div>
+  </div>
+</template>
+```
+
+::note
+`useLazyFetch` has the same signature as [`useFetch`](/docs/4.x/api/composables/use-fetch).
+::
+
+::warning
+Awaiting `useLazyFetch` only ensures the call is initialized. On client-side navigation, data may not be immediately available, and you must handle the `pending` state in your component's template.
+::
+
+::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<DataT, ErrorT> (
+  url: string | Request | Ref<string | Request> | (() => string | Request),
+  options?: UseFetchOptions<DataT>,
+): Promise<AsyncData<DataT, ErrorT>>
+```
+
+::note
+`useLazyFetch` is equivalent to `useFetch` with `lazy: true` option set. See [`useFetch`](/docs/4.x/api/composables/use-fetch) for full type definitions.
+::
+
+## Parameters
+
+`useLazyFetch` accepts the same parameters as [`useFetch`](/docs/4.x/api/composables/use-fetch):
+
+- `URL` (`string | Request | Ref<string | Request> | () => string | Request`): The URL or request to fetch.
+- `options` (object): Same as [`useFetch` options](/docs/4.x/api/composables/use-fetch#parameters), 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`](/docs/4.x/api/composables/use-fetch):
+
+| 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.                                                                                      |
+| `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"}
+
+## Examples
+
+### Handling Pending State
+
+```vue [app/pages/index.vue]
+<script setup lang="ts">
+/* Navigation will occur before fetching is complete.
+ * Handle 'pending' and 'error' states directly within your component's 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>
+    <div v-for="post in posts">
+      <!-- do something -->
+    </div>
+  </div>
+</template>
+```
+
+:read-more{to="/docs/4.x/getting-started/data-fetching"}