@nuxt/docs-nightly 4.1.3-29300996.5ada6861 → 4.1.3-29309271.7e537539

package/2.guide/2.directory-structure/1.app/1.pages.md

@@ -6,12 +6,12 @@ navigation.icon: i-lucide-folder
 ---
 
 ::note
-To reduce your application's bundle size, this directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [`app.vue`](/docs/guide/directory-structure/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`router.options.ts`](/docs/guide/recipes/custom-routing#using-approuteroptions).
+To reduce your application's bundle size, this directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [`app.vue`](/docs/4.x/guide/directory-structure/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`router.options.ts`](/docs/4.x/guide/recipes/custom-routing#using-routeroptions).
 ::
 
 ## Usage
 
-Pages are Vue components and can have any [valid extension](/docs/api/configuration/nuxt-config#extensions) that Nuxt supports (by default `.vue`, `.js`, `.jsx`, `.mjs`, `.ts` or `.tsx`).
+Pages are Vue components and can have any [valid extension](/docs/4.x/api/configuration/nuxt-config#extensions) that Nuxt supports (by default `.vue`, `.js`, `.jsx`, `.mjs`, `.ts` or `.tsx`).
 
 Nuxt will automatically create a route for every page in your `~/pages/` directory.
 
@@ -46,7 +46,7 @@ export default defineComponent({
 
 The `app/pages/index.vue` file will be mapped to the `/` route of your application.
 
-If you are using [`app.vue`](/docs/guide/directory-structure/app), make sure to use the [`<NuxtPage/>`](/docs/api/components/nuxt-page) component to display the current page:
+If you are using [`app.vue`](/docs/4.x/guide/directory-structure/app), make sure to use the [`<NuxtPage/>`](/docs/4.x/api/components/nuxt-page) component to display the current page:
 
 ```vue [app/app.vue]
 <template>
@@ -57,7 +57,7 @@ If you are using [`app.vue`](/docs/guide/directory-structure/app), make sure to
 </template>
 ```
 
-Pages **must have a single root element** to allow [route transitions](/docs/getting-started/transitions) between pages. HTML comments are considered elements as well.
+Pages **must have a single root element** to allow [route transitions](/docs/4.x/getting-started/transitions) between pages. HTML comments are considered elements as well.
 
 This means that when the route is server-rendered, or statically generated, you will be able to see its contents correctly, but when you navigate towards that route during client-side navigation the transition between routes will fail and you'll see that the route will not be rendered.
 
@@ -118,7 +118,7 @@ Navigating to `/users-admins/123` would render:
 <p>admins - 123</p>
 ```
 
-If you want to access the route using Composition API, there is a global [`useRoute`](/docs/api/composables/use-route) function that will allow you to access the route just like `this.$route` in the Options API.
+If you want to access the route using Composition API, there is a global [`useRoute`](/docs/4.x/api/composables/use-route) function that will allow you to access the route just like `this.$route` in the Options API.
 
 ```vue twoslash
 <script setup lang="ts">
@@ -307,25 +307,25 @@ Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](http
 
 When your goal is to preserve state for parent routes use this syntax: `<NuxtPage keepalive />`. You can also set props to be passed to `<KeepAlive>` (see [a full list](https://vuejs.org/api/built-in-components.html#keepalive)).
 
-You can set a default value for this property [in your `nuxt.config`](/docs/api/nuxt-config#keepalive).
+You can set a default value for this property [in your `nuxt.config`](/docs/4.x/api/nuxt-config#keepalive).
 
 #### `key`
 
-[See above](#child-route-keys).
+[See above](/docs/guide/directory-structure/app/pages#child-route-keys).
 
 #### `layout`
 
-You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/guide/directory-structure/app/layouts).
+You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/4.x/guide/directory-structure/app/layouts).
 
 #### `layoutTransition` and `pageTransition`
 
 You can define transition properties for the `<transition>` component that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. You can see [a list of options that can be passed](https://vuejs.org/api/built-in-components.html#transition) or read [more about how transitions work](https://vuejs.org/guide/built-ins/transition.html#transition).
 
-You can set default values for these properties [in your `nuxt.config`](/docs/api/nuxt-config#layouttransition).
+You can set default values for these properties [in your `nuxt.config`](/docs/4.x/api/nuxt-config#layouttransition).
 
 #### `middleware`
 
-You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/docs/guide/directory-structure/app/middleware).
+You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/docs/4.x/guide/directory-structure/app/middleware).
 
 #### `name`
 
@@ -356,7 +356,7 @@ export {}
 
 ## Navigation
 
-To navigate between pages of your app, you should use the [`<NuxtLink>`](/docs/api/components/nuxt-link) component.
+To navigate between pages of your app, you should use the [`<NuxtLink>`](/docs/4.x/api/components/nuxt-link) component.
 
 This component is included with Nuxt and therefore you don't have to import it as you do with other components.
 
@@ -399,11 +399,11 @@ function navigate(){
 
 ## Client-Only Pages
 
-You can define a page as [client only](/docs/guide/directory-structure/app/components#client-components) by giving it a `.client.vue` suffix. None of the content of this page will be rendered on the server.
+You can define a page as [client only](/docs/4.x/guide/directory-structure/app/components#client-components) by giving it a `.client.vue` suffix. None of the content of this page will be rendered on the server.
 
 ## Server-Only Pages
 
-You can define a page as [server only](/docs/guide/directory-structure/app/components#server-components) by giving it a `.server.vue` suffix. While you will be able to navigate to the page using client-side navigation, controlled by `vue-router`, it will be rendered with a server component automatically, meaning the code required to render the page will not be in your client-side bundle.
+You can define a page as [server only](/docs/4.x/guide/directory-structure/app/components#server-components) by giving it a `.server.vue` suffix. While you will be able to navigate to the page using client-side navigation, controlled by `vue-router`, it will be rendered with a server component automatically, meaning the code required to render the page will not be in your client-side bundle.
 
 ::warning
 Server-only pages must have a single root element. (HTML comments are considered elements as well.)
@@ -419,7 +419,7 @@ As your app gets bigger and more complex, your routing might require more flexib
 
 By default, all your pages should be in one `app/pages` directory at the root of your project.
 
-However, you can use [Nuxt Layers](/docs/getting-started/layers) to create groupings of your app's pages:
+However, you can use [Nuxt Layers](/docs/4.x/getting-started/layers) to create groupings of your app's pages:
 
 ```bash [Directory Structure]
 -| some-app/

package/2.guide/2.directory-structure/1.app/1.plugins.md

@@ -30,7 +30,7 @@ Only files at the top level of the directory (or index files within any subdirec
 
 Only `foo.ts` and `bar/index.ts` would be registered.
 
-To add plugins in subdirectories, you can use the [`app/plugins`](/docs/api/nuxt-config#plugins-1) option in `nuxt.config.ts`:
+To add plugins in subdirectories, you can use the [`app/plugins`](/docs/4.x/api/nuxt-config#plugins-1) option in `nuxt.config.ts`:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -43,7 +43,7 @@ export default defineNuxtConfig({
 
 ## Creating Plugins
 
-The only argument passed to a plugin is [`nuxtApp`](/docs/api/composables/use-nuxt-app).
+The only argument passed to a plugin is [`nuxtApp`](/docs/4.x/api/composables/use-nuxt-app).
 
 ```ts twoslash [plugins/hello.ts]
 export default defineNuxtPlugin(nuxtApp => {
@@ -134,7 +134,7 @@ export default defineNuxtPlugin({
 
 ## Using Composables
 
-You can use [composables](/docs/guide/directory-structure/app/composables) as well as [utils](/docs/guide/directory-structure/app/utils) within Nuxt plugins:
+You can use [composables](/docs/4.x/guide/directory-structure/app/composables) as well as [utils](/docs/4.x/guide/directory-structure/app/utils) within Nuxt plugins:
 
 ```ts [app/plugins/hello.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -153,12 +153,12 @@ Plugins are called in order sequentially and before everything else. You might u
 ::important
 **If a composable depends on the Vue.js lifecycle, it won't work.** :br
 
-Normally, Vue.js composables are bound to the current component instance while plugins are only bound to [`nuxtApp`](/docs/api/composables/use-nuxt-app) instance.
+Normally, Vue.js composables are bound to the current component instance while plugins are only bound to [`nuxtApp`](/docs/4.x/api/composables/use-nuxt-app) instance.
 ::
 
 ## Providing Helpers
 
-If you would like to provide a helper on the [`NuxtApp`](/docs/api/composables/use-nuxt-app) instance, return it from the plugin under a `provide` key.
+If you would like to provide a helper on the [`NuxtApp`](/docs/4.x/api/composables/use-nuxt-app) instance, return it from the plugin under a `provide` key.
 
 ::code-group
 ```ts twoslash [plugins/hello.ts]
@@ -200,7 +200,7 @@ const { $hello } = useNuxtApp()
 ```
 
 ::important
-Note that we highly recommend using [`composables`](/docs/guide/directory-structure/app/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
+Note that we highly recommend using [`composables`](/docs/4.x/guide/directory-structure/app/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
 ::
 
 ::warning
@@ -213,7 +213,7 @@ This is due to how Vue works with refs that aren't top-level to the template. Yo
 If you return your helpers from the plugin, they will be typed automatically; you'll find them typed for the return of `useNuxtApp()` and within your templates.
 
 ::note
-If you need to use a provided helper _within_ another plugin, you can call [`useNuxtApp()`](/docs/api/composables/use-nuxt-app) to get the typed version. But in general, this should be avoided unless you are certain of the plugins' order.
+If you need to use a provided helper _within_ another plugin, you can call [`useNuxtApp()`](/docs/4.x/api/composables/use-nuxt-app) to get the typed version. But in general, this should be avoided unless you are certain of the plugins' order.
 ::
 
 For advanced use-cases, you can declare the type of injected properties like this:

package/2.guide/2.directory-structure/1.app/1.utils.md

@@ -5,7 +5,7 @@ description: Use the utils/ directory to auto-import your utility functions thro
 navigation.icon: i-lucide-folder
 ---
 
-The main purpose of the [`app/utils/` directory](/docs/guide/directory-structure/app/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
+The main purpose of the [`app/utils/` directory](/docs/4.x/guide/directory-structure/app/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
 
 ## Usage
 
@@ -40,10 +40,10 @@ You can now use auto imported utility functions in `.js`, `.ts` and `.vue` files
 :link-example{to="/docs/examples/features/auto-imports"}
 
 ::tip
-The way `app/utils/` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/guide/directory-structure/app/composables) directory.
+The way `app/utils/` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) directory.
 ::
 
 ::important
 These utils are only available within the Vue part of your app. :br
-Only `server/utils` are auto-imported in the [`server/`](/docs/guide/directory-structure/server#server-utilities) directory.
+Only `server/utils` are auto-imported in the [`server/`](/docs/4.x/guide/directory-structure/server#server-utilities) directory.
 ::

package/2.guide/2.directory-structure/1.app/3.app-config.md

@@ -20,7 +20,7 @@ Do not put any secret values inside `app.config` file. It is exposed to the user
 ::
 
 ::note
-When configuring a custom [`srcDir`](/docs/api/nuxt-config#srcdir), make sure to place the `app.config` file at the root of the new `srcDir` path.
+When configuring a custom [`srcDir`](/docs/4.x/api/nuxt-config#srcdir), make sure to place the `app.config` file at the root of the new `srcDir` path.
 ::
 
 ## Usage
@@ -35,7 +35,7 @@ export default defineAppConfig({
 })
 ```
 
-We can now universally access `theme` both when server-rendering the page and in the browser using [`useAppConfig`](/docs/api/composables/use-app-config) composable.
+We can now universally access `theme` both when server-rendering the page and in the browser using [`useAppConfig`](/docs/4.x/api/composables/use-app-config) composable.
 
 ```vue [app/pages/index.vue]
 <script setup lang="ts">
@@ -45,7 +45,7 @@ console.log(appConfig.theme)
 </script>
 ```
 
-The [`updateAppConfig`](/docs/api/utils/update-app-config) utility can be used to update the `app.config` at runtime.
+The [`updateAppConfig`](/docs/4.x/api/utils/update-app-config) utility can be used to update the `app.config` at runtime.
 
 ```vue [app/pages/index.vue]
 <script setup>
@@ -90,7 +90,7 @@ export {}
 
 ### App Config Output
 
-If you want to type the result of calling [`useAppConfig()`](/docs/api/composables/use-app-config), then you will want to extend `AppConfig`.
+If you want to type the result of calling [`useAppConfig()`](/docs/4.x/api/composables/use-app-config), then you will want to extend `AppConfig`.
 
 ::warning
 Be careful when typing `AppConfig` as you will overwrite the types Nuxt infers from your actually defined app config.
@@ -114,7 +114,7 @@ export {}
 
 ## Merging Strategy
 
-Nuxt uses a custom merging strategy for the `AppConfig` within [the layers](/docs/getting-started/layers) of your application.
+Nuxt uses a custom merging strategy for the `AppConfig` within [the layers](/docs/4.x/getting-started/layers) of your application.
 
 This strategy is implemented using a [Function Merger](https://github.com/unjs/defu#function-merger), which allows defining a custom merging strategy for every key in `app.config` that has an array as value.
 

package/2.guide/2.directory-structure/1.app/3.app.md

@@ -13,7 +13,7 @@ If you have a `app/pages/` directory, the `app.vue` file is optional. Nuxt will
 
 ### Minimal Usage
 
-With Nuxt, the [`app/pages/`](/docs/guide/directory-structure/app/pages) directory is optional. If it is not present, Nuxt will not include the [vue-router](https://router.vuejs.org) dependency. This is useful when building a landing page or an application that does not require routing.
+With Nuxt, the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory is optional. If it is not present, Nuxt will not include the [vue-router](https://router.vuejs.org) dependency. This is useful when building a landing page or an application that does not require routing.
 
 ```vue [app/app.vue]
 <template>
@@ -25,7 +25,7 @@ With Nuxt, the [`app/pages/`](/docs/guide/directory-structure/app/pages) directo
 
 ### Usage with Pages
 
-When you have a [`app/pages/`](/docs/guide/directory-structure/app/pages) directory, you need to use the [`<NuxtPage>`](/docs/api/components/nuxt-page) component to display the current page:
+When you have a [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory, you need to use the [`<NuxtPage>`](/docs/4.x/api/components/nuxt-page) component to display the current page:
 
 ```vue [app/app.vue]
 <template>
@@ -57,7 +57,7 @@ Learn more about how to structure your pages using the `app/pages/` directory.
 
 ### Usage with Layouts
 
-When your application requires different layouts for different pages, you can use the `app/layouts/` directory with the [`<NuxtLayout>`](/docs/api/components/nuxt-layout) component. This allows you to define multiple layouts and apply them per page.
+When your application requires different layouts for different pages, you can use the `app/layouts/` directory with the [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-layout) component. This allows you to define multiple layouts and apply them per page.
 
 ```vue [app/app.vue]
 <template>

package/2.guide/2.directory-structure/1.app/3.error.md

@@ -25,7 +25,7 @@ const props = defineProps({
 ```
 
 ::note
-Although it is called an 'error page' it's not a route and shouldn't be placed in your `~/pages` directory. For the same reason, you shouldn't use `definePageMeta` within this page. That being said, you can still use layouts in the error file, by utilizing the [`NuxtLayout`](/docs/api/components/nuxt-layout) component and specifying the name of the layout.
+Although it is called an 'error page' it's not a route and shouldn't be placed in your `~/pages` directory. For the same reason, you shouldn't use `definePageMeta` within this page. That being said, you can still use layouts in the error file, by utilizing the [`NuxtLayout`](/docs/4.x/api/components/nuxt-layout) component and specifying the name of the layout.
 ::
 
 The error page has a single prop - `error` which contains an error for you to handle.

package/2.guide/2.directory-structure/1.content.md

@@ -5,7 +5,7 @@ description: Use the content/ directory to create a file-based CMS for your appl
 navigation.icon: i-lucide-folder
 ---
 
-[Nuxt Content](https://content.nuxt.com) reads the [`content/` directory](/docs/guide/directory-structure/content) in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.
+[Nuxt Content](https://content.nuxt.com) reads the [`content/` directory](/docs/4.x/guide/directory-structure/content) in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.
 
 - Render your content with built-in components.
 - Query your content with a MongoDB-like API.
@@ -36,7 +36,7 @@ The module automatically loads and parses them.
 
 ## Render Content
 
-To render content pages, add a [catch-all route](/docs/guide/directory-structure/app/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
+To render content pages, add a [catch-all route](/docs/4.x/guide/directory-structure/app/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
 
 ```vue [app/pages/[...slug\\].vue]
 <script lang="ts" setup>

package/2.guide/2.directory-structure/1.modules.md

@@ -11,7 +11,7 @@ The auto-registered files patterns are:
 - `modules/*/index.ts`
 - `modules/*.ts`
 
-You don't need to add those local modules to your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) separately.
+You don't need to add those local modules to your [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) separately.
 
 ::code-group
 
@@ -47,7 +47,7 @@ export default defineEventHandler(() => {
 When starting Nuxt, the `hello` module will be registered and the `/api/hello` route will be available.
 
 Modules are executed in the following sequence:
-- First, the modules defined in [`nuxt.config.ts`](/docs/api/nuxt-config#modules-1) are loaded.
+- First, the modules defined in [`nuxt.config.ts`](/docs/4.x/api/nuxt-config#modules-1) are loaded.
 - Then, modules found in the `modules/` directory are executed, and they load in alphabetical order.
 
 You can change the order of local module by adding a number to the front of each directory name:

package/2.guide/2.directory-structure/1.node_modules.md

@@ -8,5 +8,5 @@ navigation.icon: i-lucide-folder
 The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm) or [`yarn`](https://yarnpkg.com) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.sh/package-manager)) creates this directory to store the dependencies of your project.
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.
+This directory should be added to your [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.
 ::

package/2.guide/2.directory-structure/1.server.md

@@ -58,7 +58,7 @@ export default defineEventHandler(() => 'Hello World!')
 Given the example above, the `/hello` route will be accessible at <http://localhost:3000/hello>.
 
 ::note
-Note that currently server routes do not support the full functionality of dynamic routes as [pages](/docs/guide/directory-structure/app/pages#dynamic-routes) do.
+Note that currently server routes do not support the full functionality of dynamic routes as [pages](/docs/4.x/guide/directory-structure/app/pages#dynamic-routes) do.
 ::
 
 ## Server Middleware
@@ -269,7 +269,7 @@ If no errors are thrown, a status code of `200 OK` will be returned.
 
 Any uncaught errors will return a `500 Internal Server Error` HTTP Error.
 
-To return other error codes, throw an exception with [`createError`](/docs/api/utils/create-error):
+To return other error codes, throw an exception with [`createError`](/docs/4.x/api/utils/create-error):
 
 ```ts [server/api/validation/[id\\].ts]
 export default defineEventHandler((event) => {
@@ -287,7 +287,7 @@ export default defineEventHandler((event) => {
 
 ### Status Codes
 
-To return other status codes, use the [`setResponseStatus`](/docs/api/utils/set-response-status) utility.
+To return other status codes, use the [`setResponseStatus`](/docs/4.x/api/utils/set-response-status) utility.
 
 For example, to return `202 Accepted`
 
@@ -326,7 +326,7 @@ NUXT_GITHUB_TOKEN='<my-super-token>'
 ::
 
 ::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.
 ::
 
 ### Request Cookies
@@ -454,7 +454,7 @@ Never combine `next()` callback with a legacy middleware that is `async` or retu
 
 ### Server Storage
 
-Nitro provides a cross-platform [storage layer](https://nitro.build/guide/storage). In order to configure additional storage mount points, you can use `nitro.storage`, or [server plugins](#server-plugins).
+Nitro provides a cross-platform [storage layer](https://nitro.build/guide/storage). In order to configure additional storage mount points, you can use `nitro.storage`, or [server plugins](/docs/guide/directory-structure/server#server-plugins).
 
 **Example of adding a Redis storage:**
 

package/2.guide/2.directory-structure/1.shared.md

@@ -35,7 +35,7 @@ export default function (input: string) {
 }
 ```
 
-You can now use [auto-imported](/docs/guide/directory-structure/shared#auto-imports) utilities in your Nuxt app and `server/` directory.
+You can now use [auto-imported](/docs/4.x/guide/directory-structure/shared) utilities in your Nuxt app and `server/` directory.
 
 ```vue [app/app.vue]
 <script setup lang="ts">
@@ -62,7 +62,7 @@ export default defineEventHandler((event) => {
 Only files in the `shared/utils/` and `shared/types/` directories will be auto-imported. Files nested within subdirectories of these directories will not be auto-imported unless you add these directories to `imports.dirs` and `nitro.imports.dirs`.
 
 ::tip
-The way `shared/utils` and `shared/types` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/guide/directory-structure/app/composables) and [`app/utils/`](/docs/guide/directory-structure/app/utils) directories.
+The way `shared/utils` and `shared/types` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/guide/directory-structure/app/utils) directories.
 ::
 
 :read-more{to="/docs/guide/directory-structure/app/composables#how-files-are-scanned"}

package/2.guide/2.directory-structure/2.env.md

@@ -6,12 +6,12 @@ navigation.icon: i-lucide-file
 ---
 
 ::important
-This file should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing secrets to your repository.
+This file should be added to your [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) file to avoid pushing secrets to your repository.
 ::
 
 ## Dev, Build and Generate Time
 
-Nuxt CLI has built-in [dotenv](https://github.com/motdotla/dotenv) support in development mode and when running [`nuxt build`](/docs/api/commands/build) and [`nuxt generate`](/docs/api/commands/generate).
+Nuxt CLI has built-in [dotenv](https://github.com/motdotla/dotenv) support in development mode and when running [`nuxt build`](/docs/4.x/api/commands/build) and [`nuxt generate`](/docs/4.x/api/commands/generate).
 
 In addition to any process environment variables, if you have a `.env` file in your project root directory, it will be automatically loaded **at dev, build and generate time**. Any environment variables set there will be accessible within your `nuxt.config` file and modules.
 
@@ -34,7 +34,7 @@ npx nuxt dev --dotenv .env.local
 When updating `.env` in development mode, the Nuxt instance is automatically restarted to apply new values to the `process.env`.
 
 ::important
-In your application code, you should use [Runtime Config](/docs/guide/going-further/runtime-config) instead of plain env variables.
+In your application code, you should use [Runtime Config](/docs/4.x/guide/going-further/runtime-config) instead of plain env variables.
 ::
 
 ## Production
@@ -61,7 +61,7 @@ Since `.env` files are not used in production, you must explicitly set environme
 
 ## Production Preview
 
-For local production preview purpose, we recommend using [`nuxt preview`](/docs/api/commands/preview) since using this command, the `.env` file will be loaded into `process.env` for convenience. Note that this command requires dependencies to be installed in the package directory.
+For local production preview purpose, we recommend using [`nuxt preview`](/docs/4.x/api/commands/preview) since using this command, the `.env` file will be loaded into `process.env` for convenience. Note that this command requires dependencies to be installed in the package directory.
 
 Or you could pass the environment variables as arguments using the terminal. For example, on Linux or macOS:
 

package/2.guide/2.directory-structure/2.nuxtignore.md

@@ -5,12 +5,12 @@ description: The .nuxtignore file lets Nuxt ignore files in your project’s roo
 navigation.icon: i-lucide-file
 ---
 
-The `.nuxtignore` file tells Nuxt to ignore files in your project’s root directory ([`rootDir`](/docs/api/nuxt-config#rootdir)) during the build phase.
+The `.nuxtignore` file tells Nuxt to ignore files in your project’s root directory ([`rootDir`](/docs/4.x/api/nuxt-config#rootdir)) during the build phase.
 
-It is subject to the same specification as [`.gitignore`](/docs/guide/directory-structure/gitignore) and `.eslintignore` files, in which each line is a glob pattern indicating which files should be ignored.
+It is subject to the same specification as [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) and `.eslintignore` files, in which each line is a glob pattern indicating which files should be ignored.
 
 ::tip
-You can also configure [`ignoreOptions`](/docs/api/nuxt-config#ignoreoptions), [`ignorePrefix`](/docs/api/nuxt-config#ignoreprefix) and [`ignore`](/docs/api/nuxt-config#ignore) in your `nuxt.config` file.
+You can also configure [`ignoreOptions`](/docs/4.x/api/nuxt-config#ignoreoptions), [`ignorePrefix`](/docs/4.x/api/nuxt-config#ignoreprefix) and [`ignore`](/docs/4.x/api/nuxt-config#ignore) in your `nuxt.config` file.
 ::
 
 ## Usage

package/2.guide/2.directory-structure/2.nuxtrc.md

@@ -8,7 +8,7 @@ navigation.icon: i-lucide-file
 The `.nuxtrc` file can be used to configure Nuxt with a flat syntax. It is based on [`unjs/rc9`](https://github.com/unjs/rc9).
 
 ::tip
-For more advanced configurations, use [`nuxt.config`](/docs/guide/directory-structure/nuxt-config).
+For more advanced configurations, use [`nuxt.config`](/docs/4.x/guide/directory-structure/nuxt-config).
 ::
 
 ## Usage
@@ -28,7 +28,7 @@ modules[]=nuxt-security
 If present, the properties in the `nuxt.config` file will overwrite the properties in `.nuxtrc` file.
 
 ::note
-Nuxt automatically adds a `setups` section to track module installation and upgrade state. This is used internally for [module lifecycle hooks](/docs/api/kit/modules#using-lifecycle-hooks-for-module-installation-and-upgrade) and should not be modified manually.
+Nuxt automatically adds a `setups` section to track module installation and upgrade state. This is used internally for [module lifecycle hooks](/docs/4.x/api/kit/modules#using-lifecycle-hooks-for-module-installation-and-upgrade) and should not be modified manually.
 ::
 
 ::read-more{to="/docs/api/configuration/nuxt-config"}

package/2.guide/2.directory-structure/3.nuxt-config.md

@@ -31,4 +31,4 @@ export default defineNuxtConfig({
 Discover all the available options in the **Nuxt configuration** documentation.
 ::
 
-To ensure your configuration is up to date, Nuxt will make a full restart when detecting changes in the main configuration file, the [`.env`](/docs/guide/directory-structure/env), [`.nuxtignore`](/docs/guide/directory-structure/nuxtignore) and [`.nuxtrc`](/docs/guide/directory-structure/nuxtrc) dotfiles.
+To ensure your configuration is up to date, Nuxt will make a full restart when detecting changes in the main configuration file, the [`.env`](/docs/4.x/guide/directory-structure/env), [`.nuxtignore`](/docs/4.x/guide/directory-structure/nuxtignore) and [`.nuxtrc`](/docs/4.x/guide/directory-structure/nuxtrc) dotfiles.

package/2.guide/2.directory-structure/3.tsconfig.md

@@ -5,7 +5,7 @@ head.title: "tsconfig.json"
 navigation.icon: i-lucide-file
 ---
 
-Nuxt [automatically generates](/docs/guide/concepts/typescript) multiple TypeScript configuration files (`.nuxt/tsconfig.app.json`, `.nuxt/tsconfig.server.json`, `.nuxt/tsconfig.node.json` and `.nuxt/tsconfig.shared.json`) with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults.
+Nuxt [automatically generates](/docs/4.x/guide/concepts/typescript) multiple TypeScript configuration files (`.nuxt/tsconfig.app.json`, `.nuxt/tsconfig.server.json`, `.nuxt/tsconfig.node.json` and `.nuxt/tsconfig.shared.json`) with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults.
 
 You can benefit from this by creating a `tsconfig.json` in the root of your project with the following content:
 
@@ -34,5 +34,5 @@ As you need to, you can customize the contents of this file. However, it is reco
 ::
 
 ::note
-If you need to customize your `paths`, this will override the auto-generated path aliases. Instead, we recommend that you add any path aliases you need to the [`alias`](/docs/api/nuxt-config#alias) property within your `nuxt.config`, where they will get picked up and added to the auto-generated `tsconfig`.
+If you need to customize your `paths`, this will override the auto-generated path aliases. Instead, we recommend that you add any path aliases you need to the [`alias`](/docs/4.x/api/nuxt-config#alias) property within your `nuxt.config`, where they will get picked up and added to the auto-generated `tsconfig`.
 ::

package/2.guide/3.going-further/1.experimental-features.md

@@ -5,7 +5,7 @@ description: "Enable Nuxt experimental features to unlock new possibilities."
 
 Nuxt includes experimental features that you can enable in your configuration file.
 
-Internally, Nuxt uses `@nuxt/schema` to define these experimental features. You can refer to the [API documentation](/docs/api/configuration/nuxt-config#experimental) or the [source code](https://github.com/nuxt/nuxt/blob/main/packages/schema/src/config/experimental.ts) for more information.
+Internally, Nuxt uses `@nuxt/schema` to define these experimental features. You can refer to the [API documentation](/docs/4.x/api/configuration/nuxt-config#experimental) or the [source code](https://github.com/nuxt/nuxt/blob/main/packages/schema/src/config/experimental.ts) for more information.
 
 ::note
 Note that these features are experimental and could be removed or modified in the future.
@@ -61,7 +61,7 @@ This feature will likely be removed in a near future.
 
 Emits `app:chunkError` hook when there is an error loading vite/webpack chunks. Default behavior is to perform a reload of the new route on navigation to a new route when a chunk fails to load.
 
-If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/guide/directory-structure/app/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
+If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/4.x/guide/directory-structure/app/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
 
 You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
 
@@ -75,13 +75,13 @@ export default defineNuxtConfig({
 
 ## restoreState
 
-Allows Nuxt app state to be restored from `sessionStorage` when reloading the page after a chunk error or manual [`reloadNuxtApp()`](/docs/api/utils/reload-nuxt-app) call.
+Allows Nuxt app state to be restored from `sessionStorage` when reloading the page after a chunk error or manual [`reloadNuxtApp()`](/docs/4.x/api/utils/reload-nuxt-app) call.
 
 To avoid hydration errors, it will be applied only after the Vue app has been mounted, meaning there may be a flicker on initial load.
 
 ::important
 Consider carefully before enabling this as it can cause unexpected behavior,
-and consider providing explicit keys to [`useState`](/docs/api/composables/use-state) as auto-generated keys may not match across builds.
+and consider providing explicit keys to [`useState`](/docs/4.x/api/composables/use-state) as auto-generated keys may not match across builds.
 ::
 
 ```ts twoslash [nuxt.config.ts]
@@ -94,7 +94,7 @@ export default defineNuxtConfig({
 
 ## inlineRouteRules
 
-Define route rules at the page level using [`defineRouteRules`](/docs/api/utils/define-route-rules).
+Define route rules at the page level using [`defineRouteRules`](/docs/4.x/api/utils/define-route-rules).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -152,7 +152,7 @@ export default defineNuxtConfig({
 
 ## clientFallback
 
-Enables the experimental [`<NuxtClientFallback>`](/docs/api/components/nuxt-client-fallback) component for rendering content on the client if there's an error in SSR.
+Enables the experimental [`<NuxtClientFallback>`](/docs/4.x/api/components/nuxt-client-fallback) component for rendering content on the client if there's an error in SSR.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -210,7 +210,7 @@ export default defineNuxtConfig({
 
 ## componentIslands
 
-Enables experimental component islands support with [`<NuxtIsland>`](/docs/api/components/nuxt-island) and `.island.vue` files.
+Enables experimental component islands support with [`<NuxtIsland>`](/docs/4.x/api/components/nuxt-island) and `.island.vue` files.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -252,7 +252,7 @@ export default defineNuxtConfig({
 })
 ```
 
-Out of the box, this will enable typed usage of [`navigateTo`](/docs/api/utils/navigate-to), [`<NuxtLink>`](/docs/api/components/nuxt-link), [`router.push()`](/docs/api/composables/use-router) and more.
+Out of the box, this will enable typed usage of [`navigateTo`](/docs/4.x/api/utils/navigate-to), [`<NuxtLink>`](/docs/4.x/api/components/nuxt-link), [`router.push()`](/docs/4.x/api/composables/use-router) and more.
 
 You can even get typed params within a page by using `const route = useRoute('route-name')`.
 
@@ -423,7 +423,7 @@ export default defineNuxtConfig({
 })
 ```
 
-This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/guide/directory-structure/app/pages#typing-custom-metadata).
+This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/4.x/guide/directory-structure/app/pages#typing-custom-metadata).
 
 ## normalizeComponentNames
 

package/2.guide/3.going-further/1.internals.md

@@ -7,15 +7,15 @@ This guide helps you better understand Nuxt internals to develop new solutions a
 
 ## The Nuxt Interface
 
-When you start Nuxt in development mode with [`nuxt dev`](/docs/api/commands/dev) or building a production application with [`nuxt build`](/docs/api/commands/build),
+When you start Nuxt in development mode with [`nuxt dev`](/docs/4.x/api/commands/dev) or building a production application with [`nuxt build`](/docs/4.x/api/commands/build),
 a common context will be created, referred to as `nuxt` internally. It holds normalized options merged with `nuxt.config` file,
-some internal state, and a powerful [hooking system](/docs/api/advanced/hooks) powered by [unjs/hookable](https://github.com/unjs/hookable)
+some internal state, and a powerful [hooking system](/docs/4.x/api/advanced/hooks) powered by [unjs/hookable](https://github.com/unjs/hookable)
 allowing different components to communicate with each other. You can think of it as **Builder Core**.
 
-This context is globally available to be used with [Nuxt Kit](/docs/guide/going-further/kit) composables.
+This context is globally available to be used with [Nuxt Kit](/docs/4.x/guide/going-further/kit) composables.
 Therefore only one instance of Nuxt is allowed to run per process.
 
-To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt Modules](/docs/guide/going-further/modules).
+To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt Modules](/docs/4.x/guide/going-further/modules).
 
 For more details, check out [the source code](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/core/nuxt.ts).
 
@@ -25,14 +25,14 @@ When rendering a page in the browser or on the server, a shared context will be
 This context keeps vue instance, runtime hooks, and internal states like ssrContext and payload for hydration.
 You can think of it as **Runtime Core**.
 
-This context can be accessed using [`useNuxtApp()`](/docs/api/composables/use-nuxt-app) composable within Nuxt plugins and `<script setup>` and vue composables.
+This context can be accessed using [`useNuxtApp()`](/docs/4.x/api/composables/use-nuxt-app) composable within Nuxt plugins and `<script setup>` and vue composables.
 Global usage is possible for the browser but not on the server, to avoid sharing context between users.
 
-Since [`useNuxtApp`](/docs/api/composables/use-nuxt-app) throws an exception if context is currently unavailable, if your composable does not always require `nuxtApp`, you can use [`tryUseNuxtApp`](/docs/api/composables/use-nuxt-app#tryusenuxtapp) instead, which will return `null` instead of throwing an exception.
+Since [`useNuxtApp`](/docs/4.x/api/composables/use-nuxt-app) throws an exception if context is currently unavailable, if your composable does not always require `nuxtApp`, you can use [`tryUseNuxtApp`](/docs/4.x/api/composables/use-nuxt-app#tryusenuxtapp) instead, which will return `null` instead of throwing an exception.
 
-To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/docs/guide/directory-structure/plugins).
+To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/docs/4.x/guide/directory-structure/plugins).
 
-Check [Nuxt App](/docs/api/composables/use-nuxt-app) for more information about this interface.
+Check [Nuxt App](/docs/4.x/api/composables/use-nuxt-app) for more information about this interface.
 
 `nuxtApp` has the following properties:
 
@@ -76,6 +76,6 @@ Nuxt builds and bundles project using Node.js but also has a runtime side.
 
 While both areas can be extended, that runtime context is isolated from build-time. Therefore, they are not supposed to share state, code, or context other than runtime configuration!
 
-`nuxt.config` and [Nuxt Modules](/docs/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/guide/directory-structure/plugins) can be used to extend runtime.
+`nuxt.config` and [Nuxt Modules](/docs/4.x/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/4.x/guide/directory-structure/plugins) can be used to extend runtime.
 
-When building an application for production, `nuxt build` will generate a standalone build in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/guide/going-further/modules).
+When building an application for production, `nuxt build` will generate a standalone build in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/4.x/guide/going-further/modules).