@nuxt/docs 4.3.0 → 4.4.2

package/4.api/1.components/8.nuxt-island.md

@@ -74,4 +74,4 @@ Some slots are reserved to `NuxtIsland` for special cases.
   - **parameters**:
     - **error**:
       - **type**: `unknown`
-  - **description**: emitted when when `NuxtIsland` fails to fetch the new island.
+  - **description**: emitted when `NuxtIsland` fails to fetch the new island.

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

@@ -0,0 +1,90 @@
+---
+title: 'createUseAsyncData'
+description: A factory function to create a custom useAsyncData composable with pre-defined default options.
+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
+---
+
+`createUseAsyncData` creates a custom [`useAsyncData`](/docs/4.x/api/composables/use-async-data) composable with pre-defined options. The resulting composable is fully typed and works exactly like `useAsyncData`, but with your defaults baked in.
+
+::note
+`createUseAsyncData` is a compiler macro. It must be used as an **exported** declaration in the `composables/` directory (or any directory scanned by the Nuxt compiler). Nuxt automatically injects de-duplication keys at build time.
+::
+
+## Usage
+
+```ts [app/composables/useCachedData.ts]
+export const useCachedData = createUseAsyncData({
+  getCachedData (key, nuxtApp) {
+    return nuxtApp.payload.data[key] ?? nuxtApp.static.data[key]
+  },
+})
+```
+
+```vue [app/pages/index.vue]
+<script setup lang="ts">
+const { data: mountains } = await useCachedData(
+  'mountains',
+  () => $fetch('https://api.nuxtjs.dev/mountains'),
+)
+</script>
+```
+
+The resulting composable has the same signature and return type as [`useAsyncData`](/docs/4.x/api/composables/use-async-data), with all options available for the caller to use or override.
+
+## Type
+
+```ts [Signature]
+function createUseAsyncData (
+  options?: Partial<AsyncDataOptions>,
+): typeof useAsyncData
+
+function createUseAsyncData (
+  options: (callerOptions: AsyncDataOptions) => Partial<AsyncDataOptions>,
+): typeof useAsyncData
+```
+
+## Options
+
+`createUseAsyncData` accepts all the same options as [`useAsyncData`](/docs/4.x/api/composables/use-async-data#params), including `server`, `lazy`, `immediate`, `default`, `transform`, `pick`, `getCachedData`, `deep`, `dedupe`, `timeout`, and `watch`.
+
+See the full list of options in the [`useAsyncData` documentation](/docs/4.x/api/composables/use-async-data#params).
+
+## Default vs Override Mode
+
+### Default Mode (plain object)
+
+When you pass a plain object, the factory options act as **defaults**. Callers can override any option:
+
+```ts [app/composables/useLazyData.ts]
+export const useLazyData = createUseAsyncData({
+  lazy: true,
+  server: false,
+})
+```
+
+```ts
+// Uses the defaults (lazy: true, server: false)
+const { data } = await useLazyData('key', () => fetchSomeData())
+
+// Caller overrides server to true
+const { data } = await useLazyData('key', () => fetchSomeData(), { server: true })
+```
+
+### Override Mode (function)
+
+When you pass a function, the factory options **override** the caller's options. The function receives the caller's options as its argument:
+
+```ts [app/composables/useStrictData.ts]
+// deep is always enforced as false
+export const useStrictData = createUseAsyncData(callerOptions => ({
+  deep: false,
+}))
+```
+
+:read-more{to="/docs/4.x/guide/recipes/custom-usefetch"}
+
+:read-more{to="/docs/4.x/api/composables/use-async-data"}

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

@@ -0,0 +1,97 @@
+---
+title: 'createUseFetch'
+description: A factory function to create a custom useFetch composable with pre-defined default options.
+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
+---
+
+`createUseFetch` creates a custom [`useFetch`](/docs/4.x/api/composables/use-fetch) composable with pre-defined options. The resulting composable is fully typed and works exactly like `useFetch`, but with your defaults baked in.
+
+::note
+`createUseFetch` is a compiler macro. It must be used as an **exported** declaration in the `composables/` directory (or any directory scanned by the Nuxt compiler). Nuxt automatically injects de-duplication keys at build time.
+::
+
+## Usage
+
+```ts [app/composables/useAPI.ts]
+export const useAPI = createUseFetch({
+  baseURL: 'https://api.nuxt.com',
+})
+```
+
+```vue [app/pages/modules.vue]
+<script setup lang="ts">
+const { data: modules } = await useAPI('/modules')
+</script>
+```
+
+The resulting `useAPI` composable has the same signature and return type as [`useFetch`](/docs/4.x/api/composables/use-fetch), with all options available for the caller to use or override.
+
+## Type
+
+```ts [Signature]
+function createUseFetch (
+  options?: Partial<UseFetchOptions>,
+): typeof useFetch
+
+function createUseFetch (
+  options: (callerOptions: UseFetchOptions) => Partial<UseFetchOptions>,
+): typeof useFetch
+```
+
+## Options
+
+`createUseFetch` accepts all the same options as [`useFetch`](/docs/4.x/api/composables/use-fetch#parameters), including `baseURL`, `headers`, `query`, `onRequest`, `onResponse`, `server`, `lazy`, `transform`, `getCachedData`, and more.
+
+See the full list of options in the [`useFetch` documentation](/docs/4.x/api/composables/use-fetch#parameters).
+
+## Default vs Override Mode
+
+### Default Mode (plain object)
+
+When you pass a plain object, the factory options act as **defaults**. Callers can override any option:
+
+```ts [app/composables/useAPI.ts]
+export const useAPI = createUseFetch({
+  baseURL: 'https://api.nuxt.com',
+  lazy: true,
+})
+```
+
+```ts
+// Uses the default baseURL
+const { data } = await useAPI('/modules')
+
+// Caller overrides the baseURL
+const { data } = await useAPI('/modules', { baseURL: 'https://other-api.com' })
+```
+
+### Override Mode (function)
+
+When you pass a function, the factory options **override** the caller's options. The function receives the caller's options as its argument, so you can read them to compute your overrides:
+
+```ts [app/composables/useAPI.ts]
+// baseURL is always enforced, regardless of what the caller passes
+export const useAPI = createUseFetch(callerOptions => ({
+  baseURL: 'https://api.nuxt.com',
+}))
+```
+
+This is useful for enforcing settings like authentication headers or a specific base URL that should not be changed by the caller.
+
+## Combining with a Custom `$fetch`
+
+You can pass a custom `$fetch` instance to `createUseFetch`:
+
+```ts [app/composables/useAPI.ts]
+export const useAPI = createUseFetch({
+  $fetch: useNuxtApp().$api as typeof $fetch,
+})
+```
+
+:read-more{to="/docs/4.x/guide/recipes/custom-usefetch"}
+
+:read-more{to="/docs/4.x/api/composables/use-fetch"}

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

@@ -0,0 +1,128 @@
+---
+title: 'useAnnouncer'
+description: A composable for announcing messages to screen readers.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/announcer.ts
+    size: xs
+---
+
+::important
+This composable is available in Nuxt v3.17+.
+::
+
+## Description
+
+A composable for announcing dynamic content changes to screen readers. Unlike [`useRouteAnnouncer`](/docs/api/composables/use-route-announcer) which automatically announces route changes, `useAnnouncer` gives you manual control over what and when to announce.
+
+Use this for in-page updates like form validation, async operations, toast notifications, and live content changes.
+
+## Parameters
+
+- `politeness`: Sets the default urgency for screen reader announcements: `off` (disable the announcement), `polite` (waits for silence), or `assertive` (interrupts immediately). (default `polite`)
+
+## Properties
+
+### `message`
+
+- **type**: `Ref<string>`
+- **description**: The current message to announce
+
+### `politeness`
+
+- **type**: `Ref<'polite' | 'assertive' | 'off'>`
+- **description**: Screen reader announcement urgency level
+
+## Methods
+
+### `set(message, politeness = "polite")`
+
+Sets the message to announce with its urgency level.
+
+### `polite(message)`
+
+Sets the message with `politeness = "polite"`. Use for non-urgent updates that can wait for the screen reader to finish its current task.
+
+### `assertive(message)`
+
+Sets the message with `politeness = "assertive"`. Use for urgent updates that should interrupt the screen reader immediately.
+
+## Example
+
+```vue [app/pages/contact.vue]
+<script setup lang="ts">
+const { polite, assertive } = useAnnouncer()
+
+async function submitForm () {
+  try {
+    await $fetch('/api/contact', { method: 'POST', body: formData })
+    polite('Message sent successfully')
+  } catch (error) {
+    assertive('Error: Failed to send message')
+  }
+}
+</script>
+```
+
+## Use Cases
+
+### Form Validation
+
+```vue [app/components/LoginForm.vue]
+<script setup lang="ts">
+const { assertive } = useAnnouncer()
+
+function validateForm () {
+  const errors = []
+  if (!email.value) { errors.push('Email is required') }
+  if (!password.value) { errors.push('Password is required') }
+
+  if (errors.length) {
+    assertive(`Form has ${errors.length} errors: ${errors.join(', ')}`)
+    return false
+  }
+  return true
+}
+</script>
+```
+
+### Loading States
+
+```vue [app/pages/dashboard.vue]
+<script setup lang="ts">
+const { polite } = useAnnouncer()
+
+const { data, status } = await useFetch('/api/data')
+
+watch(status, (newStatus) => {
+  if (newStatus === 'pending') {
+    polite('Loading data...')
+  } else if (newStatus === 'success') {
+    polite('Data loaded successfully')
+  }
+})
+</script>
+```
+
+### Search Results
+
+```vue [app/components/Search.vue]
+<script setup lang="ts">
+const { polite } = useAnnouncer()
+
+const results = ref([])
+
+watch(results, (newResults) => {
+  polite(`Found ${newResults.length} results`)
+})
+</script>
+```
+
+::callout
+You need to add the [`<NuxtAnnouncer>`](/docs/4.x/api/components/nuxt-announcer) component to your app for the announcements to be rendered in the DOM.
+::
+
+::callout
+For automatic announcements of route/page changes, use [`useRouteAnnouncer`](/docs/4.x/api/composables/use-route-announcer) with the [`<NuxtRouteAnnouncer>`](/docs/4.x/api/components/nuxt-route-announcer) component instead.
+::

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

@@ -25,8 +25,8 @@ const { data, status, pending, error, refresh, clear } = await useAsyncData(
 </script>
 ```
 
-::warning{to="/docs/4.x/guide/recipes/custom-usefetch#custom-usefetchuseasyncdata"}
-If you're using a custom `useAsyncData` wrapper, do not await it in the composable as that can cause unexpected behavior. See recipe for custom async data fetcher.
+::tip{to="/docs/4.x/guide/recipes/custom-usefetch#custom-usefetch-with-createusefetch"}
+Need a custom `useAsyncData` with pre-defined defaults? Use `createUseAsyncData` to create a fully typed custom composable. See the [custom useFetch recipe](/docs/4.x/guide/recipes/custom-usefetch) for details.
 ::
 
 ::note

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

@@ -36,6 +36,7 @@ export interface CookieOptions<T = any> extends Omit<CookieSerializeOptions & Co
   default?: () => T | Ref<T>
   watch?: boolean | 'shallow'
   readonly?: boolean
+  refresh?: boolean
 }
 
 export interface CookieRef<T> extends Ref<T> {}
@@ -60,6 +61,7 @@ Most of the options will be directly passed to the [cookie](https://github.com/j
 | `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/4.x/api/utils/refresh-cookie).                                                                                                                                                                                                                                                                                                                           |
+| `refresh`     | `boolean`              | `false`                                                        | If `true`, the cookie expiration will be refreshed on every explicit write (e.g. `cookie.value = cookie.value`), even if the value itself hasn’t changed. Note: the expiration is not refreshed automatically — you must assign to `.value` to trigger it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | `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://datatracker.ietf.org/doc/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://datatracker.ietf.org/doc/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. |
@@ -163,6 +165,28 @@ function save () {
 </template>
 ```
 
+### Refreshing Cookies
+
+```vue
+<script setup lang="ts">
+const session = useCookie(
+  'session', {
+    maxAge: 60 * 60, // 1 hour
+    refresh: true,
+    default: () => 'active',
+  })
+
+// Even if the value does not change,
+// the cookie expiration will be refreshed
+// every time the setter is called
+session.value = 'active'
+</script>
+
+<template>
+  <div>Session: {{ session }}</div>
+</template>
+```
+
 ### Cookies in API Routes
 
 You can use `getCookie` and `setCookie` from [`h3`](https://github.com/h3js/h3) package to set cookies in server API routes.

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

@@ -25,8 +25,8 @@ const { data, status, error, refresh, clear } = await useFetch('/api/modules', {
 </script>
 ```
 
-::warning{to="/docs/4.x/guide/recipes/custom-usefetch#custom-usefetchuseasyncdata"}
-If you're using a custom `useFetch` wrapper, do not await it in the composable as that can cause unexpected behavior. See recipe for custom async data fetcher.
+::tip{to="/docs/4.x/guide/recipes/custom-usefetch#custom-usefetch-with-createusefetch"}
+Need a custom `useFetch` with pre-defined defaults (like `baseURL` or auth headers)? Use `createUseFetch` to create a fully typed custom composable.
 ::
 
 ::note
@@ -87,7 +87,7 @@ Keyed state created using `useFetch` can be retrieved across your Nuxt applicati
 ::
 
 ::warning
-`useFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useFetch`.
+`useFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useFetch`. To create a custom variant with pre-defined options, use [`createUseFetch`](/docs/4.x/guide/recipes/custom-usefetch#custom-usefetch-with-createusefetch) instead.
 ::
 
 ::warning
@@ -151,7 +151,6 @@ type UseFetchOptions<DataT> = {
   pick?: string[]
   $fetch?: typeof globalThis.$fetch
   watch?: MultiWatchSources | false
-  timeout?: MaybeRefOrGetter<number>
 }
 
 type AsyncDataRequestContext = {
@@ -161,6 +160,7 @@ type AsyncDataRequestContext = {
 
 type AsyncData<DataT, ErrorT> = {
   data: Ref<DataT | undefined>
+  pending: Ref<boolean>
   refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
   execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
   clear: () => void
@@ -192,7 +192,6 @@ type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 | `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).                                                 |
@@ -229,6 +228,7 @@ This only caches data when `experimental.payloadExtraction` in `nuxt.config` is
 | `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.                                                                                                        |
+| `pending` | `Ref<boolean>`                                      | Boolean flag indicating whether the current request is in progress.                                                                                                |
 | `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/4.api/2.composables/use-lazy-fetch.md

@@ -76,6 +76,7 @@ Returns the same `AsyncData` object as [`useFetch`](/docs/4.x/api/composables/us
 | `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.                                                                                      |
+| `pending` | `Ref<boolean>`                                      | Boolean flag indicating whether the current request is in progress.                                              |
 | `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"}

package/4.api/2.composables/use-route-announcer.md

@@ -15,7 +15,7 @@ This composable is available in Nuxt v3.12+.
 ## Description
 
 A composable which observes the page title changes and updates the announcer message accordingly. Used by [`<NuxtRouteAnnouncer>`](/docs/4.x/api/components/nuxt-route-announcer) and controllable.
-It hooks into Unhead's [`dom:rendered`](https://unhead.unjs.io/docs/typescript/head/api/hooks/dom-rendered) to read the page's title and set it as the announcer message.
+It hooks into Unhead's `dom:rendered` hook to read the page's title and set it as the announcer message.
 
 ## Parameters
 
@@ -56,3 +56,7 @@ const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
 })
 </script>
 ```
+
+::callout
+For announcing dynamic in-page content changes (form validation, toasts, loading states), use [`useAnnouncer`](/docs/4.x/api/composables/use-announcer) instead.
+::

package/4.api/3.utils/clear-nuxt-state.md

@@ -9,15 +9,17 @@ links:
 ---
 
 ::note
-This method is useful if you want to invalidate the state of `useState`.
+This method is useful if you want to invalidate the state of `useState`. You can also reset the state to its initial value by passing `{ reset: true }` as the second parameter.
 ::
 
 ## Type
 
 ```ts [Signature]
-export function clearNuxtState (keys?: string | string[] | ((key: string) => boolean)): void
+export function clearNuxtState (keys?: string | string[] | ((key: string) => boolean), opts?: ClearNuxtStateOptions): void
 ```
 
 ## Parameters
 
 - `keys`: One or an array of keys that are used in [`useState`](/docs/4.x/api/composables/use-state) to delete their cached state. If no keys are provided, **all state** will be invalidated.
+- `opts`: An options object to configure the clear behavior.
+  - `reset`: When set to `true`, resets the state to the initial value provided by the `init` function of [`useState`](/docs/4.x/api/composables/use-state) instead of setting it to `undefined`. When not specified, defaults to the value of `experimental.defaults.useState.resetOnClear` in your Nuxt config (which is `true` with `compatibilityVersion: 5`).

package/4.api/3.utils/define-page-meta.md

@@ -35,10 +35,10 @@ interface PageMeta {
   groups?: string[]
   pageTransition?: boolean | TransitionProps
   layoutTransition?: boolean | TransitionProps
-  viewTransition?: boolean | 'always'
+  viewTransition?: ViewTransitionPageOptions['enabled'] | ViewTransitionPageOptions
   key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
   keepalive?: boolean | KeepAliveProps
-  layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
+  layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey> | { name?: LayoutKey | false, props?: Record<string, unknown> /* or the selected layout's props */ }
   middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
   scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
   [key: string]: unknown
@@ -97,10 +97,12 @@ interface PageMeta {
 
   **`layout`**
 
-  - **Type**: `false` | `LayoutKey` | `Ref<LayoutKey>` | `ComputedRef<LayoutKey>`
+  - **Type**: `false` | `LayoutKey` | `Ref<LayoutKey>` | `ComputedRef<LayoutKey>` | `{ name?: LayoutKey | false; props?: Record<string, unknown> /* or the selected layout's props */ }`
 
     Set a static or dynamic name of the layout for each route. This can be set to `false` in case the default layout needs to be disabled.
 
+    You can also pass an object with `name` and `props` to pass typed props to your layout component. When your layout defines props with `defineProps`, they will be fully typed in `definePageMeta`.
+
   **`layoutTransition`**
 
   - **Type**: `boolean` | [`TransitionProps`](https://vuejs.org/api/built-in-components#transition)
@@ -121,12 +123,18 @@ interface PageMeta {
 
   **`viewTransition`**
 
-  - **Type**: `boolean | 'always'`
+  - **Type**: `boolean | 'always' | ViewTransitionPageOptions`
 
     **Experimental feature, only available when [enabled in your nuxt.config file](/docs/4.x/getting-started/transitions#view-transitions-api-experimental)**</br>
     Enable/disable View Transitions for the current page.
     If set to true, Nuxt will not apply the transition if the users browser matches `prefers-reduced-motion: reduce` (recommended). If set to `always`, Nuxt will always apply the transition.
 
+    You can also pass a `ViewTransitionPageOptions` object to configure [view transition types](/docs/4.x/getting-started/transitions#view-transition-types):
+    - `enabled`: `boolean | 'always'` - enable/disable the transition
+    - `types`: `string[] | (to, from) => string[]` - types applied to any transition involving this page
+    - `toTypes`: `string[] | (to, from) => string[]` - types applied only when navigating **to** this page
+    - `fromTypes`: `string[] | (to, from) => string[]` - types applied only when navigating **from** this page
+
   **`redirect`**
 
   - **Type**: [`RouteRecordRedirectOption`](https://router.vuejs.org/guide/essentials/redirect-and-alias)
@@ -239,3 +247,52 @@ definePageMeta({
 })
 </script>
 ```
+
+### Passing Props to a Layout
+
+You can pass props to a layout by using the object syntax for `layout`. If your layout defines props with `defineProps`, the props will be fully typed.
+
+::code-group
+
+```vue [app/pages/dashboard.vue]
+<script setup lang="ts">
+definePageMeta({
+  layout: {
+    name: 'panel',
+    props: {
+      sidebar: true,
+      title: 'Dashboard',
+    },
+  },
+})
+</script>
+```
+
+```vue [app/layouts/panel.vue]
+<script setup lang="ts">
+const props = defineProps<{
+  sidebar?: boolean
+  title?: string
+}>()
+</script>
+
+<template>
+  <div>
+    <aside v-if="sidebar">
+      Sidebar
+    </aside>
+    <main>
+      <h1>{{ title }}</h1>
+      <slot />
+    </main>
+  </div>
+</template>
+```
+
+::
+
+::tip
+Layout props set via `definePageMeta` are fully typed based on the layout's `defineProps`. You'll get autocomplete and type-checking in your editor.
+::
+
+:read-more{to="/docs/4.x/directory-structure/app/layouts#passing-props-to-layouts"}

package/4.api/4.commands/add.md

@@ -4,7 +4,7 @@ description: "Scaffold an entity into your Nuxt application."
 links:
   - label: Source
     icon: i-simple-icons-github
-    to: https://github.com/nuxt/cli/blob/main/packages/nuxi/src/commands/add.ts
+    to: https://github.com/nuxt/cli/blob/main/packages/nuxi/src/commands/add-template.ts
     size: xs
 ---
 

package/4.api/4.commands/build.md

@@ -10,7 +10,7 @@ links:
 
 <!--build-cmd-->
 ```bash [Terminal]
-npx nuxt build [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--prerender] [--preset] [--dotenv] [--envName] [-e, --extends=<layer-name>]
+npx nuxt build [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--prerender] [--preset] [--dotenv] [--envName] [-e, --extends=<layer-name>] [--profile[=verbose]]
 ```
 <!--/build-cmd-->
 
@@ -32,10 +32,11 @@ The `build` command creates a `.output` directory with all your application, ser
 | `--cwd=<directory>`                  |         | Specify the working directory, this takes precedence over ROOTDIR (default: `.`)                                                                     |
 | `--logLevel=<silent\|info\|verbose>` |         | Specify build-time log level                                                                                                                         |
 | `--prerender`                        |         | Build Nuxt and prerender static routes                                                                                                               |
-| `--preset`                           |         | Nitro server preset                                                                                                                                  |
+| `--preset=<preset>`                  |         | Specify Nitro server preset. Available presets depend on Nitro (e.g. `node-server`, `vercel`, `netlify`, `static`)                                  |
 | `--dotenv`                           |         | Path to `.env` file to load, relative to the root directory                                                                                          |
 | `--envName`                          |         | The environment to use when resolving configuration overrides (default is `production` when building, and `development` when running the dev server) |
 | `-e, --extends=<layer-name>`         |         | Extend from a Nuxt layer                                                                                                                             |
+| `--profile`                          |         | Profile performance (v4.4+). Writes a V8 CPU profile and JSON report on exit. Use `--profile=verbose` for a full console report.                     |
 <!--/build-opts-->
 
 ::note

package/4.api/4.commands/dev.md

@@ -10,7 +10,7 @@ links:
 
 <!--dev-cmd-->
 ```bash [Terminal]
-npx nuxt dev [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--dotenv] [--envName] [-e, --extends=<layer-name>] [--clear] [--no-f, --no-fork] [-p, --port] [-h, --host] [--clipboard] [-o, --open] [--https] [--publicURL] [--qr] [--public] [--tunnel] [--sslCert] [--sslKey]
+npx nuxt dev [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--dotenv] [--envName] [-e, --extends=<layer-name>] [--clear] [--no-f, --no-fork] [-p, --port] [-h, --host] [--clipboard] [-o, --open] [--https] [--publicURL] [--qr] [--public] [--tunnel] [--profile[=verbose]] [--sslCert] [--sslKey]
 ```
 <!--/dev-cmd-->
 
@@ -45,6 +45,7 @@ The `dev` command starts a development server with hot module replacement at [ht
 | `--qr`                               |         | Display The QR code of public URL when available                                                                                                     |
 | `--public`                           |         | Listen to all network interfaces                                                                                                                     |
 | `--tunnel`                           |         | Open a tunnel using https://github.com/unjs/untun                                                                                                    |
+| `--profile`                          |         | Profile performance (v4.4+). Writes a V8 CPU profile and JSON report on exit. Use `--profile=verbose` for a full console report.                     |
 | `--sslCert`                          |         | (DEPRECATED) Use `--https.cert` instead.                                                                                                             |
 | `--sslKey`                           |         | (DEPRECATED) Use `--https.key` instead.                                                                                                              |
 <!--/dev-opts-->

package/4.api/4.commands/generate.md

@@ -10,7 +10,7 @@ links:
 
 <!--generate-cmd-->
 ```bash [Terminal]
-npx nuxt generate [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--preset] [--dotenv] [--envName] [-e, --extends=<layer-name>]
+npx nuxt generate [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--preset] [--dotenv] [--envName] [-e, --extends=<layer-name>] [--profile[=verbose]]
 ```
 <!--/generate-cmd-->
 
@@ -35,6 +35,7 @@ The `generate` command pre-renders every route of your application and stores th
 | `--dotenv`                           |         | Path to `.env` file to load, relative to the root directory                                                                                          |
 | `--envName`                          |         | The environment to use when resolving configuration overrides (default is `production` when building, and `development` when running the dev server) |
 | `-e, --extends=<layer-name>`         |         | Extend from a Nuxt layer                                                                                                                             |
+| `--profile`                          |         | Profile performance (v4.4+). Writes a V8 CPU profile and JSON report on exit. Use `--profile=verbose` for a full console report.                     |
 <!--/generate-opts-->
 
 ::read-more{to="/docs/4.x/getting-started/deployment#static-hosting"}