@nuxt/docs-nightly 4.1.3-29313364.98ecc620 → 4.1.3-29314777.50febbbb

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

@@ -42,9 +42,9 @@ const foo = useFoo()
 The `app/composables/` directory in Nuxt does not provide any additional reactivity capabilities to your code. Instead, any reactivity within composables is achieved using Vue's Composition API mechanisms, such as ref and reactive. Note that reactive code is also not limited to the boundaries of the `app/composables/` directory. You are free to employ reactivity features wherever they're needed in your application.
 ::
 
-:read-more{to="/docs/guide/concepts/auto-imports"}
+:read-more{to="/docs/4.x/guide/concepts/auto-imports"}
 
-:link-example{to="/docs/examples/features/auto-imports"}
+:link-example{to="/docs/4.x/examples/features/auto-imports"}
 
 ## Types
 

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

@@ -74,7 +74,7 @@ definePageMeta({
 </script>
 ```
 
-::read-more{to="/docs/guide/directory-structure/app/pages#page-metadata"}
+::read-more{to="/docs/4.x/guide/directory-structure/app/pages#page-metadata"}
 Learn more about `definePageMeta`.
 ::
 
@@ -109,7 +109,7 @@ File | Layout Name
 `~/layouts/desktop-base/DesktopBase.vue` | `desktop-base`
 `~/layouts/desktop/Desktop.vue` | `desktop`
 
-:link-example{to="/docs/examples/features/layouts"}
+:link-example{to="/docs/4.x/examples/features/layouts"}
 
 ## Changing the Layout Dynamically
 
@@ -132,7 +132,7 @@ definePageMeta({
 </template>
 ```
 
-:link-example{to="/docs/examples/features/layouts"}
+:link-example{to="/docs/4.x/examples/features/layouts"}
 
 ## Overriding a Layout on a Per-page Basis
 

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

@@ -58,8 +58,8 @@ Possible return values are:
 * `return abortNavigation()` - stops the current navigation
 * `return abortNavigation(error)` - rejects the current navigation with an error
 
-:read-more{to="/docs/api/utils/navigate-to"}
-:read-more{to="/docs/api/utils/abort-navigation"}
+:read-more{to="/docs/4.x/api/utils/navigate-to"}
+:read-more{to="/docs/4.x/api/utils/abort-navigation"}
 
 ::important
 We recommend using the helper functions above for performing redirects or stopping navigation. Other possible return values described in [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) may work but there may be breaking changes in future.
@@ -216,7 +216,7 @@ definePageMeta({
 
 Now, before navigation to that page can complete, the `auth` route middleware will be run.
 
-:link-example{to="/docs/examples/routing/middleware"}
+:link-example{to="/docs/4.x/examples/routing/middleware"}
 
 ## Setting Middleware at Build Time
 

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

@@ -33,7 +33,7 @@ export default defineComponent({
 ```
 
 ```tsx twoslash [pages/index.tsx]
-// https://nuxt.com/docs/examples/advanced/jsx
+// https://nuxt.com/docs/4.x/examples/advanced/jsx
 // https://vuejs.org/guide/extras/render-function.html#jsx-tsx
 export default defineComponent({
   render () {
@@ -226,7 +226,7 @@ definePageMeta({
 </script>
 ```
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/4.x/examples/routing/pages"}
 
 ## Route Groups
 
@@ -311,7 +311,7 @@ You can set a default value for this property [in your `nuxt.config`](/docs/4.x/
 
 #### `key`
 
-[See above](/docs/guide/directory-structure/app/pages#child-route-keys).
+[See above](/docs/4.x/guide/directory-structure/app/pages#child-route-keys).
 
 #### `layout`
 
@@ -368,7 +368,7 @@ A simple link to the `index.vue` page in your `app/pages` folder:
 </template>
 ```
 
-::read-more{to="/docs/api/components/nuxt-link"}
+::read-more{to="/docs/4.x/api/components/nuxt-link"}
 Learn more about `<NuxtLink>` usage.
 ::
 
@@ -413,7 +413,7 @@ Server-only pages must have a single root element. (HTML comments are considered
 
 As your app gets bigger and more complex, your routing might require more flexibility. For this reason, Nuxt directly exposes the router, routes and router options for customization in different ways.
 
-:read-more{to="/docs/guide/recipes/custom-routing"}
+:read-more{to="/docs/4.x/guide/recipes/custom-routing"}
 
 ## Multiple Pages Directories
 
@@ -441,4 +441,4 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/guide/going-further/layers"}
+:read-more{to="/docs/4.x/guide/going-further/layers"}

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

@@ -35,9 +35,9 @@ You can now use auto imported utility functions in `.js`, `.ts` and `.vue` files
 </template>
 ```
 
-:read-more{to="/docs/guide/concepts/auto-imports"}
+:read-more{to="/docs/4.x/guide/concepts/auto-imports"}
 
-:link-example{to="/docs/examples/features/auto-imports"}
+:link-example{to="/docs/4.x/examples/features/auto-imports"}
 
 ::tip
 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.

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

@@ -59,7 +59,7 @@ console.log(appConfig) // { foo: 'baz' }
 </script>
 ```
 
-::read-more{to="/docs/api/utils/update-app-config"}
+::read-more{to="/docs/4.x/api/utils/update-app-config"}
 Read more about the `updateAppConfig` utility.
 ::
 

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

@@ -21,7 +21,7 @@ With Nuxt, the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) dir
 </template>
 ```
 
-:link-example{to="/docs/examples/hello-world"}
+:link-example{to="/docs/4.x/examples/hello-world"}
 
 ### Usage with Pages
 
@@ -51,7 +51,7 @@ You can also define the common structure of your application directly in `app.vu
 Remember that `app.vue` acts as the main component of your Nuxt application. Anything you add to it (JS and CSS) will be global and included in every page.
 ::
 
-::read-more{to="/docs/guide/directory-structure/app/pages"}
+::read-more{to="/docs/4.x/guide/directory-structure/app/pages"}
 Learn more about how to structure your pages using the `app/pages/` directory.
 ::
 
@@ -67,6 +67,6 @@ When your application requires different layouts for different pages, you can us
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/app/layouts"}
+::read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
 Learn more about how to structure your layouts using the `app/layouts/` directory.
 ::

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

@@ -59,7 +59,7 @@ modules/
   2.second-module.ts
 ```
 
-:read-more{to="/docs/guide/going-further/modules"}
+:read-more{to="/docs/4.x/guide/going-further/modules"}
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/creating-your-first-module-from-scratch?friend=nuxt" target="_blank"}
 Watch Vue School video about Nuxt private modules.

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

@@ -392,7 +392,7 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/guide/concepts/server-engine"}
+:read-more{to="/docs/4.x/guide/concepts/server-engine"}
 
 ### Nested Router
 
@@ -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](/docs/guide/directory-structure/server#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/4.x/guide/directory-structure/server#server-plugins).
 
 **Example of adding a Redis storage:**
 

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

@@ -65,7 +65,7 @@ Only files in the `shared/utils/` and `shared/types/` directories will be auto-i
 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"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/composables#how-files-are-scanned"}
 
 ```bash [Directory Structure]
 -| shared/
@@ -95,4 +95,4 @@ import upper from '#shared/utils/formatters/upper'
 
 This alias ensures consistent imports across your application, regardless of the importing file's location.
 
-:read-more{to="/docs/guide/concepts/auto-imports"}
+:read-more{to="/docs/4.x/guide/concepts/auto-imports"}

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

@@ -56,7 +56,7 @@ Since `.env` files are not used in production, you must explicitly set environme
 * Many cloud service providers, such as Vercel, Netlify, and AWS, provide interfaces for setting environment variables via their dashboards, CLI tools or configuration files.
 
 ::important
-`runtimeConfig` [won't pick up environment variables that don't start with `NUXT_` in production] (https://nuxt.com/docs/guide/going-further/runtime-config#environment-variables).
+`runtimeConfig` [won't pick up environment variables that don't start with `NUXT_` in production] (https://nuxt.com/docs/4.x/guide/going-further/runtime-config#environment-variables).
 ::
 
 ## Production Preview
@@ -71,9 +71,9 @@ DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs
 
 Note that for a purely static site, it is not possible to set runtime configuration config after your project is prerendered.
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
 
 ::note
 If you want to use environment variables set at build time but do not care about updating these down the line (or only need to update them reactively _within_ your app) then `appConfig` may be a better choice. You can define `appConfig` both within your `nuxt.config` (using environment variables) and also within an `~/app.config.ts` file in your project.
-:read-more{to="/docs/guide/directory-structure/app-config"}
+:read-more{to="/docs/4.x/guide/directory-structure/app-config"}
 ::

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

@@ -31,7 +31,7 @@ If present, the properties in the `nuxt.config` file will overwrite the properti
 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"}
+::read-more{to="/docs/4.x/api/configuration/nuxt-config"}
 Discover all the available options in the **Nuxt configuration** documentation.
 ::
 

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

@@ -27,7 +27,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::read-more{to="/docs/api/configuration/nuxt-config"}
+::read-more{to="/docs/4.x/api/configuration/nuxt-config"}
 Discover all the available options in the **Nuxt configuration** documentation.
 ::
 

package/2.guide/2.concepts/1.auto-imports.md

@@ -66,7 +66,7 @@ If you get an error message like `Nuxt instance is unavailable` then it probably
 When using a composable that requires the Nuxt context inside a non-SFC component, you need to wrap your component with `defineNuxtComponent` instead of `defineComponent`
 ::
 
-::read-more{to="/docs/guide/going-further/experimental-features#asynccontext" icon="i-lucide-star"}
+::read-more{to="/docs/4.x/guide/going-further/experimental-features#asynccontext" icon="i-lucide-star"}
 Checkout the `asyncContext` experimental feature to use Nuxt composables in async functions.
 ::
 
@@ -105,7 +105,7 @@ Nuxt directly auto-imports files created in defined directories:
 - `app/composables/` for [Vue composables](/docs/4.x/guide/directory-structure/app/composables).
 - `app/utils/` for helper functions and other utilities.
 
-:link-example{to="/docs/examples/features/auto-imports"}
+:link-example{to="/docs/4.x/examples/features/auto-imports"}
 
 ::warning
 **Auto-imported `ref` and `computed` won't be unwrapped in a component `<template>`.** :br
@@ -139,7 +139,7 @@ export default defineNuxtConfig({
 })
 ```
 
-This will disable auto-imports completely but it's still possible to use [explicit imports](/docs/guide/concepts/auto-imports#explicit-imports) from `#imports`.
+This will disable auto-imports completely but it's still possible to use [explicit imports](/docs/4.x/guide/concepts/auto-imports#explicit-imports) from `#imports`.
 
 ### Partially Disabling Auto-imports
 
@@ -167,7 +167,7 @@ With this configuration:
 
 Nuxt also automatically imports components from your `~/components` directory, although this is configured separately from auto-importing composables and utility functions.
 
-:read-more{to="/docs/guide/directory-structure/app/components"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/components"}
 
 To disable auto-importing components from your own `~/components` directory, you can set `components.dirs` to an empty array (though note that this will not affect components added by modules).
 

package/2.guide/2.concepts/10.nuxt-lifecycle.md

@@ -22,7 +22,7 @@ When Nitro starts, it initializes and executes the plugins under the `/server/pl
 Nitro plugins are executed only once when the server starts. In a serverless environment, the server boots on each incoming request, and so do the Nitro plugins. However, they are not awaited.
 ::
 
-:read-more{to="/docs/guide/directory-structure/server#server-plugins"}
+:read-more{to="/docs/4.x/guide/directory-structure/server#server-plugins"}
 
 ### Step 2: Nitro Server Middleware
 
@@ -32,7 +32,7 @@ After initializing the Nitro server, middleware under `server/middleware/` is ex
 Returning a value from middleware will terminate the request and send the returned value as the response. This behavior should generally be avoided to ensure proper request handling!
 ::
 
-:read-more{to="/docs/guide/directory-structure/server#server-middleware"}
+:read-more{to="/docs/4.x/guide/directory-structure/server#server-middleware"}
 
 ### Step 3: Initialize Nuxt and Execute Nuxt App Plugins
 
@@ -46,7 +46,7 @@ Plugins execute in a specific order and may have dependencies on one another. Fo
 After this step, Nuxt calls the [`app:created`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook, which can be used to execute additional logic.
 ::
 
-:read-more{to="/docs/guide/directory-structure/plugins"}
+:read-more{to="/docs/4.x/guide/directory-structure/plugins"}
 
 ### Step 4: Route Validation
 
@@ -57,7 +57,7 @@ After initializing plugins and before executing middleware, Nuxt calls the `vali
 
 For more information, see the [Route Validation documentation](/docs/4.x/getting-started/routing#route-validation).
 
-:read-more{to="/docs/getting-started/routing#route-validation"}
+:read-more{to="/docs/4.x/getting-started/routing#route-validation"}
 
 ### Step 5: Execute Nuxt App Middleware
 
@@ -74,7 +74,7 @@ For details about each type and examples, see the [Middleware documentation](/do
 
 Any redirection on the server will result in a `Location:` header being sent to the browser; the browser then makes a fresh request to this new location. All application state will be reset when this happens, unless persisted in a cookie.
 
-:read-more{to="/docs/guide/directory-structure/app/middleware"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}
 
 ### Step 6: Render Page and Components
 
@@ -120,7 +120,7 @@ Custom plugins in the `app/plugins/` directory, such as those without a suffix (
 After this step, Nuxt calls the [`app:created`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook, which can be used to execute additional logic.
 ::
 
-:read-more{to="/docs/guide/directory-structure/plugins"}
+:read-more{to="/docs/4.x/guide/directory-structure/plugins"}
 
 ### Step 2: Route Validation
 
@@ -130,7 +130,7 @@ This step is the same as the server-side execution and includes the `validate` m
 
 Nuxt middleware runs on both the server and the client. If you want certain code to run in specific environments, consider splitting it by using `import.meta.client` for the client and `import.meta.server` for the server.
 
-:read-more{to="/docs/guide/directory-structure/app/middleware#when-middleware-runs"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/middleware#when-middleware-runs"}
 
 ### Step 4: Mount Vue Application and Hydration
 

package/2.guide/2.concepts/2.vuejs-development.md

@@ -27,15 +27,15 @@ We chose to build Nuxt on top of Vue for these reasons:
 
 Every Vue component created in the [`app/components/`](/docs/4.x/guide/directory-structure/app/components) directory of a Nuxt project will be available in your project without having to import it. If a component is not used anywhere, your production’s code will not include it.
 
-:read-more{to="/docs/guide/concepts/auto-imports"}
+:read-more{to="/docs/4.x/guide/concepts/auto-imports"}
 
 ### Vue Router
 
 Most applications need multiple pages and a way to navigate between them. This is called **routing**. Nuxt uses an [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory and naming conventions to directly create routes mapped to your files using the official [Vue Router library](https://router.vuejs.org).
 
-:read-more{to="/docs/getting-started/routing"}
+:read-more{to="/docs/4.x/getting-started/routing"}
 
-:link-example{to="/docs/examples/features/auto-imports"}
+:link-example{to="/docs/4.x/examples/features/auto-imports"}
 
 ## Differences with Nuxt 2 / Vue 2
 
@@ -98,6 +98,6 @@ The goal of Nuxt is to provide a great developer experience around the Compositi
 
 Both Vue 3 and Nuxt 3+ are written in TypeScript. A fully typed codebase prevents mistakes and documents APIs usage. This doesn’t mean that you have to write your application in TypeScript to take advantage of it. With Nuxt 3, you can opt-in by renaming your file from `.js` to `.ts` , or add `<script setup lang="ts">` in a component.
 
-::read-more{to="/docs/guide/concepts/typescript"}
+::read-more{to="/docs/4.x/guide/concepts/typescript"}
 Read the details about TypeScript in Nuxt
 ::

package/2.guide/2.concepts/3.rendering.md

@@ -3,7 +3,7 @@ title: 'Rendering Modes'
 description: 'Learn about the different rendering modes available in Nuxt.'
 ---
 
-Nuxt supports different rendering modes, [universal rendering](/docs/guide/concepts/rendering#universal-rendering), [client-side rendering](/docs/guide/concepts/rendering#client-side-rendering) but also offers [hybrid-rendering](/docs/guide/concepts/rendering#hybrid-rendering) and the possibility to render your application on [CDN Edge Servers](/docs/guide/concepts/rendering#edge-side-rendering).
+Nuxt supports different rendering modes, [universal rendering](/docs/4.x/guide/concepts/rendering#universal-rendering), [client-side rendering](/docs/4.x/guide/concepts/rendering#client-side-rendering) but also offers [hybrid-rendering](/docs/4.x/guide/concepts/rendering#hybrid-rendering) and the possibility to render your application on [CDN Edge Servers](/docs/4.x/guide/concepts/rendering#edge-side-rendering).
 
 Both the browser and server can interpret JavaScript code to turn Vue.js components into HTML elements. This step is called **rendering**. Nuxt supports both **universal** and **client-side** rendering. The two approaches have benefits and downsides that we will cover.
 
@@ -50,7 +50,7 @@ On the initial request, the `counter` ref is initialized in the server since it
 
 **Downsides of server-side rendering:**
 - **Development constraints:** Server and browser environments don't provide the same APIs, and it can be tricky to write code that can run on both sides seamlessly. Fortunately, Nuxt provides guidelines and specific variables to help you determine where a piece of code is executed.
-- **Cost:** A server needs to be running in order to render pages on the fly. This adds a monthly cost like any traditional server. However, the server calls are highly reduced thanks to universal rendering with the browser taking over on client-side navigation. A cost reduction is possible by leveraging [edge-side-rendering](/docs/guide/concepts/rendering#edge-side-rendering).
+- **Cost:** A server needs to be running in order to render pages on the fly. This adds a monthly cost like any traditional server. However, the server calls are highly reduced thanks to universal rendering with the browser taking over on client-side navigation. A cost reduction is possible by leveraging [edge-side-rendering](/docs/4.x/guide/concepts/rendering#edge-side-rendering).
 
 Universal rendering is very versatile and can fit almost any use case, and is especially appropriate for any content-oriented websites: **blogs, marketing websites, portfolios, e-commerce sites, and marketplaces.**
 
@@ -89,7 +89,7 @@ export default defineNuxtConfig({
 
 ::note
 If you do use `ssr: false`, you should also place an HTML file in `~/spa-loading-template.html` with some HTML you would like to use to render a loading screen that will be rendered until your app is hydrated.
-:read-more{title="SPA Loading Template" to="/docs/api/configuration/nuxt-config#spaloadingtemplate"}
+:read-more{title="SPA Loading Template" to="/docs/4.x/api/configuration/nuxt-config#spaloadingtemplate"}
 ::
 
 :video-accordion{title="Watch a video from Alexander Lichter about Building a plain SPA with Nuxt" videoId="7Lr0QTP1Ro8"}

package/2.guide/2.concepts/4.server-engine.md

@@ -26,7 +26,7 @@ Key features include:
 
 Check out [the h3 docs](https://github.com/h3js/h3) for more information.
 
-::read-more{to="/docs/guide/directory-structure/server#server-routes"}
+::read-more{to="/docs/4.x/guide/directory-structure/server#server-routes"}
 Learn more about the API layer in the `server/` directory.
 ::
 

package/2.guide/2.concepts/5.modules.md

@@ -45,4 +45,4 @@ Nuxt modules are now build-time-only, and the `buildModules` property used in Nu
 
 Everyone has the opportunity to develop modules and we cannot wait to see what you will build.
 
-:read-more{to="/docs/guide/going-further/modules" title="Module Author Guide"}
+:read-more{to="/docs/4.x/guide/going-further/modules" title="Module Author Guide"}

package/2.guide/2.concepts/7.esm.md

@@ -111,7 +111,7 @@ const { named } = pkg;
 
 ## Troubleshooting ESM Issues
 
-If you encounter these errors, the issue is almost certainly with the upstream library. They need to [fix their library](/docs/guide/concepts/esm#library-author-guide) to support being imported by Node.
+If you encounter these errors, the issue is almost certainly with the upstream library. They need to [fix their library](/docs/4.x/guide/concepts/esm#library-author-guide) to support being imported by Node.
 
 ### Transpiling Libraries
 
@@ -282,7 +282,7 @@ const someFile = await resolvePath('my-lib', { url: import.meta.url })
 
 ### Best Practices
 
-- Prefer named exports rather than default export. This helps reduce CJS conflicts. (see [Default exports](/docs/guide/concepts/esm#default-exports) section)
+- Prefer named exports rather than default export. This helps reduce CJS conflicts. (see [Default exports](/docs/4.x/guide/concepts/esm#default-exports) section)
 
 - Avoid depending on Node.js built-ins and CommonJS or Node.js-only dependencies as much as possible to make your library usable in Browsers and Edge Workers without needing Nitro polyfills.
 

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

@@ -58,6 +58,6 @@ await nuxtApp.callHook('app:user:registered', {
 You can inspect all events using the **Nuxt DevTools** Hooks panel.
 ::
 
-::read-more{to="/docs/guide/going-further/hooks"}
+::read-more{to="/docs/4.x/guide/going-further/hooks"}
 Learn more about Nuxt's built-in hooks and how to extend them
 ::

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

@@ -106,11 +106,11 @@ export default defineNuxtConfig({
 
 Matching route rules will be created, based on the page's `path`.
 
-::read-more{to="/docs/api/utils/define-route-rules" icon="i-lucide-square-function"}
+::read-more{to="/docs/4.x/api/utils/define-route-rules" icon="i-lucide-square-function"}
 Read more in `defineRouteRules` utility.
 ::
 
-:read-more{to="/docs/guide/concepts/rendering#hybrid-rendering" icon="i-lucide-medal"}
+:read-more{to="/docs/4.x/guide/concepts/rendering#hybrid-rendering" icon="i-lucide-medal"}
 
 ## renderJsonPayloads
 
@@ -220,7 +220,7 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/guide/directory-structure/app/components#server-components"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/components#server-components"}
 
 ::read-more{icon="i-simple-icons-github" to="https://github.com/nuxt/nuxt/issues/19772" target="_blank"}
 You can follow the server components roadmap on GitHub.
@@ -531,7 +531,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::read-more{icon="i-simple-icons-github" color="gray" to="/docs/guide/directory-structure/app/components#delayed-or-lazy-hydration"}
+::read-more{icon="i-simple-icons-github" color="gray" to="/docs/4.x/guide/directory-structure/app/components#delayed-or-lazy-hydration"}
 Read more about lazy hydration.
 ::
 

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

@@ -45,7 +45,7 @@ The most common way to provide configuration is by using [Environment Variables]
 
 ::note
 The Nuxt CLI has built-in support for reading your `.env` file in development, build and generate. But when you run your built server, **your `.env` file will not be read**.
-:read-more{to="/docs/guide/directory-structure/env"}
+:read-more{to="/docs/4.x/guide/directory-structure/env"}
 ::
 
 Runtime config values are **automatically replaced by matching environment variables at runtime**.

package/2.guide/3.going-further/11.nightly-release-channel.md

@@ -57,6 +57,6 @@ To try the latest version of [nuxt/cli](https://github.com/nuxt/cli):
 npx @nuxt/cli-nightly@latest [command]
 ```
 
-::read-more{to="/docs/api/commands"}
+::read-more{to="/docs/4.x/api/commands"}
 Read more about the available commands.
 ::

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

@@ -33,7 +33,7 @@ export default defineNuxtModule({
 })
 ```
 
-::read-more{to="/docs/api/advanced/hooks#nuxt-hooks-build-time"}
+::read-more{to="/docs/4.x/api/advanced/hooks#nuxt-hooks-build-time"}
 Explore all available Nuxt hooks.
 ::
 
@@ -49,7 +49,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
-::read-more{to="/docs/api/advanced/hooks#app-hooks-runtime"}
+::read-more{to="/docs/4.x/api/advanced/hooks#app-hooks-runtime"}
 Explore all available App hooks.
 ::
 
@@ -70,7 +70,7 @@ export default defineNitroPlugin((nitroApp) => {
 })
 ```
 
-::read-more{to="/docs/api/advanced/hooks#nitro-app-hooks-runtime-server-side"}
+::read-more{to="/docs/4.x/api/advanced/hooks#nitro-app-hooks-runtime-server-side"}
 Learn more about available Nitro lifecycle hooks.
 ::
 

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

@@ -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](/docs/guide/going-further/modules#module-definition).
+You'll then be able to inject all those assets inside the application from your [module definition](/docs/4.x/guide/going-further/modules#module-definition).
 
 ::tip
-Learn more about asset injection in [the recipes section](/docs/guide/going-further/modules#recipes).
+Learn more about asset injection in [the recipes section](/docs/4.x/guide/going-further/modules#recipes).
 ::
 
 ::warning
@@ -261,7 +261,7 @@ Modules come with a set of first-party tools to help you with their development.
 
 [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"}
+:read-more{to="/docs/4.x/guide/going-further/kit"}
 
 #### `@nuxt/test-utils`
 
@@ -324,7 +324,7 @@ const options = useRuntimeConfig().public.myModule
 Be careful not to expose any sensitive module configuration on the public runtime config, such as private API keys, as they will end up in the public bundle.
 ::
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/passing-and-exposing-module-options?friend=nuxt" target="_blank"}
 Watch Vue School video about passing and exposing Nuxt module options.
@@ -347,7 +347,7 @@ export default defineNuxtModule({
 })
 ```
 
-:read-more{to="/docs/guide/going-further/kit"}
+:read-more{to="/docs/4.x/guide/going-further/kit"}
 
 #### Injecting Vue Components With `addComponent`
 
@@ -551,7 +551,7 @@ export default defineNuxtModule({
 })
 ```
 
-:read-more{to="/docs/api/advanced/hooks"}
+:read-more{to="/docs/4.x/api/advanced/hooks"}
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/nuxt-lifecycle-hooks?friend=nuxt" target="_blank"}
 Watch Vue School video about using Nuxt lifecycle hooks in modules.
@@ -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](/docs/guide/going-further/modules#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/4.x/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"`.
 

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

@@ -5,7 +5,7 @@ description: "@nuxt/kit provides features for module authors."
 
 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"}
+::read-more{to="/docs/4.x/api/kit"}
 Discover all Nuxt Kit utilities.
 ::
 
@@ -33,7 +33,7 @@ You can install the latest Nuxt Kit by adding it to the `dependencies` section o
 import { useNuxt } from '@nuxt/kit'
 ```
 
-:read-more{to="/docs/api/kit"}
+:read-more{to="/docs/4.x/api/kit"}
 
 ::note
 Nuxt Kit utilities are only available for modules and not meant to be imported in runtime (components, Vue composables, pages, plugins, or server routes).

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

@@ -15,7 +15,7 @@ In Nuxt 2, this was referred to as **Nuxt context**.
 
 ## Nuxt App Interface
 
-::read-more{to="/docs/guide/going-further/internals#the-nuxtapp-interface"}
+::read-more{to="/docs/4.x/guide/going-further/internals#the-nuxtapp-interface"}
 Jump over the `NuxtApp` interface documentation.
 ::
 
@@ -42,7 +42,7 @@ If your composable does not always need `nuxtApp` or you simply want to check if
 
 Plugins also receive `nuxtApp` as the first argument for convenience.
 
-:read-more{to="/docs/guide/directory-structure/plugins"}
+:read-more{to="/docs/4.x/guide/directory-structure/plugins"}
 
 ## Providing Helpers
 
@@ -55,7 +55,7 @@ nuxtApp.provide('hello', (name) => `Hello ${name}!`)
 console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
 ```
 
-::read-more{to="/docs/guide/directory-structure/plugins#providing-helpers"}
+::read-more{to="/docs/4.x/guide/directory-structure/plugins#providing-helpers"}
 It is possible to inject helpers by returning an object with a `provide` key in plugins.
 ::