@nuxt/docs 3.19.2 → 3.20.0

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

@@ -11,7 +11,7 @@ links:
 Within your pages, components, and plugins you can use useAsyncData to get access to data that resolves asynchronously.
 
 ::note
-[`useAsyncData`](/docs/api/composables/use-async-data) is a composable meant to be called directly in the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context). It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client **without re-fetching the data on client side** when the page hydrates.
+[`useAsyncData`](/docs/3.x/api/composables/use-async-data) is a composable meant to be called directly in the [Nuxt context](/docs/3.x/guide/going-further/nuxt-app#the-nuxt-context). It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client **without re-fetching the data on client side** when the page hydrates.
 ::
 
 ## Usage
@@ -20,13 +20,13 @@ Within your pages, components, and plugins you can use useAsyncData to get acces
 <script setup lang="ts">
 const { data, status, error, refresh, clear } = await useAsyncData(
   'mountains',
-  () => $fetch('https://api.nuxtjs.dev/mountains')
+  () => $fetch('https://api.nuxtjs.dev/mountains'),
 )
 </script>
 ```
 
 ::warning
-If you're using a custom useAsyncData wrapper, do not await it in the composable, as that can cause unexpected behavior. Please follow [this recipe](/docs/guide/recipes/custom-usefetch#custom-usefetch) for more information on how to make a custom async data fetcher.
+If you're using a custom useAsyncData wrapper, do not await it in the composable, as that can cause unexpected behavior. Please follow [this recipe](/docs/3.x/guide/recipes/custom-usefetch#custom-usefetch) for more information on how to make a custom async data fetcher.
 ::
 
 ::note
@@ -44,11 +44,11 @@ const { data: posts } = await useAsyncData(
   'posts',
   () => $fetch('https://fakeApi.com/posts', {
     params: {
-      page: page.value
-    }
+      page: page.value,
+    },
   }), {
-    watch: [page]
-  }
+    watch: [page],
+  },
 )
 </script>
 ```
@@ -65,13 +65,13 @@ const userId = computed(() => `user-${route.params.id}`)
 // When the route changes and userId updates, the data will be automatically refetched
 const { data: user } = useAsyncData(
   userId,
-  () => fetchUserById(route.params.id)
+  () => fetchUserById(route.params.id),
 )
 </script>
 ```
 
 ::warning
-[`useAsyncData`](/docs/api/composables/use-async-data) is a reserved function name transformed by the compiler, so you should not name your own function [`useAsyncData`](/docs/api/composables/use-async-data).
+[`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).
 ::
 
 :read-more{to="/docs/getting-started/data-fetching#useasyncdata"}
