@nuxt/docs-nightly 4.1.3-29300996.5ada6861 → 4.1.3-29303775.dc69e26c

package/2.guide/3.going-further/10.runtime-config.md

@@ -5,7 +5,7 @@ description: "Nuxt provides a runtime config API to expose configuration and sec
 
 ## Exposing
 
-To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your [`nuxt.config`](/docs/guide/directory-structure/nuxt-config) file, using the [`runtimeConfig`](/docs/api/nuxt-config#runtimeconfig) option.
+To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your [`nuxt.config`](/docs/4.x/guide/directory-structure/nuxt-config) file, using the [`runtimeConfig`](/docs/4.x/api/nuxt-config#runtimeconfig) option.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -87,7 +87,7 @@ export default defineNuxtConfig({
 
 ### Vue App
 
-Within the Vue part of your Nuxt app, you will need to call [`useRuntimeConfig()`](/docs/api/composables/use-runtime-config) to access the runtime config.
+Within the Vue part of your Nuxt app, you will need to call [`useRuntimeConfig()`](/docs/4.x/api/composables/use-runtime-config) to access the runtime config.
 
 ::important
 The behavior is different between the client-side and server-side:
@@ -120,7 +120,7 @@ if (import.meta.server) {
 
 ### Plugins
 
-If you want to use the runtime config within any (custom) plugin, you can use [`useRuntimeConfig()`](/docs/api/composables/use-runtime-config) inside of your `defineNuxtPlugin` function.
+If you want to use the runtime config within any (custom) plugin, you can use [`useRuntimeConfig()`](/docs/4.x/api/composables/use-runtime-config) inside of your `defineNuxtPlugin` function.
 
 ```ts [app/plugins/config.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -147,7 +147,7 @@ export default defineEventHandler(async (event) => {
 ```
 
 ::note
-Giving the `event` as argument to `useRuntimeConfig` is optional, but it is recommended to pass it to get the runtime config overwritten by [environment variables](/docs/guide/going-further/runtime-config#environment-variables) at runtime for server routes.
+Giving the `event` as argument to `useRuntimeConfig` is optional, but it is recommended to pass it to get the runtime config overwritten by [environment variables](/docs/4.x/guide/going-further/runtime-config#environment-variables) at runtime for server routes.
 ::
 
 ## Typing Runtime Config

package/2.guide/3.going-further/2.hooks.md

@@ -9,7 +9,7 @@ The hooking system is powered by [unjs/hookable](https://github.com/unjs/hookabl
 
 ## Nuxt Hooks (Build Time)
 
-These hooks are available for [Nuxt Modules](/docs/guide/going-further/modules) and build context.
+These hooks are available for [Nuxt Modules](/docs/4.x/guide/going-further/modules) and build context.
 
 ### Within `nuxt.config.ts`
 
@@ -39,7 +39,7 @@ Explore all available Nuxt hooks.
 
 ## App Hooks (Runtime)
 
-App hooks can be mainly used by [Nuxt Plugins](/docs/guide/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
+App hooks can be mainly used by [Nuxt Plugins](/docs/4.x/guide/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
 
 ```js [app/plugins/test.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -55,7 +55,7 @@ Explore all available App hooks.
 
 ## Server Hooks (Runtime)
 
-These hooks are available for [server plugins](/docs/guide/directory-structure/server#server-plugins) to hook into Nitro's runtime behavior.
+These hooks are available for [server plugins](/docs/4.x/guide/directory-structure/server#server-plugins) to hook into Nitro's runtime behavior.
 
 ```js [~/server/plugins/test.ts]
 export default defineNitroPlugin((nitroApp) => {

package/2.guide/3.going-further/3.modules.md

@@ -4,7 +4,7 @@ description: "Learn how to create a Nuxt Module to integrate, enhance or extend
 image: '/socials/module-author-guide.jpg'
 ---
 
-Nuxt's [configuration](/docs/api/nuxt-config) and [hooks](/docs/guide/going-further/hooks) systems make it possible to customize every aspect of Nuxt and add any integration you might need (Vue plugins, CMS, server routes, components, logging, etc.).
+Nuxt's [configuration](/docs/4.x/api/nuxt-config) and [hooks](/docs/4.x/guide/going-further/hooks) systems make it possible to customize every aspect of Nuxt and add any integration you might need (Vue plugins, CMS, server routes, components, logging, etc.).
 
 **Nuxt Modules** are functions that sequentially run when starting Nuxt in development mode using `nuxt dev` or building a project for production with `nuxt build`.
 With modules, you can encapsulate, properly test, and share custom solutions as npm packages without adding unnecessary boilerplate to your project, or requiring changes to Nuxt itself.
@@ -117,7 +117,7 @@ Nuxt Modules come with a variety of powerful APIs and patterns allowing them to
 We can consider two kinds of Nuxt Modules:
 
 - published modules are distributed on npm - you can see a list of some community modules on [the Nuxt website](/modules).
-- "local" modules, they exist within a Nuxt project itself, either [inlined in Nuxt config](/docs/api/nuxt-config#modules) or as part of [the `modules` directory](/docs/guide/directory-structure/modules).
+- "local" modules, they exist within a Nuxt project itself, either [inlined in Nuxt config](/docs/4.x/api/nuxt-config#modules) or as part of [the `modules` directory](/docs/4.x/guide/directory-structure/modules).
 
 In either case, their anatomy is similar.
 
@@ -142,7 +142,7 @@ export default function (inlineOptions, nuxt) {
 }
 ```
 
-You can get type-hint support for this function using the higher-level `defineNuxtModule` helper provided by [Nuxt Kit](/docs/guide/going-further/kit).
+You can get type-hint support for this function using the higher-level `defineNuxtModule` helper provided by [Nuxt Kit](/docs/4.x/guide/going-further/kit).
 
 ```ts
 import { defineNuxtModule } from '@nuxt/kit'
@@ -224,9 +224,9 @@ Modules, like everything in a Nuxt configuration, aren't included in your applic
 Inside the runtime directory, you can provide any kind of assets related to the Nuxt App:
 - Vue components
 - Composables
-- [Nuxt plugins](/docs/guide/directory-structure/plugins)
+- [Nuxt plugins](/docs/4.x/guide/directory-structure/plugins)
 
-To the [server engine](/docs/guide/concepts/server-engine), Nitro:
+To the [server engine](/docs/4.x/guide/concepts/server-engine), Nitro:
 - API routes
 - Middlewares
 - Nitro plugins
@@ -237,10 +237,10 @@ Or any other kind of asset you want to inject in users' Nuxt applications:
 - Images
 - etc.
 
-You'll then be able to inject all those assets inside the application from your [module definition](#module-definition).
+You'll then be able to inject all those assets inside the application from your [module definition](/docs/guide/going-further/modules#module-definition).
 
 ::tip
-Learn more about asset injection in [the recipes section](#recipes).
+Learn more about asset injection in [the recipes section](/docs/guide/going-further/modules#recipes).
 ::
 
 ::warning
@@ -259,13 +259,13 @@ Modules come with a set of first-party tools to help you with their development.
 
 #### `@nuxt/kit`
 
-[Nuxt Kit](/docs/guide/going-further/kit) provides composable utilities to help your module interact with Nuxt applications. It's recommended to use Nuxt Kit utilities over manual alternatives whenever possible to ensure better compatibility and code readability of your module.
+[Nuxt Kit](/docs/4.x/guide/going-further/kit) provides composable utilities to help your module interact with Nuxt applications. It's recommended to use Nuxt Kit utilities over manual alternatives whenever possible to ensure better compatibility and code readability of your module.
 
 :read-more{to="/docs/guide/going-further/kit"}
 
 #### `@nuxt/test-utils`
 
-[Nuxt Test Utils](/docs/getting-started/testing) is a collection of utilities to help set up and run Nuxt applications within your module tests.
+[Nuxt Test Utils](/docs/4.x/getting-started/testing) is a collection of utilities to help set up and run Nuxt applications within your module tests.
 
 ### Recipes
 
@@ -295,7 +295,7 @@ Watch Vue School video about altering Nuxt configuration.
 
 #### Exposing Options to Runtime
 
-Because modules aren't part of the application runtime, their options aren't either. However, in many cases, you might need access to some of these module options within your runtime code. We recommend exposing the needed config using Nuxt's [`runtimeConfig`](/docs/api/nuxt-config#runtimeconfig).
+Because modules aren't part of the application runtime, their options aren't either. However, in many cases, you might need access to some of these module options within your runtime code. We recommend exposing the needed config using Nuxt's [`runtimeConfig`](/docs/4.x/api/nuxt-config#runtimeconfig).
 
 <!-- TODO: Update after #18466 (or equivalent) -->
 
@@ -477,7 +477,7 @@ export default defineNuxtModule({
 })
 ```
 
-And a more advanced one, exposing a folder of assets through [Nitro](/docs/guide/concepts/server-engine)'s `publicAssets` option:
+And a more advanced one, exposing a folder of assets through [Nitro](/docs/4.x/guide/concepts/server-engine)'s `publicAssets` option:
 
 ```js
 import { defineNuxtModule, createResolver } from '@nuxt/kit'
@@ -530,7 +530,7 @@ export default defineNuxtModule<ModuleOptions>({
 
 #### Using Hooks
 
-[Lifecycle hooks](/docs/guide/going-further/hooks) allow you to expand almost every aspect of Nuxt. Modules can hook to them programmatically or through the `hooks` map in their definition.
+[Lifecycle hooks](/docs/4.x/guide/going-further/hooks) allow you to expand almost every aspect of Nuxt. Modules can hook to them programmatically or through the `hooks` map in their definition.
 
 ```js
 import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
@@ -700,7 +700,7 @@ We're still discussing and exploring how to ease unit and integration testing on
 
 #### End to End
 
-[Nuxt Test Utils](/docs/getting-started/testing) is the go-to library to help you test your module in an end-to-end way. Here's the workflow to adopt with it:
+[Nuxt Test Utils](/docs/4.x/getting-started/testing) is the go-to library to help you test your module in an end-to-end way. Here's the workflow to adopt with it:
 
 1. Create a Nuxt application to be used as a "fixture" inside `test/fixtures/*`
 2. Setup Nuxt with this fixture inside your test file
@@ -754,7 +754,7 @@ An example of such a workflow is available on [the module starter](https://githu
 
 #### Manual QA With Playground and Externally
 
-Having a playground Nuxt application to test your module when developing it is really useful. [The module starter integrates one for that purpose](#how-to-develop).
+Having a playground Nuxt application to test your module when developing it is really useful. [The module starter integrates one for that purpose](/docs/guide/going-further/modules#how-to-develop).
 
 You can test your module with other Nuxt applications (applications that are not part of your module repository) locally. To do so, you can use [`npm pack`](https://docs.npmjs.com/cli/commands/npm-pack) command, or your package manager equivalent, to create a tarball from your module. Then in your test project, you can add your module to `package.json` packages as: `"my-module": "file:/path/to/tarball.tgz"`.
 
@@ -810,7 +810,7 @@ export default defineNuxtModule({
 })
 ```
 
-This pattern prevents unnecessary work on every build and provides a better developer experience. See the [lifecycle hooks documentation](/docs/api/kit/modules#using-lifecycle-hooks-for-module-installation-and-upgrade) for more details.
+This pattern prevents unnecessary work on every build and provides a better developer experience. See the [lifecycle hooks documentation](/docs/4.x/api/kit/modules#using-lifecycle-hooks-for-module-installation-and-upgrade) for more details.
 
 #### Be TypeScript Friendly
 
@@ -820,7 +820,7 @@ Exposing types and using TypeScript to develop modules benefits users even when
 
 #### Avoid CommonJS Syntax
 
-Nuxt relies on native ESM. Please read [Native ES Modules](/docs/guide/concepts/esm) for more information.
+Nuxt relies on native ESM. Please read [Native ES Modules](/docs/4.x/guide/concepts/esm) for more information.
 
 #### Document Module Usage
 

package/2.guide/3.going-further/4.kit.md

@@ -3,7 +3,7 @@ title: "Nuxt Kit"
 description: "@nuxt/kit provides features for module authors."
 ---
 
-Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/docs/api/advanced/hooks), the [Nuxt Interface](/docs/guide/going-further/internals#the-nuxt-interface) and developing [Nuxt Modules](/docs/guide/going-further/modules) super easy.
+Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/docs/4.x/api/advanced/hooks), the [Nuxt Interface](/docs/4.x/guide/going-further/internals#the-nuxt-interface) and developing [Nuxt Modules](/docs/4.x/guide/going-further/modules) super easy.
 
 ::read-more{to="/docs/api/kit"}
 Discover all Nuxt Kit utilities.
@@ -39,7 +39,7 @@ import { useNuxt } from '@nuxt/kit'
 Nuxt Kit utilities are only available for modules and not meant to be imported in runtime (components, Vue composables, pages, plugins, or server routes).
 ::
 
-Nuxt Kit is an [esm-only package](/docs/guide/concepts/esm) meaning that you **cannot** `require('@nuxt/kit')`. As a workaround, use dynamic import in the CommonJS context:
+Nuxt Kit is an [esm-only package](/docs/4.x/guide/concepts/esm) meaning that you **cannot** `require('@nuxt/kit')`. As a workaround, use dynamic import in the CommonJS context:
 
 ```js [test.cjs]
 // This does NOT work!

package/2.guide/3.going-further/6.nuxt-app.md

@@ -23,13 +23,13 @@ Jump over the `NuxtApp` interface documentation.
 
 Many composables and utilities, both built-in and user-made, may require access to the Nuxt instance. This doesn't exist everywhere on your application, because a fresh instance is created on every request.
 
-Currently, the Nuxt context is only accessible in [plugins](/docs/guide/directory-structure/plugins), [Nuxt hooks](/docs/guide/going-further/hooks), [Nuxt middleware](/docs/guide/directory-structure/app/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup.html) (in pages and components).
+Currently, the Nuxt context is only accessible in [plugins](/docs/4.x/guide/directory-structure/plugins), [Nuxt hooks](/docs/4.x/guide/going-further/hooks), [Nuxt middleware](/docs/4.x/guide/directory-structure/app/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup.html) (in pages and components).
 
-If a composable is called without access to the context, you may get an error stating that 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.' In that case, you can also explicitly call functions within this context by using [`nuxtApp.runWithContext`](/docs/api/composables/use-nuxt-app#runwithcontext).
+If a composable is called without access to the context, you may get an error stating that 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.' In that case, you can also explicitly call functions within this context by using [`nuxtApp.runWithContext`](/docs/4.x/api/composables/use-nuxt-app#runwithcontext).
 
 ## Accessing NuxtApp
 
-Within composables, plugins and components you can access `nuxtApp` with [`useNuxtApp()`](/docs/api/composables/use-nuxt-app):
+Within composables, plugins and components you can access `nuxtApp` with [`useNuxtApp()`](/docs/4.x/api/composables/use-nuxt-app):
 
 ```ts [app/composables/useMyComposable.ts]
 export function useMyComposable () {
@@ -38,7 +38,7 @@ export function useMyComposable () {
 }
 ```
 
-If your composable does not always need `nuxtApp` or you simply want to check if it is present or not, since [`useNuxtApp`](/docs/api/composables/use-nuxt-app) throws an exception, you can use [`tryUseNuxtApp`](/docs/api/composables/use-nuxt-app#tryusenuxtapp) instead.
+If your composable does not always need `nuxtApp` or you simply want to check if it is present or not, since [`useNuxtApp`](/docs/4.x/api/composables/use-nuxt-app) throws an exception, you can use [`tryUseNuxtApp`](/docs/4.x/api/composables/use-nuxt-app#tryusenuxtapp) instead.
 
 Plugins also receive `nuxtApp` as the first argument for convenience.
 

package/2.guide/3.going-further/7.layers.md

@@ -7,7 +7,7 @@ Nuxt layers are a powerful feature that you can use to share and reuse partial N
 
 :read-more{to="/docs/getting-started/layers"}
 
-A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file to indicate it is a layer.
+A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file to indicate it is a layer.
 
 ```ts [base/nuxt.config.ts]
 export default defineNuxtConfig({})
@@ -15,16 +15,16 @@ export default defineNuxtConfig({})
 
 Additionally, certain other files in the layer directory will be auto-scanned and used by Nuxt for the project extending this layer.
 
-- [`app/components/*`](/docs/guide/directory-structure/app/components)   - Extend the default components
-- [`app/composables/*`](/docs/guide/directory-structure/app/composables)  - Extend the default composables
-- [`app/layouts/*`](/docs/guide/directory-structure/app/layouts)  - Extend the default layouts
-- [`app/middleware/*`](/docs/guide/directory-structure/app/middleware)  - Extend the default middleware
-- [`app/pages/*`](/docs/guide/directory-structure/app/pages)        - Extend the default pages
-- [`app/plugins/*`](/docs/guide/directory-structure/plugins)        - Extend the default plugins
-- [`app/utils/*`](/docs/guide/directory-structure/app/utils)   - Extend the default utils
-- [`app/app.config.ts`](/docs/guide/directory-structure/app-config)  - Extend the default app config
-- [`server/*`](/docs/guide/directory-structure/server)       - Extend the default server endpoints & middleware
-- [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config)- Extend the default nuxt config
+- [`app/components/*`](/docs/4.x/guide/directory-structure/app/components)   - Extend the default components
+- [`app/composables/*`](/docs/4.x/guide/directory-structure/app/composables)  - Extend the default composables
+- [`app/layouts/*`](/docs/4.x/guide/directory-structure/app/layouts)  - Extend the default layouts
+- [`app/middleware/*`](/docs/4.x/guide/directory-structure/app/middleware)  - Extend the default middleware
+- [`app/pages/*`](/docs/4.x/guide/directory-structure/app/pages)        - Extend the default pages
+- [`app/plugins/*`](/docs/4.x/guide/directory-structure/plugins)        - Extend the default plugins
+- [`app/utils/*`](/docs/4.x/guide/directory-structure/app/utils)   - Extend the default utils
+- [`app/app.config.ts`](/docs/4.x/guide/directory-structure/app-config)  - Extend the default app config
+- [`server/*`](/docs/4.x/guide/directory-structure/server)       - Extend the default server endpoints & middleware
+- [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config)- Extend the default nuxt config
 
 ## Basic Example
 

package/2.guide/4.recipes/1.custom-routing.md

@@ -5,11 +5,11 @@ description: "In Nuxt, your routing is defined by the structure of your files in
 
 ## Adding custom routes
 
-In Nuxt, your routing is defined by the structure of your files inside the [app/pages directory](/docs/guide/directory-structure/app/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
+In Nuxt, your routing is defined by the structure of your files inside the [app/pages directory](/docs/4.x/guide/directory-structure/app/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
 
 ### Router Config
 
-Using [router options](/docs/guide/recipes/custom-routing#router-options), you can optionally override or extend your routes using a function that accepts the scanned routes and returns customized routes.
+Using [router options](/docs/4.x/guide/recipes/custom-routing#router-options), you can optionally override or extend your routes using a function that accepts the scanned routes and returns customized routes.
 
 If it returns `null` or `undefined`, Nuxt will fall back to the default routes (useful to modify input array).
 
@@ -29,7 +29,7 @@ export default {
 ```
 
 ::note
-Nuxt will not augment any new routes you return from the `routes` function with metadata defined in `definePageMeta` of the component you provide. If you want that to happen, you should use the `pages:extend` hook which is [called at build-time](/docs/api/advanced/hooks#nuxt-hooks-build-time).
+Nuxt will not augment any new routes you return from the `routes` function with metadata defined in `definePageMeta` of the component you provide. If you want that to happen, you should use the `pages:extend` hook which is [called at build-time](/docs/4.x/api/advanced/hooks#nuxt-hooks-build-time).
 ::
 
 ### Pages Hook
@@ -75,17 +75,17 @@ export default defineNuxtConfig({
 
 If you plan to add a whole set of pages related with a specific functionality, you might want to use a [Nuxt module](/modules).
 
-The [Nuxt kit](/docs/guide/going-further/kit) provides a few ways [to add routes](/docs/api/kit/pages):
-- [`extendPages`](/docs/api/kit/pages#extendpages) (callback: pages => void)
-- [`extendRouteRules`](/docs/api/kit/pages#extendrouterules) (route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)
+The [Nuxt kit](/docs/4.x/guide/going-further/kit) provides a few ways [to add routes](/docs/4.x/api/kit/pages):
+- [`extendPages`](/docs/4.x/api/kit/pages#extendpages) (callback: pages => void)
+- [`extendRouteRules`](/docs/4.x/api/kit/pages#extendrouterules) (route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)
 
 ## Router Options
 
-On top of customizing options for [`vue-router`](https://router.vuejs.org/api/interfaces/routeroptions.html), Nuxt offers [additional options](/docs/api/nuxt-config#router) to customize the router.
+On top of customizing options for [`vue-router`](https://router.vuejs.org/api/interfaces/routeroptions.html), Nuxt offers [additional options](/docs/4.x/api/nuxt-config#router) to customize the router.
 
 ### Using `router.options`
 
-This is the recommended way to specify [router options](/docs/api/nuxt-config#router).
+This is the recommended way to specify [router options](/docs/4.x/api/nuxt-config#router).
 
 ```ts [router.options.ts]
 import type { RouterConfig } from '@nuxt/schema'
@@ -119,7 +119,7 @@ export default defineNuxtConfig({
 
 ### Using `nuxt.config`
 
-**Note:** Only JSON serializable [options](/docs/api/nuxt-config#router) are configurable:
+**Note:** Only JSON serializable [options](/docs/4.x/api/nuxt-config#router) are configurable:
 
 - `linkActiveClass`
 - `linkExactActiveClass`
@@ -139,7 +139,7 @@ export default defineNuxtConfig({
 
 ### Hash Mode (SPA)
 
-You can enable hash history in SPA mode using the `hashMode` [config](/docs/api/nuxt-config#router). In this mode, router uses a hash character (#) before the actual URL that is internally passed. When enabled, the **URL is never sent to the server** and **SSR is not supported**.
+You can enable hash history in SPA mode using the `hashMode` [config](/docs/4.x/api/nuxt-config#router). In this mode, router uses a hash character (#) before the actual URL that is internally passed. When enabled, the **URL is never sent to the server** and **SSR is not supported**.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -154,7 +154,7 @@ export default defineNuxtConfig({
 
 ### Scroll Behavior for hash links
 
-You can optionally customize the scroll behavior for hash links. When you set the [config](/docs/api/nuxt-config#router) to be `smooth` and you load a page with a hash link (e.g. `https://example.com/blog/my-article#comments`), you will see that the browser smoothly scrolls to this anchor.
+You can optionally customize the scroll behavior for hash links. When you set the [config](/docs/4.x/api/nuxt-config#router) to be `smooth` and you load a page with a hash link (e.g. `https://example.com/blog/my-article#comments`), you will see that the browser smoothly scrolls to this anchor.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({

package/2.guide/4.recipes/2.vite-plugin.md

@@ -28,7 +28,7 @@ First, we need to install the Vite plugin, for our example, we'll use `@rollup/p
 
 ::
 
-Next, we need to import and add it to our [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file:
+Next, we need to import and add it to our [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file:
 
 ```ts [nuxt.config.ts]
 import yaml from '@rollup/plugin-yaml'

package/2.guide/4.recipes/3.custom-usefetch.md

@@ -6,13 +6,13 @@ description: How to create a custom fetcher for calling your external API in Nux
 
 When working with Nuxt, you might be making the frontend and fetching an external API, and you might want to set some default options for fetching from your API.
 
-The [`$fetch`](/docs/api/utils/dollarfetch) utility function (used by the [`useFetch`](/docs/api/composables/use-fetch) composable) is intentionally not globally configurable. This is important so that fetching behavior throughout your application remains consistent, and other integrations (like modules) can rely on the behavior of core utilities like `$fetch`.
+The [`$fetch`](/docs/4.x/api/utils/dollarfetch) utility function (used by the [`useFetch`](/docs/4.x/api/composables/use-fetch) composable) is intentionally not globally configurable. This is important so that fetching behavior throughout your application remains consistent, and other integrations (like modules) can rely on the behavior of core utilities like `$fetch`.
 
 However, Nuxt provides a way to create a custom fetcher for your API (or multiple fetchers if you have multiple APIs to call).
 
 ## Custom `$fetch`
 
-Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/guide/directory-structure/plugins).
+Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/4.x/guide/directory-structure/plugins).
 
 ::note
 `$fetch` is a configured instance of [ofetch](https://github.com/unjs/ofetch) which supports adding the base URL of your Nuxt server as well as direct function calls during SSR (avoiding HTTP roundtrips).
@@ -61,7 +61,7 @@ const { data: modules } = await useAsyncData('modules', () => $api('/modules'))
 ```
 
 ::callout
-Wrapping with [`useAsyncData`](/docs/api/composables/use-async-data) **avoid double data fetching when doing server-side rendering** (server & client on hydration).
+Wrapping with [`useAsyncData`](/docs/4.x/api/composables/use-async-data) **avoid double data fetching when doing server-side rendering** (server & client on hydration).
 ::
 
 ## Custom `useFetch`/`useAsyncData`

package/2.guide/4.recipes/4.sessions-and-authentication.md

@@ -164,7 +164,7 @@ export default defineNuxtRouteMiddleware(() => {
 
 Now that we have our app middleware to protect our routes, we can use it on our home page that display our authenticated user information. If the user is not authenticated, they will be redirected to the login page.
 
-We'll use [`definePageMeta`](/docs/api/utils/define-page-meta) to apply the middleware to the route that we want to protect.
+We'll use [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) to apply the middleware to the route that we want to protect.
 
 ```vue [app/pages/index.vue]
 <script setup lang="ts">

package/2.guide/5.best-practices/hydration.md

@@ -47,7 +47,7 @@ const userTheme = localStorage.getItem('theme') || 'light'
 </script>
 ```
 
-**Solution**: You can use [`useCookie`](/docs/api/composables/use-cookie):
+**Solution**: You can use [`useCookie`](/docs/4.x/api/composables/use-cookie):
 
 ```html
 <template>
@@ -144,7 +144,7 @@ const greeting = hour < 12 ? 'Good morning' : 'Good afternoon'
 </script>
 ```
 
-**Solution**: Use [`NuxtTime`](/docs/api/components/nuxt-time) component or handle it client-side:
+**Solution**: Use [`NuxtTime`](/docs/4.x/api/components/nuxt-time) component or handle it client-side:
 
 ```html
 <template>
@@ -178,8 +178,8 @@ onMounted(() => {
 
 ## In summary
 
-1. **Use SSR-friendly composables**: [`useFetch`](/docs/api/composables/use-fetch), [`useAsyncData`](/docs/api/composables/use-async-data), [`useState`](/docs/api/composables/use-state)
-2. **Wrap client-only code**: Use [`ClientOnly`](/docs/api/components/client-only) component for browser-specific content
+1. **Use SSR-friendly composables**: [`useFetch`](/docs/4.x/api/composables/use-fetch), [`useAsyncData`](/docs/4.x/api/composables/use-async-data), [`useState`](/docs/4.x/api/composables/use-state)
+2. **Wrap client-only code**: Use [`ClientOnly`](/docs/4.x/api/components/client-only) component for browser-specific content
 3. **Consistent data sources**: Ensure server and client uses the same data
 4. **Avoid side effects in setup**: Move browser-dependent code to `onMounted`
 

package/2.guide/5.best-practices/performance.md

@@ -12,7 +12,7 @@ Nuxt offers several built-in features that help you optimize performance of your
 
 ### Links
 
-[`<NuxtLink>`](/docs/api/components/nuxt-link) is a drop-in replacement for both Vue Router's `<RouterLink>` component and HTML's `<a>` tag. It intelligently determines whether the link is internal or external and renders it accordingly with available optimizations (prefetching, default attributes, etc.)
+[`<NuxtLink>`](/docs/4.x/api/components/nuxt-link) is a drop-in replacement for both Vue Router's `<RouterLink>` component and HTML's `<a>` tag. It intelligently determines whether the link is internal or external and renders it accordingly with available optimizations (prefetching, default attributes, etc.)
 
 ```html
 <template>
@@ -110,7 +110,7 @@ To optimize your app, you may want to delay the hydration of some components unt
 
 ### Fetching data
 
-To avoid fetching same data twice (once on the server and once on client) Nuxt provides [`useFetch`](/docs/api/composables/use-fetch) and [`useAsyncData`](/docs/api/composables/use-async-data). They ensure that if an API call is made on the server, the data is forwarded to the client in the payload instead of being fetched again.
+To avoid fetching same data twice (once on the server and once on client) Nuxt provides [`useFetch`](/docs/4.x/api/composables/use-fetch) and [`useAsyncData`](/docs/4.x/api/composables/use-async-data). They ensure that if an API call is made on the server, the data is forwarded to the client in the payload instead of being fetched again.
 
 :read-more{title="Data fetching" to="/docs/getting-started/data-fetching"}
 
@@ -126,7 +126,7 @@ In Nuxt we can use [Nuxt Image](https://image.nuxt.com/) module that is a plug-a
 
 :video-accordion{title="Watch the video by LearnVue about Nuxt Image" videoId="_UBff2eqGY0"}
 
-[`<NuxtImg>`](/docs/api/components/nuxt-img) is a drop-in replacement for the native `<img>` tag that comes with following enhancements:
+[`<NuxtImg>`](/docs/4.x/api/components/nuxt-img) is a drop-in replacement for the native `<img>` tag that comes with following enhancements:
 
 * Uses built-in provider to optimize local and remote images
 * Converts `src` to provider optimized URLs with modern formats such as WebP or Avif
@@ -216,7 +216,7 @@ To improve performance, we need to first know how to measure it, starting with m
 
 ### Nuxi Analyze
 
-[This](/docs/api/commands/analyze) command of `nuxi` allows to analyze the production bundle or your Nuxt application. It leverages `vite-bundle-visualizer` (similar to `webpack-bundle-analyzer`) to generate a visual representation of your application's bundle, making it easier to identify which components take up the most space.
+[This](/docs/4.x/api/commands/analyze) command of `nuxi` allows to analyze the production bundle or your Nuxt application. It leverages `vite-bundle-visualizer` (similar to `webpack-bundle-analyzer`) to generate a visual representation of your application's bundle, making it easier to identify which components take up the most space.
 
 When you see a large block in the visualization, it often signals an opportunity for optimization—whether by splitting it into smaller parts, implementing lazy loading, or replacing it with a more efficient alternative, especially for third-party libraries.
 

package/3.api/1.components/10.nuxt-picture.md

@@ -10,7 +10,7 @@ links:
 
 `<NuxtPicture>` is a drop-in replacement for the native `<picture>` tag.
 
-Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](/docs/api/components/nuxt-img) but it also allows serving modern formats like `webp` when possible.
+Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](/docs/4.x/api/components/nuxt-img) but it also allows serving modern formats like `webp` when possible.
 
 Learn more about the [`<picture>` tag on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture).
 

package/3.api/1.components/12.nuxt-route-announcer.md

@@ -16,7 +16,7 @@ This component is available in Nuxt v3.12+.
 
 ## Usage
 
-Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`app/layouts/`](/docs/guide/directory-structure/app/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
+Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/4.x/guide/directory-structure/app) or [`app/layouts/`](/docs/4.x/guide/directory-structure/app/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
 
 ```vue [app/app.vue]
 <template>
@@ -52,5 +52,5 @@ To achieve full customization, you can implement your own one based on [its sour
 ::
 
 ::callout
-You can hook into the underlying announcer instance using [the `useRouteAnnouncer` composable](/docs/api/composables/use-route-announcer), which allows you to set a custom announcement message.
+You can hook into the underlying announcer instance using [the `useRouteAnnouncer` composable](/docs/4.x/api/composables/use-route-announcer), which allows you to set a custom announcement message.
 ::

package/3.api/1.components/2.nuxt-page.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-`<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`app/pages/`](/docs/guide/directory-structure/app/pages) directory.
+`<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory.
 
 ::note
 `<NuxtPage>` is a wrapper around [`<RouterView>`](https://router.vuejs.org/api/interfaces/RouterViewProps.html#interface-routerviewprops) from Vue Router. It should be used instead of `<RouterView>` because the former takes additional care of internal states. Otherwise, `useRoute()` may return incorrect paths.
@@ -79,7 +79,7 @@ You can also use a dynamic key based on the current route:
 Don't use `$route` object here as it can cause problems with how `<NuxtPage>` renders pages with `<Suspense>`.
 ::
 
-Alternatively, `pageKey` can be passed as a `key` value via [`definePageMeta`](/docs/api/utils/define-page-meta) from the `<script>` section of your Vue component in the `/pages` directory.
+Alternatively, `pageKey` can be passed as a `key` value via [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) from the `<script>` section of your Vue component in the `/pages` directory.
 
 ```vue [app/pages/my-page.vue]
 <script setup lang="ts">

package/3.api/1.components/3.nuxt-layout.md

@@ -22,7 +22,7 @@ You can use `<NuxtLayout />` component to activate the `default` layout on `app.
 
 ## Props
 
-- `name`: Specify a layout name to be rendered, can be a string, reactive reference or a computed property. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/guide/directory-structure/app/layouts) directory.
+- `name`: Specify a layout name to be rendered, can be a string, reactive reference or a computed property. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/4.x/guide/directory-structure/app/layouts) directory.
   - **type**: `string`
   - **default**: `default`
 
@@ -55,7 +55,7 @@ Please note the layout name is normalized to kebab-case, so if your layout file
 Read more about dynamic layouts.
 ::
 
-- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/guide/directory-structure/app/layouts) directory.
+- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/4.x/guide/directory-structure/app/layouts) directory.
   - **type**: `string`
   - **default**: `null`
 

package/3.api/1.components/4.nuxt-link.md

@@ -238,7 +238,7 @@ When not using `external`, `<NuxtLink>` supports all Vue Router's [`RouterLink`
 - `href`: An alias for `to`. If used with `to`, `href` will be ignored
 - `noRel`: If set to `true`, no `rel` attribute will be added to the external link
 - `external`: Forces the link to be rendered as an `<a>` tag instead of a Vue Router `RouterLink`.
-- `prefetch`: When enabled will prefetch middleware, layouts and payloads (when using [payloadExtraction](/docs/api/nuxt-config#crossoriginprefetch)) of links in the viewport. Used by the experimental [crossOriginPrefetch](/docs/api/nuxt-config#crossoriginprefetch) config.
+- `prefetch`: When enabled will prefetch middleware, layouts and payloads (when using [payloadExtraction](/docs/4.x/api/nuxt-config#crossoriginprefetch)) of links in the viewport. Used by the experimental [crossOriginPrefetch](/docs/4.x/api/nuxt-config#crossoriginprefetch) config.
 - `prefetchOn`: Allows custom control of when to prefetch links. Possible options are `interaction` and `visibility` (default). You can also pass an object for full control, for example: `{ interaction: true, visibility: true }`. This prop is only used when `prefetch` is enabled (default) and `noPrefetch` is not set.
 - `noPrefetch`: Disables prefetching.
 - `prefetchedClass`: A class to apply to links that have been prefetched.
@@ -249,14 +249,14 @@ When not using `external`, `<NuxtLink>` supports all Vue Router's [`RouterLink`
 - `rel`: A `rel` attribute value to apply on the link. Defaults to `"noopener noreferrer"` for external links.
 
 ::tip
-Defaults can be overwritten, see [overwriting defaults](#overwriting-defaults) if you want to change them.
+Defaults can be overwritten, see [overwriting defaults](/docs/api/components/nuxt-link#overwriting-defaults) if you want to change them.
 ::
 
 ## Overwriting Defaults
 
 ### In Nuxt Config
 
-You can overwrite some `<NuxtLink>` defaults in your [`nuxt.config`](/docs/api/nuxt-config#defaults)
+You can overwrite some `<NuxtLink>` defaults in your [`nuxt.config`](/docs/4.x/api/nuxt-config#defaults)
 
 ::important
 These options will likely be moved elsewhere in the future, such as into `app.config` or into the `app/` directory.

package/3.api/1.components/5.nuxt-loading-indicator.md

@@ -10,7 +10,7 @@ links:
 
 ## Usage
 
-Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`app/layouts/`](/docs/guide/directory-structure/app/layouts).
+Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/4.x/guide/directory-structure/app) or [`app/layouts/`](/docs/4.x/guide/directory-structure/app/layouts).
 
 ```vue [app/app.vue]
 <template>
@@ -42,7 +42,7 @@ To achieve full customization, you can implement your own one based on [its sour
 ::
 
 ::note
-You can hook into the underlying indicator instance using [the `useLoadingIndicator` composable](/docs/api/composables/use-loading-indicator), which will allow you to trigger start/finish events yourself.
+You can hook into the underlying indicator instance using [the `useLoadingIndicator` composable](/docs/4.x/api/composables/use-loading-indicator), which will allow you to trigger start/finish events yourself.
 ::
 
 ::tip