@nuxt/docs-nightly 4.5.1-29752449.30d24817 → 4.5.2-2610052030-052d82e

package/4.api/2.composables/use-request-event.md

@@ -8,16 +8,42 @@ links:
     size: xs
 ---
 
-Within the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-context) you can use `useRequestEvent` to access the incoming request.
+Within the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context) you can use `useRequestEvent` to access the incoming request.
 
 ```ts
 // Get underlying request event
 const event = useRequestEvent()
 
-// Get the URL
-const url = event?.path
+// Get the path of the incoming request
+const path = event?.path
+
+// Read a request header
+const userAgent = event?.headers.get('user-agent')
 ```
 
 ::tip
 In the browser, `useRequestEvent` will return `undefined`.
 ::
+
+## Type
+
+```ts
+function useRequestEvent (nuxtApp?: NuxtApp): NuxtRequestEvent | undefined
+```
+
+`NuxtRequestEvent` is the event in the shape your configured [server builder](/docs/guide/going-further/builders) provides. With the default `@nuxt/nitro-server`, that is h3 v1's `H3Event`, which is why the example above reads `event.path` rather than `event.url`.
+
+When no server builder contributes an event type, the event resolves to `RequestEvent`, the web-standard part every server runtime provides:
+
+| Property  | Type                                                          | Description                                                                 |
+| --------- | ------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `req`     | `Request`                                                     | The incoming request, including its `headers`, `method` and body.           |
+| `url`     | `URL`                                                         | The parsed request URL.                                                     |
+| `res`     | `{ status?, statusText?, headers }`                           | The response status and headers to be sent.                                 |
+| `context` | `RequestEventContext`                                         | Per-request state, including Nuxt's own state under `context.nuxt`.         |
+
+Code that should work whichever server builder is configured (a module's server handler, for example) should only read these properties.
+
+::read-more{to="/docs/guide/going-further/server-imports"}
+Read more about writing portable server code with `nuxt/server`.
+::

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

@@ -20,7 +20,7 @@ Headers that are **not meant to be forwarded** will **not be included** in the r
 ::
 
 ::tip
-The [`useFetch`](/docs/4.x/api/composables/use-fetch) composable uses `useRequestFetch` under the hood to automatically forward the request context and headers.
+The [`useFetch`](/docs/api/composables/use-fetch) composable uses `useRequestFetch` under the hood to automatically forward the request context and headers.
 ::
 
 ::code-group
@@ -49,5 +49,5 @@ export default defineEventHandler((event) => {
 ::
 
 ::tip
-In the browser during client-side navigation, `useRequestFetch` will behave just like regular [`$fetch`](/docs/4.x/api/utils/dollarfetch).
+In the browser during client-side navigation, `useRequestFetch` will behave just like regular [`$fetch`](/docs/api/utils/dollarfetch).
 ::

package/4.api/2.composables/use-request-header.md

@@ -9,7 +9,7 @@ links:
     size: xs
 ---
 
-You can use the built-in [`useRequestHeader`](/docs/4.x/api/composables/use-request-header) composable to access any incoming request header within your pages, components, and plugins.
+You can use the built-in [`useRequestHeader`](/docs/api/composables/use-request-header) composable to access any incoming request header within your pages, components, and plugins.
 
 ```ts
 // Get the authorization request header

package/4.api/2.composables/use-request-headers.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-You can use built-in [`useRequestHeaders`](/docs/4.x/api/composables/use-request-headers) composable to access the incoming request headers within your pages, components, and plugins.
+You can use built-in [`useRequestHeaders`](/docs/api/composables/use-request-headers) composable to access the incoming request headers within your pages, components, and plugins.
 
 ```ts
 // Get all request headers

package/4.api/2.composables/use-request-url.md

@@ -12,7 +12,7 @@ links:
 `useRequestURL` is a helper function that returns an [URL object](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL) working on both server-side and client-side.
 
 ::important
-When utilizing [Hybrid Rendering](/docs/4.x/guide/concepts/rendering#hybrid-rendering) with cache strategies, all incoming request headers are dropped when handling the cached responses via the [Nitro caching layer](https://nitro.build/guide/cache) (meaning `useRequestURL` will return `localhost` for the `host`).
+When utilizing [Hybrid Rendering](/docs/guide/concepts/rendering#hybrid-rendering) with cache strategies, all incoming request headers are dropped when handling the cached responses via the [Nitro caching layer](https://nitro.build/guide/cache) (meaning `useRequestURL` will return `localhost` for the `host`).
 
 You can define the [`cache.varies` option](https://nitro.build/guide/cache#options) to specify headers that will be considered when caching and serving the responses, such as `host` and `x-forwarded-host` for multi-tenant environments.
 ::

package/4.api/2.composables/use-response-header.md

@@ -13,7 +13,7 @@ links:
 This composable is available in Nuxt v3.14+.
 ::
 
-You can use the built-in [`useResponseHeader`](/docs/4.x/api/composables/use-response-header) composable to set any server response header within your pages, components, and plugins.
+You can use the built-in [`useResponseHeader`](/docs/api/composables/use-response-header) composable to set any server response header within your pages, components, and plugins.
 
 ```ts
 // Set a custom response header
@@ -38,7 +38,7 @@ header.value = 'my-value'
 </template>
 ```
 
-We can use `useResponseHeader` for example in Nuxt [middleware](/docs/4.x/directory-structure/app/middleware) to set a response header for all pages.
+We can use `useResponseHeader` for example in Nuxt [middleware](/docs/directory-structure/app/middleware) to set a response header for all pages.
 
 ```ts [app/middleware/my-header-middleware.ts]
 export default defineNuxtRouteMiddleware((to, from) => {

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

@@ -15,9 +15,11 @@ 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.
+A composable which observes the page title changes and updates the announcer message accordingly. Used by [`<NuxtRouteAnnouncer>`](/docs/api/components/nuxt-route-announcer) and controllable.
 It hooks into Unhead's `dom:rendered` hook to read the page's title and set it as the announcer message.
 
+:read-more{title="Nuxt accessibility" to="/docs/guide/best-practices/accessibility#route-announcements"}
+
 ## Parameters
 
 - `politeness`: Sets the urgency for screen reader announcements: `off` (disable the announcement), `polite` (waits for silence), or `assertive` (interrupts immediately).  (default `polite`).
@@ -59,5 +61,5 @@ const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
 ```
 
 ::callout
-For announcing dynamic in-page content changes (form validation, toasts, loading states), use [`useAnnouncer`](/docs/4.x/api/composables/use-announcer) instead.
+For announcing dynamic in-page content changes (form validation, toasts, loading states), use [`useAnnouncer`](/docs/api/composables/use-announcer) instead.
 ::

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

@@ -20,7 +20,7 @@ that rely on the route metadata, for example.
 
 ## Example
 
-In the following example, we call an API via [`useFetch`](/docs/4.x/api/composables/use-fetch) using a dynamic page parameter - `slug` - as part of the URL.
+In the following example, we call an API via [`useFetch`](/docs/api/composables/use-fetch) using a dynamic page parameter - `slug` - as part of the URL.
 
 ```html [~/pages/[slug\\].vue]
 <script setup lang="ts">
@@ -76,7 +76,7 @@ The `useRoute()` composable should only be used in the setup function of a Vue c
 This applies to any composable that uses `useRoute()` internally too.
 ::
 
-::read-more{to="/docs/4.x/directory-structure/app/middleware"}
+::read-more{to="/docs/directory-structure/app/middleware"}
 Read more about accessing the route in the middleware section.
 ::
 

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

@@ -49,7 +49,7 @@ router.resolve({ name: 'home' })
 ```
 
 ::note
-`router.addRoute()` adds route details into an array of routes and it is useful while building [Nuxt plugins](/docs/4.x/directory-structure/app/plugins) while `router.push()` on the other hand, triggers a new navigation immediately and it is useful in pages, Vue components and composable.
+`router.addRoute()` adds route details into an array of routes and it is useful while building [Nuxt plugins](/docs/directory-structure/app/plugins) while `router.push()` on the other hand, triggers a new navigation immediately and it is useful in pages, Vue components and composable.
 ::
 
 ## Based on History API
@@ -57,8 +57,8 @@ router.resolve({ name: 'home' })
 - [`back()`](https://router.vuejs.org/api/interfaces/router#back-): Go back in history if possible, same as `router.go(-1)`.
 - [`forward()`](https://router.vuejs.org/api/interfaces/router#forward-): Go forward in history if possible, same as `router.go(1)`.
 - [`go()`](https://router.vuejs.org/api/interfaces/router#go-): Move forward or backward through the history without the hierarchical restrictions enforced in `router.back()` and `router.forward()`.
-- [`push()`](https://router.vuejs.org/api/interfaces/router#push-): Programmatically navigate to a new URL by pushing an entry in the history stack. **It is recommended to use [`navigateTo`](/docs/4.x/api/utils/navigate-to) instead.**
-- [`replace()`](https://router.vuejs.org/api/interfaces/router#replace-): Programmatically navigate to a new URL by replacing the current entry in the routes history stack. **It is recommended to use [`navigateTo`](/docs/4.x/api/utils/navigate-to) instead.**
+- [`push()`](https://router.vuejs.org/api/interfaces/router#push-): Programmatically navigate to a new URL by pushing an entry in the history stack. **It is recommended to use [`navigateTo`](/docs/api/utils/navigate-to) instead.**
+- [`replace()`](https://router.vuejs.org/api/interfaces/router#replace-): Programmatically navigate to a new URL by replacing the current entry in the routes history stack. **It is recommended to use [`navigateTo`](/docs/api/utils/navigate-to) instead.**
 
 ```ts [Example]
 const router = useRouter()
@@ -80,7 +80,7 @@ Read more about the browser's History API.
 
 However, Nuxt has a concept of **route middleware** that simplifies the implementation of navigation guards and provides a better developer experience.
 
-:read-more{to="/docs/4.x/directory-structure/app/middleware"}
+:read-more{to="/docs/directory-structure/app/middleware"}
 
 ## Promise and Error Handling
 
@@ -91,4 +91,4 @@ However, Nuxt has a concept of **route middleware** that simplifies the implemen
 
 ## Universal Router Instance
 
-If you do not have a `app/pages/` folder, then [`useRouter`](/docs/4.x/api/composables/use-router)  will return a universal router instance with similar helper methods, but be aware that not all features may be supported or behave in exactly the same way as with `vue-router`.
+If you do not have a `app/pages/` folder, then [`useRouter`](/docs/api/composables/use-router)  will return a universal router instance with similar helper methods, but be aware that not all features may be supported or behave in exactly the same way as with `vue-router`.

package/4.api/2.composables/use-runtime-config.md

@@ -22,7 +22,7 @@ export default defineEventHandler((event) => {
 })
 ```
 
-:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
+:read-more{to="/docs/guide/going-further/runtime-config"}
 
 ## Define Runtime Config
 
@@ -48,7 +48,7 @@ export default defineNuxtConfig({
 Variables that need to be accessible on the server are added directly inside `runtimeConfig`. Variables that need to be accessible on both the client and the server are defined in `runtimeConfig.public`.
 ::
 
-:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
+:read-more{to="/docs/guide/going-further/runtime-config"}
 
 ## Access Runtime Config
 
@@ -76,7 +76,7 @@ In this example, since `apiBase` is defined within the `public` namespace, it is
 
 It is possible to update runtime config values using a matching environment variable name prefixed with `NUXT_`.
 
-:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
+:read-more{to="/docs/guide/going-further/runtime-config"}
 
 ### Using the `.env` File
 
@@ -95,7 +95,7 @@ Any environment variables set within `.env` file are accessed using `process.env
 In **production runtime**, you should use platform environment variables and `.env` is not used.
 ::
 
-:read-more{to="/docs/4.x/directory-structure/env"}
+:read-more{to="/docs/directory-structure/env"}
 
 ## `app` namespace
 
@@ -139,4 +139,4 @@ export default defineEventHandler((event) => {
 })
 ```
 
-:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
+:read-more{to="/docs/guide/going-further/runtime-config"}

package/4.api/2.composables/use-runtime-hook.md

@@ -24,7 +24,7 @@ function useRuntimeHook<THookName extends keyof RuntimeNuxtHooks> (
 
 ### Parameters
 
-- `name`: The name of the runtime hook to register. You can see the full list of [runtime Nuxt hooks here](/docs/4.x/api/advanced/hooks#app-hooks-runtime).
+- `name`: The name of the runtime hook to register. You can see the full list of [runtime Nuxt hooks here](/docs/api/advanced/hooks#app-hooks-runtime).
 - `fn`: The callback function to execute when the hook is triggered. The function signature varies based on the hook name.
 
 ### Return Values

package/4.api/2.composables/use-seo-meta.md

@@ -14,7 +14,7 @@ This helps you avoid common mistakes, such as using `name` instead of `property`
 This is the recommended way to add meta tags to your site as it is XSS safe and has full TypeScript support.
 ::
 
-:read-more{to="/docs/4.x/getting-started/seo-meta"}
+:read-more{to="/docs/getting-started/seo-meta"}
 
 ## Usage
 
@@ -48,7 +48,7 @@ useSeoMeta({
 
 There are over 100 parameters. See the [full list of parameters in the source code](https://github.com/harlan-zw/zhead/blob/main/packages/zhead/src/metaFlat.ts#L1035).
 
-:read-more{to="/docs/4.x/getting-started/seo-meta"}
+:read-more{to="/docs/getting-started/seo-meta"}
 
 ## Performance
 
@@ -77,4 +77,4 @@ useSeoMeta({
 </script>
 ```
 
-This previously used the [`useServerSeoMeta`](/docs/4.x/api/composables/use-server-seo-meta) composable, but it has been deprecated in favor of this approach.
+This previously used the [`useServerSeoMeta`](/docs/api/composables/use-server-seo-meta) composable, but it has been deprecated in favor of this approach.

package/4.api/2.composables/use-server-seo-meta.md

@@ -9,12 +9,12 @@ links:
 ---
 
 ::warning
-`useServerSeoMeta` is deprecated. Wrap [`useSeoMeta`](/docs/4.x/api/composables/use-seo-meta) in an `if (import.meta.server)` block instead. The auto-import is removed under `future.compatibilityVersion: 5`.
+`useServerSeoMeta` is deprecated. Wrap [`useSeoMeta`](/docs/api/composables/use-seo-meta) in an `if (import.meta.server)` block instead. The auto-import is removed under `future.compatibilityVersion: 5`.
 ::
 
-`useServerSeoMeta` lets you define your site's SEO meta tags as a flat object with full TypeScript support, exactly like [`useSeoMeta`](/docs/4.x/api/composables/use-seo-meta), but it only runs server-side and is tree-shaken from the client bundle.
+`useServerSeoMeta` lets you define your site's SEO meta tags as a flat object with full TypeScript support, exactly like [`useSeoMeta`](/docs/api/composables/use-seo-meta), but it only runs server-side and is tree-shaken from the client bundle.
 
-:read-more{to="/docs/4.x/api/composables/use-seo-meta"}
+:read-more{to="/docs/api/composables/use-seo-meta"}
 
 For new code, use the server-only pattern directly:
 
@@ -28,6 +28,6 @@ if (import.meta.server) {
 </script>
 ```
 
-Parameters are exactly the same as with [`useSeoMeta`](/docs/4.x/api/composables/use-seo-meta).
+Parameters are exactly the same as with [`useSeoMeta`](/docs/api/composables/use-seo-meta).
 
-:read-more{to="/docs/4.x/getting-started/seo-meta"}
+:read-more{to="/docs/getting-started/seo-meta"}

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

@@ -15,7 +15,7 @@ links:
 const count = useState('counter', () => Math.round(Math.random() * 100))
 ```
 
-:read-more{to="/docs/4.x/getting-started/state-management"}
+:read-more{to="/docs/getting-started/state-management"}
 
 ::important
 Because the data inside `useState` will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
@@ -43,7 +43,7 @@ export function useState<T> (init?: () => T | Ref<T>): Ref<T>
 export function useState<T> (key: string, init?: () => T | Ref<T>): Ref<T>
 ```
 
-- `key`: A unique key ensuring that data fetching is properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file and line number of the instance of [`useState`](/docs/4.x/api/composables/use-state) will be generated for you.
+- `key`: A unique key ensuring that data fetching is properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file and line number of the instance of [`useState`](/docs/api/composables/use-state) will be generated for you.
 - `init`: A function that provides initial value for the state when not initiated. This function can also return a `Ref`.
 - `T`: (typescript only) Specify the type of state
 
@@ -53,6 +53,6 @@ export function useState<T> (key: string, init?: () => T | Ref<T>): Ref<T>
 
 This error occurs when you try to store a non-serializable payload with `useState`, such as class instances.
 
-If you want to store class instances with `useState` that are not supported by Nuxt, you can use [`definePayloadPlugin`](/docs/4.x/api/composables/use-nuxt-app#custom-reducerreviver) to add a custom serializer and deserializer for your classes.
+If you want to store class instances with `useState` that are not supported by Nuxt, you can use [`definePayloadPlugin`](/docs/api/composables/use-nuxt-app#custom-reducerreviver) to add a custom serializer and deserializer for your classes.
 
-:read-more{to="/docs/4.x/api/composables/use-nuxt-app#payload"}
+:read-more{to="/docs/api/composables/use-nuxt-app#payload"}

package/4.api/3.utils/$fetch.md

@@ -11,16 +11,16 @@ links:
 Nuxt uses [ofetch](https://github.com/unjs/ofetch) to expose globally the `$fetch` helper for making HTTP requests within your Vue app or API routes.
 
 ::tip{icon="i-lucide-rocket"}
-During server-side rendering, calling `$fetch` to fetch your internal [API routes](/docs/4.x/directory-structure/server) will directly call the relevant function (emulating the request), **saving an additional API call**.
+During server-side rendering, calling `$fetch` to fetch your internal [API routes](/docs/directory-structure/server) will directly call the relevant function (emulating the request), **saving an additional API call**.
 ::
 
 ::note{color="blue" icon="i-lucide-info"}
-Using `$fetch` in components without wrapping it with [`useAsyncData`](/docs/4.x/api/composables/use-async-data) causes fetching the data twice: initially on the server, then again on the client-side during hydration, because `$fetch` does not transfer state from the server to the client. Thus, the fetch will be executed on both sides because the client has to get the data again.
+Using `$fetch` in components without wrapping it with [`useAsyncData`](/docs/api/composables/use-async-data) causes fetching the data twice: initially on the server, then again on the client-side during hydration, because `$fetch` does not transfer state from the server to the client. Thus, the fetch will be executed on both sides because the client has to get the data again.
 ::
 
 ## Usage
 
-We recommend using [`useFetch`](/docs/4.x/api/composables/use-fetch) or [`useAsyncData`](/docs/4.x/api/composables/use-async-data) + `$fetch` to prevent double data fetching when fetching the component data.
+We recommend using [`useFetch`](/docs/api/composables/use-fetch) or [`useAsyncData`](/docs/api/composables/use-async-data) + `$fetch` to prevent double data fetching when fetching the component data.
 
 ```vue [app/app.vue]
 <script setup lang="ts">
@@ -35,7 +35,7 @@ const { data } = await useFetch('/api/item')
 </script>
 ```
 
-:read-more{to="/docs/4.x/getting-started/data-fetching"}
+:read-more{to="/docs/getting-started/data-fetching"}
 
 You can use `$fetch` in any methods that are executed only on client-side.
 
@@ -97,4 +97,4 @@ const { data } = await useAsyncData(() => requestFetch('/api/cookies'))
 </script>
 ```
 
-However, when calling `useFetch` with a relative URL on the server, Nuxt will use [`useRequestFetch`](/docs/4.x/api/composables/use-request-fetch) to proxy headers and cookies (with the exception of headers not meant to be forwarded, like `host`).
+However, when calling `useFetch` with a relative URL on the server, Nuxt will use [`useRequestFetch`](/docs/api/composables/use-request-fetch) to proxy headers and cookies (with the exception of headers not meant to be forwarded, like `host`).

package/4.api/3.utils/abort-navigation.md

@@ -9,7 +9,7 @@ links:
 ---
 
 ::warning
-`abortNavigation` is only usable inside a [route middleware handler](/docs/4.x/directory-structure/app/middleware).
+`abortNavigation` is only usable inside a [route middleware handler](/docs/directory-structure/app/middleware).
 ::
 
 ## Type

package/4.api/3.utils/add-route-middleware.md

@@ -9,7 +9,7 @@ links:
 ---
 
 ::note
-Route middleware are navigation guards stored in the [`app/middleware/`](/docs/4.x/directory-structure/app/middleware) directory of your Nuxt application (unless [set otherwise](/docs/4.x/api/nuxt-config#middleware)).
+Route middleware are navigation guards stored in the [`app/middleware/`](/docs/directory-structure/app/middleware) directory of your Nuxt application (unless [set otherwise](/docs/api/nuxt-config#middleware)).
 ::
 
 ## Type
@@ -31,7 +31,7 @@ interface AddRouteMiddlewareOptions {
 
 Can be either a string or a function of type `RouteMiddleware`. Function takes the next route `to` as the first argument and the current route `from` as the second argument, both of which are Vue route objects.
 
-Learn more about available properties of [route objects](/docs/4.x/api/composables/use-route).
+Learn more about available properties of [route objects](/docs/api/composables/use-route).
 
 ### `middleware`
 

package/4.api/3.utils/call-once.md

@@ -53,14 +53,14 @@ await callOnce(async () => {
 `navigation` mode is available since [Nuxt v3.15](/blog/v3-15).
 ::
 
-::tip{to="/docs/4.x/getting-started/state-management#usage-with-pinia"}
+::tip{to="/docs/getting-started/state-management#usage-with-pinia"}
 `callOnce` is useful in combination with the [Pinia module](/modules/pinia) to call store actions.
 ::
 
-:read-more{to="/docs/4.x/getting-started/state-management"}
+:read-more{to="/docs/getting-started/state-management"}
 
 ::warning
-Note that `callOnce` doesn't return anything. You should use [`useAsyncData`](/docs/4.x/api/composables/use-async-data) or [`useFetch`](/docs/4.x/api/composables/use-fetch) if you want to do data fetching during SSR.
+Note that `callOnce` doesn't return anything. You should use [`useAsyncData`](/docs/api/composables/use-async-data) or [`useFetch`](/docs/api/composables/use-fetch) if you want to do data fetching during SSR.
 ::
 
 ::note

package/4.api/3.utils/clear-error.md

@@ -24,6 +24,6 @@ clearError()
 clearError({ redirect: '/homepage' })
 ```
 
-Errors are set in state using [`useError()`](/docs/4.x/api/composables/use-error). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
+Errors are set in state using [`useError()`](/docs/api/composables/use-error). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
 
-:read-more{to="/docs/4.x/getting-started/error-handling"}
+:read-more{to="/docs/getting-started/error-handling"}

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

@@ -20,4 +20,4 @@ export function clearNuxtData (keys?: string | string[] | ((key: string) => bool
 
 ## Parameters
 
-* `keys`: One or an array of keys that are used in [`useAsyncData`](/docs/4.x/api/composables/use-async-data) to delete their cached data. If no keys are provided, **all data** will be invalidated.
+* `keys`: One or an array of keys that are used in [`useAsyncData`](/docs/api/composables/use-async-data) to delete their cached data. If no keys are provided, **all data** will be invalidated.

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

@@ -21,6 +21,6 @@ export function clearNuxtState (keys?: string | string[] | ((key: string) => boo
 
 ## 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.
+- `keys`: One or an array of keys that are used in [`useState`](/docs/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` :badge[v4.4]{color="info" size="xs" class="align-middle"}: 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`).
+  - `reset` :badge[v4.4]{color="info" size="xs" class="align-middle"}: When set to `true`, resets the state to the initial value provided by the `init` function of [`useState`](/docs/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/create-error.md

@@ -35,6 +35,24 @@ if (!data.value) {
 </script>
 ```
 
+### Error Causes
+
+You can pass a `cause` when creating an error to preserve the original error you are wrapping:
+
+```ts
+try {
+  await fetchMovie(route.params.slug)
+} catch (cause) {
+  throw createError({
+    status: 500,
+    message: 'Could not load movie',
+    cause,
+  })
+}
+```
+
+In development, the cause chain is exposed to your [error page](/docs/getting-started/error-handling#error-page) via the `cause` property of the error, serialized as `{ name, message, stack, cause }` (primitive causes are passed through as-is; other values are omitted). In production, causes are never included in error responses or in the error page payload.
+
 ## In API Routes
 
 Use `createError` to trigger error handling in server API routes.
@@ -52,4 +70,4 @@ export default eventHandler(() => {
 
 In API routes, using `createError` by passing an object with a short `statusText` is recommended because it can be accessed on the client side. Otherwise, a `message` passed to `createError` on an API route will not propagate to the client. Alternatively, you can use the `data` property to pass data back to the client. When handling the error with `useFetch`, the custom data is available at `error.value.data.data`. In any case, always consider avoiding to put dynamic user input to the message to avoid potential security issues.
 
-:read-more{to="/docs/4.x/getting-started/error-handling"}
+:read-more{to="/docs/getting-started/error-handling"}

package/4.api/3.utils/define-nuxt-plugin.md

@@ -16,7 +16,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
-:read-more{to="/docs/4.x/directory-structure/app/plugins#creating-plugins"}
+:read-more{to="/docs/directory-structure/app/plugins#creating-plugins"}
 
 ## Type
 
@@ -42,7 +42,7 @@ interface ObjectPlugin<T> {
 ## Parameters
 
 **plugin**: A plugin can be defined in two ways:
-1. **Function Plugin**: A function that receives the [`NuxtApp`](/docs/4.x/guide/going-further/internals#the-nuxtapp-interface) instance and can return a promise with a potential object with a [`provide`](/docs/4.x/directory-structure/app/plugins#providing-helpers) property if you want to provide a helper on [`NuxtApp`](/docs/4.x/guide/going-further/internals#the-nuxtapp-interface) instance.
+1. **Function Plugin**: A function that receives the [`NuxtApp`](/docs/guide/going-further/internals#the-nuxtapp-interface) instance and can return a promise with a potential object with a [`provide`](/docs/directory-structure/app/plugins#providing-helpers) property if you want to provide a helper on [`NuxtApp`](/docs/guide/going-further/internals#the-nuxtapp-interface) instance.
 2. **Object Plugin**: An object that can include various properties to configure the plugin's behavior, such as `name`, `enforce`, `dependsOn`, `order`, `parallel`, `setup`, `hooks`, and `env`.
 
 | Property    | Type                                   | Required | Description                                                                                                                                                         |

package/4.api/3.utils/define-nuxt-route-middleware.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-Route middleware are stored in the [`app/middleware/`](/docs/4.x/directory-structure/app/middleware) of your Nuxt application (unless [set otherwise](/docs/4.x/api/nuxt-config#middleware)).
+Route middleware are stored in the [`app/middleware/`](/docs/directory-structure/app/middleware) of your Nuxt application (unless [set otherwise](/docs/api/nuxt-config#middleware)).
 
 ## Type
 
@@ -48,7 +48,7 @@ The above route middleware will redirect a user to the custom error page defined
 
 ### Redirection
 
-Use [`useState`](/docs/4.x/api/composables/use-state) in combination with `navigateTo` helper function inside the route middleware to redirect users to different routes based on their authentication status:
+Use [`useState`](/docs/api/composables/use-state) in combination with `navigateTo` helper function inside the route middleware to redirect users to different routes based on their authentication status:
 
 ```ts [app/middleware/auth.ts]
 export default defineNuxtRouteMiddleware((to, from) => {
@@ -64,4 +64,4 @@ export default defineNuxtRouteMiddleware((to, from) => {
 })
 ```
 
-Both [navigateTo](/docs/4.x/api/utils/navigate-to) and [abortNavigation](/docs/4.x/api/utils/abort-navigation) are globally available helper functions that you can use inside `defineNuxtRouteMiddleware`.
+Both [navigateTo](/docs/api/utils/navigate-to) and [abortNavigation](/docs/api/utils/abort-navigation) are globally available helper functions that you can use inside `defineNuxtRouteMiddleware`.

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

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-`definePageMeta` is a compiler macro that you can use to set metadata for your **page** components located in the [`app/pages/`](/docs/4.x/directory-structure/app/pages) directory (unless [set otherwise](/docs/4.x/api/nuxt-config#pages)). This way you can set custom metadata for each static or dynamic route of your Nuxt application.
+`definePageMeta` is a compiler macro that you can use to set metadata for your **page** components located in the [`app/pages/`](/docs/directory-structure/app/pages) directory (unless [set otherwise](/docs/api/nuxt-config#pages)). This way you can set custom metadata for each static or dynamic route of your Nuxt application.
 
 ```vue [app/pages/some-page.vue]
 <script setup lang="ts">
@@ -18,7 +18,7 @@ definePageMeta({
 </script>
 ```
 
-:read-more{to="/docs/4.x/directory-structure/app/pages#page-metadata"}
+:read-more{to="/docs/directory-structure/app/pages#page-metadata"}
 
 ## Type
 
@@ -57,13 +57,13 @@ interface PageMeta {
 
   - **Type**: `string`
 
-    You may define a name for this page's route. By default, name is generated based on path inside the [`app/pages/` directory](/docs/4.x/directory-structure/app/pages).
+    You may define a name for this page's route. By default, name is generated based on path inside the [`app/pages/` directory](/docs/directory-structure/app/pages).
 
   **`path`**
 
   - **Type**: `string`
 
-    You may define a [custom regular expression](/docs/4.x/api/utils/define-page-meta#using-a-custom-regular-expression) if you have a more complex pattern than can be expressed with the file name.
+    You may define a [custom regular expression](/docs/api/utils/define-page-meta#using-a-custom-regular-expression) if you have a more complex pattern than can be expressed with the file name.
 
   **`props`**
   
@@ -81,7 +81,7 @@ interface PageMeta {
 
   - **Type**: `string[]`
 
-    Route groups the page belongs to, based on the folder structure. Automatically populated for pages within [route groups](/docs/4.x/guide/directory-structure/app/pages#route-groups).
+    Route groups the page belongs to, based on the folder structure. Automatically populated for pages within [route groups](/docs/guide/directory-structure/app/pages#route-groups).
 
   **`keepalive`**
 
@@ -113,7 +113,7 @@ interface PageMeta {
 
   - **Type**: `MiddlewareKey` | [`NavigationGuard`](https://router.vuejs.org/api/interfaces/navigationguard) | `Array<MiddlewareKey | NavigationGuard>`
 
-    Define anonymous or named middleware directly within `definePageMeta`. Learn more about [route middleware](/docs/4.x/directory-structure/app/middleware).
+    Define anonymous or named middleware directly within `definePageMeta`. Learn more about [route middleware](/docs/directory-structure/app/middleware).
 
   **`pageTransition`**
 
@@ -125,11 +125,11 @@ interface PageMeta {
 
   - **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>
+    **Experimental feature, only available when [enabled in your nuxt.config file](/docs/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):
+    You can also pass a `ViewTransitionPageOptions` object to configure [view transition types](/docs/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
@@ -151,13 +151,13 @@ interface PageMeta {
 
   - **Type**: `boolean | (to: RouteLocationNormalized, from: RouteLocationNormalized) => boolean`
 
-    Tell Nuxt to scroll to the top before rendering the page or not. Navigation is independent from rendering, so scroll behavior is always triggered even when the page doesn't re-render (e.g. when using a fixed [`key`](/docs/4.x/api/utils/define-page-meta#key)). Set `scrollToTop: false` to disable scrolling in such cases. If you want to overwrite the default scroll behavior of Nuxt, you can do so in `~/router.options.ts` (see [custom routing](/docs/4.x/guide/recipes/custom-routing#using-routeroptions)) for more info.
+    Tell Nuxt to scroll to the top before rendering the page or not. Navigation is independent from rendering, so scroll behavior is always triggered even when the page doesn't re-render (e.g. when using a fixed [`key`](/docs/api/utils/define-page-meta#key)). Set `scrollToTop: false` to disable scrolling in such cases. If you want to overwrite the default scroll behavior of Nuxt, you can do so in `~/router.options.ts` (see [custom routing](/docs/guide/recipes/custom-routing#using-routeroptions)) for more info.
 
   **`[key: string]`**
 
   - **Type**: `any`
 
-    Apart from the above properties, you can also set **custom** metadata. You may wish to do so in a type-safe way by [augmenting the type of the `meta` object](/docs/4.x/directory-structure/app/pages/#typing-custom-metadata).
+    Apart from the above properties, you can also set **custom** metadata. You may wish to do so in a type-safe way by [augmenting the type of the `meta` object](/docs/directory-structure/app/pages/#typing-custom-metadata).
 
 ## Example
 
@@ -234,7 +234,7 @@ For more examples see [Vue Router's Matching Syntax](https://router.vuejs.org/gu
 
 ### Defining Layout
 
-You can define the layout that matches the layout's file name located (by default) in the [`app/layouts/` directory](/docs/4.x/directory-structure/app/layouts). You can also disable the layout by setting the `layout` to `false`:
+You can define the layout that matches the layout's file name located (by default) in the [`app/layouts/` directory](/docs/directory-structure/app/layouts). You can also disable the layout by setting the `layout` to `false`:
 
 ```vue [app/pages/some-page.vue]
 <script setup lang="ts">
@@ -295,4 +295,4 @@ const props = defineProps<{
 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"}
+:read-more{to="/docs/directory-structure/app/layouts#passing-props-to-layouts"}