@nuxt/docs 3.19.3 → 3.20.1

package/3.api/2.composables/use-async-data.md

@@ -18,9 +18,9 @@ Within your pages, components, and plugins you can use useAsyncData to get acces
 
 ```vue [pages/index.vue]
 <script setup lang="ts">
-const { data, status, error, refresh, clear } = await useAsyncData(
+const { data, status, pending, error, refresh, clear } = await useAsyncData(
   'mountains',
-  () => $fetch('https://api.nuxtjs.dev/mountains'),
+  (_nuxtApp, { signal }) => $fetch('https://api.nuxtjs.dev/mountains', { signal }),
 )
 </script>
 ```
@@ -30,7 +30,7 @@ If you're using a custom useAsyncData wrapper, do not await it in the composable
 ::
 
 ::note
-`data`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions.
+`data`, `status`, `pending` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions.
 ::
 
 ### Watch Params
@@ -42,10 +42,11 @@ The built-in `watch` option allows automatically rerunning the fetcher function
 const page = ref(1)
 const { data: posts } = await useAsyncData(
   'posts',
-  () => $fetch('https://fakeApi.com/posts', {
+  (_nuxtApp, { signal }) => $fetch('https://fakeApi.com/posts', {
     params: {
       page: page.value,
     },
+    signal,
   }), {
     watch: [page],
   },
@@ -70,6 +71,64 @@ const { data: user } = useAsyncData(
 </script>
 ```
 
+### Make your `handler` abortable
+
+You can make your `handler` function abortable by using the `signal` provided in the second argument. This is useful for cancelling requests when they are no longer needed, such as when a user navigates away from a page. `$fetch` natively supports abort signals.
+
+```ts
+const { data, error } = await useAsyncData(
+  'users',
+  (_nuxtApp, { signal }) => $fetch('/api/users', { signal }),
+)
+
+refresh() // will actually cancel the $fetch request (if dedupe: cancel)
+refresh() // will actually cancel the $fetch request (if dedupe: cancel)
+refresh()
+
+clear() // will cancel the latest pending handler
+```
+
+You can also pass an `AbortSignal` to the `refresh`/`execute` function to cancel individual requests manually.
+
+```ts
+const { refresh } = await useAsyncData(
+  'users',
+  (_nuxtApp, { signal }) => $fetch('/api/users', { signal }),
+)
+let abortController: AbortController | undefined
+
+function handleUserAction () {
+  abortController = new AbortController()
+  refresh({ signal: abortController.signal })
+}
+
+function handleCancel () {
+  abortController?.abort() // aborts the ongoing refresh request
+}
+```
+
+If your `handler` function does not support abort signals, you can implement your own abort logic using the `signal` provided.
+
+```ts
+const { data, error } = await useAsyncData(
+  'users',
+  (_nuxtApp, { signal }) => {
+    return new Promise((resolve, reject) => {
+      signal?.addEventListener('abort', () => {
+        reject(new Error('Request aborted'))
+      })
+      return Promise.resolve(callback.call(this, yourHandler)).then(resolve, reject)
+    })
+  },
+)
+```
+
+The handler signal will be aborted when:
+
+- A new request is made with `dedupe: 'cancel'`
+- The `clear` function is called
+- The `options.timeout` duration is exceeded
+
 ::warning
 [`useAsyncData`](/docs/3.x/api/composables/use-async-data) is a reserved function name transformed by the compiler, so you should not name your own function [`useAsyncData`](/docs/3.x/api/composables/use-async-data).
 ::
@@ -102,6 +161,7 @@ The `handler` function should be **side-effect free** to ensure predictable beha
   - `dedupe`: avoid fetching same key more than once at a time (defaults to `cancel`). Possible options:
     - `cancel` - cancels existing requests when a new one is made
     - `defer` - does not make new requests at all if there is a pending request
+  - `timeout` - a number in milliseconds to wait before timing out the request (defaults to `undefined`, which means no timeout)
 
 ::note
 Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `lazy: true` and implementing a loading state instead for a snappier user experience.
@@ -115,7 +175,7 @@ You can use `useLazyAsyncData` to have the same behavior as `lazy: true` with `u
 
 ### Shared State and Option Consistency
 
-When using the same key for multiple `useAsyncData` calls, they will share the same `data`, `error` and `status` refs. This ensures consistency across components but requires option consistency.
+When using the same key for multiple `useAsyncData` calls, they will share the same `data`, `error`, `status` and `pending` refs. This ensures consistency across components but requires option consistency.
 
 The following options **must be consistent** across all calls with the same key:
 - `handler` function
@@ -134,12 +194,12 @@ The following options **can differ** without triggering warnings:
 
 ```ts
 // ❌ This will trigger a development warning
-const { data: users1 } = useAsyncData('users', () => $fetch('/api/users'), { deep: false })
-const { data: users2 } = useAsyncData('users', () => $fetch('/api/users'), { deep: true })
+const { data: users1 } = useAsyncData('users', (_nuxtApp, { signal }) => $fetch('/api/users', { signal }), { deep: false })
+const { data: users2 } = useAsyncData('users', (_nuxtApp, { signal }) => $fetch('/api/users', { signal }), { deep: true })
 
 // ✅ This is allowed
-const { data: users1 } = useAsyncData('users', () => $fetch('/api/users'), { immediate: true })
-const { data: users2 } = useAsyncData('users', () => $fetch('/api/users'), { immediate: false })
+const { data: users1 } = useAsyncData('users', (_nuxtApp, { signal }) => $fetch('/api/users', { signal }), { immediate: true })
+const { data: users2 } = useAsyncData('users', (_nuxtApp, { signal }) => $fetch('/api/users', { signal }), { immediate: false })
 ```
 
 ::tip
@@ -158,6 +218,7 @@ Keyed state created using `useAsyncData` can be retrieved across your Nuxt appli
   - `pending`: the request is in progress
   - `success`: the request has completed successfully
   - `error`: the request has failed
+- `pending`: a `Ref<boolean>` that is `true` while the request is in progress.
 - `clear`: a function that can be used to set `data` to `undefined` (or the value of `options.default()` if provided), set `error` to `null`, set `status` to `idle`, and mark any currently pending requests as cancelled.
 
 By default, Nuxt waits until a `refresh` is finished before it can be executed again.
@@ -169,14 +230,16 @@ If you have not fetched data on the server (for example, with `server: false`),
 ## Type
 
 ```ts [Signature]
+export type AsyncDataHandler<ResT> = (nuxtApp: NuxtApp, options: { signal: AbortSignal }) => Promise<ResT>
+
 export function useAsyncData<DataT, DataE> (
-  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
-  options?: AsyncDataOptions<DataT>
+  handler: AsyncDataHandler<DataT>,
+  options?: AsyncDataOptions<DataT>,
 ): AsyncData<DataT, DataE>
 export function useAsyncData<DataT, DataE> (
   key: MaybeRefOrGetter<string>,
-  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
-  options?: AsyncDataOptions<DataT>
+  handler: AsyncDataHandler<DataT>,
+  options?: AsyncDataOptions<DataT>,
 ): Promise<AsyncData<DataT, DataE>>
 
 type AsyncDataOptions<DataT> = {
@@ -190,6 +253,7 @@ type AsyncDataOptions<DataT> = {
   pick?: string[]
   watch?: MultiWatchSources | false
   getCachedData?: (key: string, nuxtApp: NuxtApp, ctx: AsyncDataRequestContext) => DataT | undefined
+  timeout?: number
 }
 
 type AsyncDataRequestContext = {
@@ -204,10 +268,13 @@ type AsyncData<DataT, ErrorT> = {
   clear: () => void
   error: Ref<ErrorT | null>
   status: Ref<AsyncDataRequestStatus>
+  pending: Ref<boolean>
 }
 
 interface AsyncDataExecuteOptions {
   dedupe?: 'cancel' | 'defer'
+  timeout?: number
+  signal?: AbortSignal
 }
 
 type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'

package/3.api/2.composables/use-cookie.md

@@ -42,7 +42,7 @@ export interface CookieRef<T> extends Ref<T> {}
 
 export function useCookie<T = string | null | undefined> (
   name: string,
-  options?: CookieOptions<T>
+  options?: CookieOptions<T>,
 ): CookieRef<T>
 ```
 

package/3.api/2.composables/use-fetch.md

@@ -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> = {
@@ -145,6 +145,7 @@ type UseFetchOptions<DataT> = {
   getCachedData?: (key: string, nuxtApp: NuxtApp, ctx: AsyncDataRequestContext) => DataT | undefined
   deep?: boolean
   dedupe?: 'cancel' | 'defer'
+  timeout?: number
   default?: () => DataT
   transform?: (input: DataT) => DataT | Promise<DataT>
   pick?: string[]
@@ -169,6 +170,8 @@ type AsyncData<DataT, ErrorT> = {
 
 interface AsyncDataExecuteOptions {
   dedupe?: 'cancel' | 'defer'
+  timeout?: number
+  signal?: AbortSignal
 }
 
 type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
@@ -195,6 +198,7 @@ type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 | `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. |

package/3.api/2.composables/use-head-safe.md

@@ -8,28 +8,12 @@ links:
     size: xs
 ---
 
-The `useHeadSafe` composable is a wrapper around the [`useHead`](/docs/3.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/3.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/3.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/3.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/3.api/2.composables/use-head.md

@@ -8,19 +8,38 @@ links:
     size: xs
 ---
 
-The [`useHead`](/docs/3.x/api/composables/use-head) composable function allows you to manage your head tags in a programmatic and reactive way, powered by [Unhead](https://unhead.unjs.io). If the data comes from a user or other untrusted source, we recommend you check out [`useHeadSafe`](/docs/3.x/api/composables/use-head-safe).
+## Usage
 
-:read-more{to="/docs/getting-started/seo-meta"}
+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/3.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>): void
-```
-
-Below are the non-reactive types for [`useHead`](/docs/3.x/api/composables/use-head) .
 
-```ts
 interface MetaObject {
   title?: string
   titleTemplate?: string | ((title?: string) => string)
@@ -35,35 +54,116 @@ interface MetaObject {
 }
 ```
 
-See [@unhead/vue](https://github.com/unjs/unhead/blob/main/packages/vue/src/types/schema.ts) for more detailed types.
+See [@unhead/schema](https://github.com/unjs/unhead/blob/main/packages/vue/src/types/schema.ts) for more detailed types.
 
-::note
-The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `reactive` properties. `meta` parameter can also accept a function returning an object to make the entire object reactive.
-::
+## 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>
+```
 
-## Params
-
-### `meta`
-
-**Type**: `MetaObject`
-
-An object accepting the following head metadata:
-
-- `meta`: Each element in the array is mapped to a newly-created `<meta>` tag, where object properties are mapped to the corresponding attributes.
-  - **Type**: `Array<Record<string, any>>`
-- `link`: Each element in the array is mapped to a newly-created `<link>` tag, where object properties are mapped to the corresponding attributes.
-  - **Type**: `Array<Record<string, any>>`
-- `style`: Each element in the array is mapped to a newly-created `<style>` tag, where object properties are mapped to the corresponding attributes.
-  - **Type**: `Array<Record<string, any>>`
-- `script`: Each element in the array is mapped to a newly-created `<script>` tag, where object properties are mapped to the corresponding attributes.
-  - **Type**: `Array<Record<string, any>>`
-- `noscript`: Each element in the array is mapped to a newly-created `<noscript>` tag, where object properties are mapped to the corresponding attributes.
-  - **Type**: `Array<Record<string, any>>`
-- `titleTemplate`: Configures dynamic template to customize the page title on an individual page.
-  - **Type**: `string` | `((title: string) => string)`
-- `title`: Sets static page title on an individual page.
-  - **Type**: `string`
-- `bodyAttrs`: Sets attributes of the `<body>` tag. Each object property is mapped to the corresponding attribute.
-  - **Type**: `Record<string, any>`
-- `htmlAttrs`: Sets attributes of the `<html>` tag. Each object property is mapped to the corresponding attribute.
-  - **Type**: `Record<string, any>`
+:read-more{to="/docs/3.x/getting-started/seo-meta"}

package/3.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/3.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/3.api/2.composables/use-lazy-async-data.md

@@ -8,15 +8,68 @@ links:
     size: xs
 ---
 
-## Description
-
-By default, [`useAsyncData`](/docs/3.x/api/composables/use-async-data) blocks navigation until its async handler is resolved. `useLazyAsyncData` provides a wrapper around [`useAsyncData`](/docs/3.x/api/composables/use-async-data) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
+`useLazyAsyncData` provides a wrapper around [`useAsyncData`](/docs/3.x/api/composables/use-async-data) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
 
 ::note
-`useLazyAsyncData` has the same signature as [`useAsyncData`](/docs/3.x/api/composables/use-async-data).
+By default, [`useAsyncData`](/docs/3.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`.
 ::
 
-:read-more{to="/docs/api/composables/use-async-data"}
+## 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/3.x/api/composables/use-async-data).
+
+## Parameters
+
+`useLazyAsyncData` accepts the same parameters as [`useAsyncData`](/docs/3.x/api/composables/use-async-data), with the `lazy` option automatically set to `true`.
+
+:read-more{to="/docs/3.x/api/composables/use-async-data#parameters"}
+
+## Return Values
+
+`useLazyAsyncData` returns the same values as [`useAsyncData`](/docs/3.x/api/composables/use-async-data).
+
+:read-more{to="/docs/3.x/api/composables/use-async-data#return-values"}
 
 ## Example
 
@@ -40,8 +93,4 @@ watch(count, (newCount) => {
 </template>
 ```
 
-::warning
-`useLazyAsyncData` is a reserved function name transformed by the compiler, so you should not name your own function `useLazyAsyncData`.
-::
-
-:read-more{to="/docs/getting-started/data-fetching"}
+:read-more{to="/docs/3.x/getting-started/data-fetching"}