@@ -81,7 +81,7 @@ const { data: user } = useAsyncData(
 - `key`: a unique key to ensure that data fetching can be properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you.
 - `handler`: an asynchronous function that must return a truthy value (for example, it should not be `undefined` or `null`) or the request may be duplicated on the client side.
 ::warning
-The `handler` function should be **side-effect free** to ensure predictable behavior during SSR and CSR hydration. If you need to trigger side effects, use the [`callOnce`](/docs/api/utils/call-once) utility to do so.
+The `handler` function should be **side-effect free** to ensure predictable behavior during SSR and CSR hydration. If you need to trigger side effects, use the [`callOnce`](/docs/3.x/api/utils/call-once) utility to do so.
 ::
 - `options`:
   - `server`: whether to fetch the data on the server (defaults to `true`)
@@ -91,8 +91,8 @@ The `handler` function should be **side-effect free** to ensure predictable beha
   - `transform`: a function that can be used to alter `handler` function result after resolving
   - `getCachedData`: Provide a function which returns cached data. A `null` or `undefined` return value will trigger a fetch. By default, this is:
     ```ts
-    const getDefaultCachedData = (key, nuxtApp, ctx) => nuxtApp.isHydrating 
-      ? nuxtApp.payload.data[key] 
+    const getDefaultCachedData = (key, nuxtApp, ctx) => nuxtApp.isHydrating
+      ? nuxtApp.payload.data[key]
       : nuxtApp.static.data[key]
     ```
     Which only caches data when `experimental.payloadExtraction` of `nuxt.config` is enabled.
@@ -102,6 +102,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.
@@ -143,7 +144,7 @@ const { data: users2 } = useAsyncData('users', () => $fetch('/api/users'), { imm
 ```
 
 ::tip
-Keyed state created using `useAsyncData` can be retrieved across your Nuxt application using [`useNuxtData`](/docs/api/composables/use-nuxt-data).
+Keyed state created using `useAsyncData` can be retrieved across your Nuxt application using [`useNuxtData`](/docs/3.x/api/composables/use-nuxt-data).
 ::
 
 ## Return Values
@@ -163,19 +164,19 @@ Keyed state created using `useAsyncData` can be retrieved across your Nuxt appli
 By default, Nuxt waits until a `refresh` is finished before it can be executed again.
 
 ::note
-If you have not fetched data on the server (for example, with `server: false`), then the data _will not_ be fetched until hydration completes. This means even if you await [`useAsyncData`](/docs/api/composables/use-async-data) on the client side, `data` will remain `undefined` within `<script setup>`.
+If you have not fetched data on the server (for example, with `server: false`), then the data _will not_ be fetched until hydration completes. This means even if you await [`useAsyncData`](/docs/3.x/api/composables/use-async-data) on the client side, `data` will remain `undefined` within `<script setup>`.
 ::
 
 ## Type
 
 ```ts [Signature]
-function useAsyncData<DataT, DataE>(
-  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
+export function useAsyncData<DataT, DataE> (
+  handler: (nuxtApp: NuxtApp, options: { signal: AbortSignal }) => Promise<DataT>,
   options?: AsyncDataOptions<DataT>
 ): AsyncData<DataT, DataE>
-function useAsyncData<DataT, DataE>(
+export function useAsyncData<DataT, DataE> (
   key: MaybeRefOrGetter<string>,
-  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
+  handler: (nuxtApp: NuxtApp, options: { signal: AbortSignal }) => Promise<DataT>,
   options?: AsyncDataOptions<DataT>
 ): Promise<AsyncData<DataT, DataE>>
 
@@ -190,6 +191,7 @@ type AsyncDataOptions<DataT> = {
   pick?: string[]
   watch?: MultiWatchSources | false
   getCachedData?: (key: string, nuxtApp: NuxtApp, ctx: AsyncDataRequestContext) => DataT | undefined
+  timeout?: number
 }
 
 type AsyncDataRequestContext = {
@@ -204,10 +206,12 @@ type AsyncData<DataT, ErrorT> = {
   clear: () => void
   error: Ref<ErrorT | null>
   status: Ref<AsyncDataRequestStatus>
-};
+}
 
 interface AsyncDataExecuteOptions {
   dedupe?: 'cancel' | 'defer'
+  timeout?: number
+  signal?: AbortSignal
 }
 
 type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'

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

@@ -17,7 +17,7 @@ const cookie = useCookie(name, options)
 ```
 
 ::note
-`useCookie` only works in the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context).
+`useCookie` only works in the [Nuxt context](/docs/3.x/guide/going-further/nuxt-app#the-nuxt-context).
 ::
 
 ::tip
@@ -40,7 +40,7 @@ export interface CookieOptions<T = any> extends Omit<CookieSerializeOptions & Co
 
 export interface CookieRef<T> extends Ref<T> {}
 
-export function useCookie<T = string | null | undefined>(
+export function useCookie<T = string | null | undefined> (
   name: string,
   options?: CookieOptions<T>
 ): CookieRef<T>
@@ -59,7 +59,7 @@ Most of the options will be directly passed to the [cookie](https://github.com/j
 | `decode` | `(value: string) => T` | `decodeURIComponent` + [destr](https://github.com/unjs/destr). | Custom function to decode the cookie value.  Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to decode a previously encoded cookie value into a JavaScript string or other object. <br/> **Note:** If an error is thrown from this function, the original, non-decoded cookie value will be returned as the cookie's value. |
 | `encode` | `(value: T) => string` | `JSON.stringify` + `encodeURIComponent` | Custom function to encode the cookie value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to encode a value into a string suited for a cookie's value. |
 | `default` | `() => T \| Ref<T>` | `undefined` | Function returning the default value if the cookie does not exist.  The function can also return a `Ref`. |
-| `watch` | `boolean \| 'shallow'` | `true`  | Whether to watch for changes and update the cookie. `true` for deep watch, `'shallow'` for shallow watch, i.e. data changes for only top level properties, `false` to disable. <br/> **Note:** Refresh `useCookie` values manually when a cookie has changed with [`refreshCookie`](/docs/api/utils/refresh-cookie). |
+| `watch` | `boolean \| 'shallow'` | `true`  | Whether to watch for changes and update the cookie. `true` for deep watch, `'shallow'` for shallow watch, i.e. data changes for only top level properties, `false` to disable. <br/> **Note:** Refresh `useCookie` values manually when a cookie has changed with [`refreshCookie`](/docs/3.x/api/utils/refresh-cookie). |
 | `readonly` | `boolean` | `false` | If `true`, disables writing to the cookie. |
 | `maxAge` | `number` | `undefined` | Max age in seconds for the cookie, i.e. the value for the [`Max-Age` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.2). The given number will be converted to an integer by rounding down. By default, no maximum age is set. |
 | `expires` | `Date` | `undefined` | Expiration date for the cookie. By default, no expiration is set. Most clients will consider this a "non-persistent cookie" and will delete it on a condition like exiting a web browser application. <br/> **Note:** The [cookie storage model specification](https://tools.ietf.org/html/rfc6265#section-5.3) states that if both `expires` and `maxAge` is set, then `maxAge` takes precedence, but not all clients may obey this, so if both are set, they should point to the same date and time! <br/>If neither of `expires` and `maxAge` is set, the cookie will be session-only and removed when the user closes their browser. |
@@ -84,15 +84,21 @@ The example below creates a cookie called `counter`. If the cookie doesn't exist
 <script setup lang="ts">
 const counter = useCookie('counter')
 
-counter.value = counter.value || Math.round(Math.random() * 1000)
+counter.value ||= Math.round(Math.random() * 1000)
 </script>
 
 <template>
   <div>
     <h1>Counter: {{ counter || '-' }}</h1>
-    <button @click="counter = null">reset</button>
-    <button @click="counter--">-</button>
-    <button @click="counter++">+</button>
+    <button @click="counter = null">
+      reset
+    </button>
+    <button @click="counter--">
+      -
+    </button>
+    <button @click="counter++">
+      +
+    </button>
   </div>
 </template>
 ```
@@ -105,8 +111,8 @@ const user = useCookie(
   'userInfo',
   {
     default: () => ({ score: -1 }),
-    watch: false
-  }
+    watch: false,
+  },
 )
 
 if (user.value) {
@@ -128,20 +134,18 @@ const list = useCookie(
   'list',
   {
     default: () => [],
-    watch: 'shallow'
-  }
+    watch: 'shallow',
+  },
 )
 
-function add() {
+function add () {
   list.value?.push(Math.round(Math.random() * 1000))
   // list cookie won't be updated with this change
 }
 
-function save() {
-  if (list.value) {
-    // the actual `list` cookie will be updated
-    list.value = [...list.value]
-  }
+function save () {
+  // the actual `list` cookie will be updated
+  list.value &&= [...list.value]
 }
 </script>
 
@@ -149,8 +153,12 @@ function save() {
   <div>
     <h1>List</h1>
     <pre>{{ list }}</pre>
-    <button @click="add">Add</button>
-    <button @click="save">Save</button>
+    <button @click="add">
+      Add
+    </button>
+    <button @click="save">
+      Save
+    </button>
   </div>
 </template>
 ```
@@ -160,7 +168,7 @@ function save() {
 You can use `getCookie` and `setCookie` from [`h3`](https://github.com/h3js/h3) package to set cookies in server API routes.
 
 ```ts [server/api/counter.ts]
-export default defineEventHandler(event => {
+export default defineEventHandler((event) => {
   // Read counter cookie
   let counter = getCookie(event, 'counter') || 0
 

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

@@ -42,7 +42,7 @@ Returns a `Ref` containing the current Nuxt error (or `undefined` if there is no
 
 ## Example
 
-```ts
+```vue
 <script setup lang="ts">
 const error = useError()
 

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

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-This composable provides a convenient wrapper around [`useAsyncData`](/docs/api/composables/use-async-data) and [`$fetch`](/docs/api/utils/dollarfetch).
+This composable provides a convenient wrapper around [`useAsyncData`](/docs/3.x/api/composables/use-async-data) and [`$fetch`](/docs/3.x/api/utils/dollarfetch).
 It automatically generates a key based on URL and fetch options, provides type hints for request url based on server routes, and infers API response type.
 
 ::note
@@ -20,13 +20,13 @@ It automatically generates a key based on URL and fetch options, provides type h
 ```vue [pages/modules.vue]
 <script setup lang="ts">
 const { data, status, error, refresh, clear } = await useFetch('/api/modules', {
-  pick: ['title']
+  pick: ['title'],
 })
 </script>
 ```
 
 ::warning
-If you're using a custom useFetch wrapper, do not await it in the composable, as that can cause unexpected behavior. Please follow [this recipe](/docs/guide/recipes/custom-usefetch#custom-usefetch) for more information on how to make a custom async data fetcher.
+If you're using a custom useFetch wrapper, do not await it in the composable, as that can cause unexpected behavior. Please follow [this recipe](/docs/3.x/guide/recipes/custom-usefetch#custom-usefetch) for more information on how to make a custom async data fetcher.
 ::
 
 ::note
@@ -38,7 +38,7 @@ Using the `query` option, you can add search parameters to your query. This opti
 ```ts
 const param1 = ref('value1')
 const { data, status, error, refresh } = await useFetch('/api/modules', {
-  query: { param1, param2: 'value2' }
+  query: { param1, param2: 'value2' },
 })
 ```
 
@@ -48,21 +48,21 @@ You can also use [interceptors](https://github.com/unjs/ofetch#%EF%B8%8F-interce
 
 ```ts
 const { data, status, error, refresh, clear } = await useFetch('/api/auth/login', {
-  onRequest({ request, options }) {
+  onRequest ({ request, options }) {
     // Set the request headers
     // note that this relies on ofetch >= 1.4.0 - you may need to refresh your lockfile
     options.headers.set('Authorization', '...')
   },
-  onRequestError({ request, options, error }) {
+  onRequestError ({ request, options, error }) {
     // Handle the request errors
   },
-  onResponse({ request, response, options }) {
+  onResponse ({ request, response, options }) {
     // Process the response data
     localStorage.setItem('token', response._data.token)
   },
-  onResponseError({ request, response, options }) {
+  onResponseError ({ request, response, options }) {
     // Handle the response errors
-  }
+  },
 })
 ```
 
@@ -83,7 +83,7 @@ const { data: post } = await useFetch(() => `/api/posts/${id.value}`)
 When using `useFetch` with the same URL and options in multiple components, they will share the same `data`, `error` and `status` refs. This ensures consistency across components.
 
 ::tip
-Keyed state created using `useFetch` can be retrieved across your Nuxt application using [`useNuxtData`](/docs/api/composables/use-nuxt-data).
+Keyed state created using `useFetch` can be retrieved across your Nuxt application using [`useNuxtData`](/docs/3.x/api/composables/use-nuxt-data).
 ::
 
 ::warning
@@ -98,33 +98,60 @@ If you encounter the `data` variable destructured from a `useFetch` returns a st
 
 :read-more{to="/docs/getting-started/data-fetching"}
 
+### 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.
+
+```ts
+const searchQuery = ref('initial')
+const { data } = await useFetch('/api/search', {
+  query: { q: searchQuery },
+})
+// triggers a refetch: /api/search?q=new%20search
+searchQuery.value = 'new search'
+```
+
+If needed, you can opt out of this behavior using `watch: false`:
+
+```ts
+const searchQuery = ref('initial')
+const { data } = await useFetch('/api/search', {
+  query: { q: searchQuery },
+  watch: false,
+})
+// does not trigger a refetch
+searchQuery.value = 'new search'
+```
+
 ## Type
 
 ```ts [Signature]
-function useFetch<DataT, ErrorT>(
+export function useFetch<DataT, ErrorT> (
   url: string | Request | Ref<string | Request> | (() => string | Request),
   options?: UseFetchOptions<DataT>
 ): Promise<AsyncData<DataT, ErrorT>>
 
 type UseFetchOptions<DataT> = {
   key?: MaybeRefOrGetter<string>
-  method?: string
-  query?: SearchParams
-  params?: SearchParams
-  body?: RequestInit['body'] | Record<string, any>
-  headers?: Record<string, string> | [key: string, value: string][] | Headers
-  baseURL?: string
+  method?: MaybeRefOrGetter<string>
+  query?: MaybeRefOrGetter<SearchParams>
+  params?: MaybeRefOrGetter<SearchParams>
+  body?: MaybeRefOrGetter<RequestInit['body'] | Record<string, any>>
+  headers?: MaybeRefOrGetter<Record<string, string> | [key: string, value: string][] | Headers>
+  baseURL?: MaybeRefOrGetter<string>
   server?: boolean
   lazy?: boolean
   immediate?: boolean
   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[]
   $fetch?: typeof globalThis.$fetch
   watch?: MultiWatchSources | false
+  timeout?: MaybeRefOrGetter<number>
 }
 
 type AsyncDataRequestContext = {
@@ -143,6 +170,8 @@ type AsyncData<DataT, ErrorT> = {
 
 interface AsyncDataExecuteOptions {
   dedupe?: 'cancel' | 'defer'
+  timeout?: number
+  signal?: AbortSignal
 }
 
 type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
@@ -152,30 +181,31 @@ type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 
 - `URL` (`string | Request | Ref<string | Request> | () => string | Request`): The URL or request to fetch. Can be a string, a Request object, a Vue ref, or a function returning a string/Request. Supports reactivity for dynamic endpoints.
 
-- `options` (object): Configuration for the fetch request. Extends [unjs/ofetch](https://github.com/unjs/ofetch) options and [`AsyncDataOptions`](/docs/api/composables/use-async-data#params). All options can be a static value, a `ref`, or a computed value.
+- `options` (object): Configuration for the fetch request. Extends [unjs/ofetch](https://github.com/unjs/ofetch) options and [`AsyncDataOptions`](/docs/3.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` | `string` | `'GET'` | HTTP request method. |
-| `query` | `object` | - | Query/search params to append to the URL. Alias: `params`. Supports refs/computed. |
-| `params` | `object` | - | Alias for `query`. |
-| `body` | `RequestInit['body'] \| Record<string, any>` | - | Request body. Objects are automatically stringified. Supports refs/computed. |
-| `headers` | `Record<string, string> \| [key, value][] \| Headers` | - | Request headers. |
-| `baseURL` | `string` | - | Base URL for the request. |
-| `timeout` | `number` | - | Timeout in milliseconds to abort the request. |
+| `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` | `true` | Return data in a deep ref object. Set to `false` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive. |
 | `dedupe` | `'cancel' \| 'defer'` | `'cancel'` | Avoid fetching same key more than once at a time. |
-| `$fetch` | `typeof globalThis.$fetch` | - | Custom $fetch implementation. |
+| `$fetch` | `typeof globalThis.$fetch` | - | Custom $fetch implementation. See [Custom useFetch in Nuxt](/docs/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.
@@ -184,9 +214,9 @@ All fetch options can be given a `computed` or `ref` value. These will be watche
 **getCachedData default:**
 
 ```ts
-const getDefaultCachedData = (key, nuxtApp, ctx) => nuxtApp.isHydrating 
- ? nuxtApp.payload.data[key] 
- : nuxtApp.static.data[key]
+const getDefaultCachedData = (key, nuxtApp, ctx) => nuxtApp.isHydrating
+  ? nuxtApp.payload.data[key]
+  : nuxtApp.static.data[key]
 ```
 This only caches data when `experimental.payloadExtraction` in `nuxt.config` is enabled.
 

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

@@ -8,20 +8,20 @@ links:
     size: xs
 ---
 
-The `useHeadSafe` composable is a wrapper around the [`useHead`](/docs/api/composables/use-head) composable that restricts the input to only allow safe values.
+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/api/composables/use-head)
+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")' }
+    { id: 'xss-script', innerHTML: 'alert("xss")' },
   ],
   meta: [
-    { 'http-equiv': 'refresh', content: '0;javascript:alert(1)' }
-  ]
+    { 'http-equiv': 'refresh', 'content': '0;javascript:alert(1)' },
+  ],
 })
 // Will safely generate
 // <script id="xss-script"></script>
@@ -34,8 +34,8 @@ Read more on the `Unhead` documentation.
 
 ## Type
 
-```ts
-useHeadSafe(input: MaybeComputedRef<HeadSafe>): void
+```ts [Signature]
+export function useHeadSafe (input: MaybeComputedRef<HeadSafe>): void
 ```
 
 The list of allowed values is:

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

@@ -8,17 +8,17 @@ links:
     size: xs
 ---
 
-The [`useHead`](/docs/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/api/composables/use-head-safe).
+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).
 
 :read-more{to="/docs/getting-started/seo-meta"}
 
 ## Type
 
-```ts
-useHead(meta: MaybeComputedRef<MetaObject>): void
+```ts [Signature]
+export function useHead (meta: MaybeComputedRef<MetaObject>): void
 ```
 
-Below are the non-reactive types for [`useHead`](/docs/api/composables/use-head) .
+Below are the non-reactive types for [`useHead`](/docs/3.x/api/composables/use-head) .
 
 ```ts
 interface MetaObject {

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

@@ -13,7 +13,7 @@ This is an advanced composable, primarily designed for use within plugins, mostl
 ::
 
 ::note
-`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/api/composables/use-state) is the recommended choice.
+`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.
@@ -47,9 +47,9 @@ export default defineNuxtPlugin((nuxtApp) => {
   const myStore = new MyStore()
 
   useHydration(
-    'myStoreState', 
-    () => myStore.getState(), 
-    (data) => myStore.setState(data)
+    'myStoreState',
+    () => myStore.getState(),
+    data => myStore.setState(data),
   )
 })
 ```
@@ -57,8 +57,8 @@ export default defineNuxtPlugin((nuxtApp) => {
 
 ## Type
 
-```ts [signature]
-useHydration <T> (key: string, get: () => T, set: (value: T) => void) => void
+```ts [Signature]
+export function useHydration<T> (key: string, get: () => T, set: (value: T) => void): void
 ```
 
 ## Parameters

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

@@ -10,10 +10,10 @@ links:
 
 ## Description
 
-By default, [`useAsyncData`](/docs/api/composables/use-async-data) blocks navigation until its async handler is resolved. `useLazyAsyncData` provides a wrapper around [`useAsyncData`](/docs/api/composables/use-async-data) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
+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`.
 
 ::note
-`useLazyAsyncData` has the same signature as [`useAsyncData`](/docs/api/composables/use-async-data).
+`useLazyAsyncData` has the same signature as [`useAsyncData`](/docs/3.x/api/composables/use-async-data).
 ::
 
 :read-more{to="/docs/api/composables/use-async-data"}

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

@@ -10,10 +10,10 @@ links:
 
 ## Description
 
-By default, [`useFetch`](/docs/api/composables/use-fetch) blocks navigation until its async handler is resolved. `useLazyFetch` provides a wrapper around [`useFetch`](/docs/api/composables/use-fetch) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
+By default, [`useFetch`](/docs/3.x/api/composables/use-fetch) blocks navigation until its async handler is resolved. `useLazyFetch` provides a wrapper around [`useFetch`](/docs/3.x/api/composables/use-fetch) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
 
 ::note
-`useLazyFetch` has the same signature as [`useFetch`](/docs/api/composables/use-fetch).
+`useLazyFetch` has the same signature as [`useFetch`](/docs/3.x/api/composables/use-fetch).
 ::
 
 ::note

package/3.api/2.composables/use-loading-indicator.md

@@ -10,8 +10,8 @@ links:
 
 ## Description
 
-A composable which returns the loading state of the page. Used by [`<NuxtLoadingIndicator>`](/docs/api/components/nuxt-loading-indicator) and controllable.
-It hooks into [`page:loading:start`](/docs/api/advanced/hooks#app-hooks-runtime) and [`page:loading:end`](/docs/api/advanced/hooks#app-hooks-runtime) to change its state.
+A composable which returns the loading state of the page. Used by [`<NuxtLoadingIndicator>`](/docs/3.x/api/components/nuxt-loading-indicator) and controllable.
+It hooks into [`page:loading:start`](/docs/3.x/api/advanced/hooks#app-hooks-runtime) and [`page:loading:end`](/docs/3.x/api/advanced/hooks#app-hooks-runtime) to change its state.
 
 ## Parameters
 
@@ -58,20 +58,20 @@ Used by `finish()`. Clear all timers and intervals used by the composable.
 
 ```vue
 <script setup lang="ts">
-  const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
-    duration: 2000,
-    throttle: 200,
-    // This is how progress is calculated by default
-    estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50)
-  })
+const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
+  duration: 2000,
+  throttle: 200,
+  // This is how progress is calculated by default
+  estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50),
+})
 </script>
 ```
 
 ```vue
 <script setup lang="ts">
-  const { start, set } = useLoadingIndicator()
-  // same as set(0, { force: true })
-  // set the progress to 0, and show loading immediately
-  start({ force: true })
+const { start, set } = useLoadingIndicator()
+// same as set(0, { force: true })
+// set the progress to 0, and show loading immediately
+start({ force: true })
 </script>
 ```