@nuxt/docs-nightly 4.1.3-29300098.2f71703a → 4.1.3-29303775.dc69e26c

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

@@ -40,10 +40,10 @@ The Vue and Nuxt instances are created first. Afterward, Nuxt executes its serve
 - Built-in plugins, such as Vue Router and `unhead`.
 - Custom plugins located in the `app/plugins/` directory, including those without a suffix (e.g., `myPlugin.ts`) and those with the `.server` suffix (e.g., `myServerPlugin.server.ts`).
 
-Plugins execute in a specific order and may have dependencies on one another. For more details, including execution order and parallelism, refer to the [Plugins documentation](/docs/guide/directory-structure/plugins).
+Plugins execute in a specific order and may have dependencies on one another. For more details, including execution order and parallelism, refer to the [Plugins documentation](/docs/4.x/guide/directory-structure/plugins).
 
 ::callout{icon="i-lucide-lightbulb"}
-After this step, Nuxt calls the [`app:created`](/docs/api/advanced/hooks#app-hooks-runtime) hook, which can be used to execute additional logic.
+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"}
@@ -55,7 +55,7 @@ After initializing plugins and before executing middleware, Nuxt calls the `vali
 - The `validate` function should return `true` if the parameters are valid.
 - If validation fails, it should return `false` or an object containing a `statusCode` and/or `statusMessage` to terminate the request.
 
-For more information, see the [Route Validation documentation](/docs/getting-started/routing#route-validation).
+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"}
 
@@ -70,7 +70,7 @@ In Nuxt, there are three types of middleware:
 
 Nuxt executes all global middleware on the initial page load (both on server and client) and then again before any client-side navigation. Named and anonymous middleware are executed only on the routes specified in the middleware property of the page(route) meta defined in the corresponding page components.
 
-For details about each type and examples, see the [Middleware documentation](/docs/guide/directory-structure/app/middleware).
+For details about each type and examples, see the [Middleware documentation](/docs/4.x/guide/directory-structure/app/middleware).
 
 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.
 
@@ -99,11 +99,11 @@ Watch a video from Daniel Roe explaining Server Rendering and Global State.
 After all required data is fetched and the components are rendered, Nuxt combines the rendered components with settings from `unhead` to generate a complete HTML document. This HTML, along with the associated data, is then sent back to the client to complete the SSR process.
 
 ::callout{icon="i-lucide-lightbulb"}
-After rendering the Vue application to HTML, Nuxt calls the [`app:rendered`](/docs/api/advanced/hooks#app-hooks-runtime) hook.
+After rendering the Vue application to HTML, Nuxt calls the [`app:rendered`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook.
 ::
 
 ::callout{icon="i-lucide-lightbulb"}
-Before finalizing and sending the HTML, Nitro will call the [`render:html`](/docs/api/advanced/hooks#nitro-app-hooks-runtime-server-side) hook. This hook allows you to manipulate the generated HTML, such as injecting additional scripts or modifying meta tags.
+Before finalizing and sending the HTML, Nitro will call the [`render:html`](/docs/4.x/api/advanced/hooks#nitro-app-hooks-runtime-server-side) hook. This hook allows you to manipulate the generated HTML, such as injecting additional scripts or modifying meta tags.
 ::
 
 ## Client (browser)
@@ -117,7 +117,7 @@ This step is similar to the server-side execution and includes both built-in and
 Custom plugins in the `app/plugins/` directory, such as those without a suffix (e.g., `myPlugin.ts`) and with the `.client` suffix (e.g., `myClientPlugin.client.ts`), are executed on the client side.
 
 ::callout{icon="i-lucide-lightbulb"}
-After this step, Nuxt calls the [`app:created`](/docs/api/advanced/hooks#app-hooks-runtime) hook, which can be used to execute additional logic.
+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"}
@@ -134,16 +134,16 @@ Nuxt middleware runs on both the server and the client. If you want certain code
 
 ### Step 4: Mount Vue Application and Hydration
 
-Calling `app.mount('#__nuxt')` mounts the Vue application to the DOM. If the application uses SSR or SSG mode, Vue performs a hydration step to make the client-side application interactive. During hydration, Vue recreates the application (excluding [Server Components](/docs/guide/directory-structure/app/components#server-components)), matches each component to its corresponding DOM nodes, and attaches DOM event listeners.
+Calling `app.mount('#__nuxt')` mounts the Vue application to the DOM. If the application uses SSR or SSG mode, Vue performs a hydration step to make the client-side application interactive. During hydration, Vue recreates the application (excluding [Server Components](/docs/4.x/guide/directory-structure/app/components#server-components)), matches each component to its corresponding DOM nodes, and attaches DOM event listeners.
 
 To ensure proper hydration, it's important to maintain consistency between the data on the server and the client. For API requests, it is recommended to use `useAsyncData`, `useFetch`, or other SSR-friendly composables. These methods ensure that the data fetched on the server side is reused during hydration, avoiding repeated requests. Any new requests should only be triggered after hydration, preventing hydration errors.
 
 ::callout{icon="i-lucide-lightbulb"}
-Before mounting the Vue application, Nuxt calls the [`app:beforeMount`](/docs/api/advanced/hooks#app-hooks-runtime) hook.
+Before mounting the Vue application, Nuxt calls the [`app:beforeMount`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook.
 ::
 
 ::callout{icon="i-lucide-lightbulb"}
-After mounting the Vue application, Nuxt calls the [`app:mounted`](/docs/api/advanced/hooks#app-hooks-runtime) hook.
+After mounting the Vue application, Nuxt calls the [`app:mounted`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook.
 ::
 
 ### Step 5: Vue Lifecycle

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

@@ -25,13 +25,13 @@ We chose to build Nuxt on top of Vue for these reasons:
 
 ### Auto-imports
 
-Every Vue component created in the [`app/components/`](/docs/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.
+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"}
 
 ### Vue Router
 
-Most applications need multiple pages and a way to navigate between them. This is called **routing**. Nuxt uses an [`app/pages/`](/docs/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).
+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"}
 
@@ -91,8 +91,8 @@ const increment = () => count.value++
 
 The goal of Nuxt is to provide a great developer experience around the Composition API.
 
-- Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt [built-in composables](/docs/api/composables/use-async-data).
-- Write your own auto-imported reusable functions in the [`app/composables/` directory](/docs/guide/directory-structure/app/composables).
+- Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt [built-in composables](/docs/4.x/api/composables/use-async-data).
+- Write your own auto-imported reusable functions in the [`app/composables/` directory](/docs/4.x/guide/directory-structure/app/composables).
 
 ### TypeScript Support
 

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

@@ -3,11 +3,11 @@ title: 'Rendering Modes'
 description: 'Learn about the different rendering modes available in Nuxt.'
 ---
 
-Nuxt supports different rendering modes, [universal rendering](#universal-rendering), [client-side rendering](#client-side-rendering) but also offers [hybrid-rendering](#hybrid-rendering) and the possibility to render your application on [CDN Edge Servers](#edge-side-rendering).
+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).
 
 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.
 
-By default, Nuxt uses **universal rendering** to provide better user experience, performance and to optimize search engine indexing, but you can switch rendering modes in [one line of configuration](/docs/api/nuxt-config#ssr).
+By default, Nuxt uses **universal rendering** to provide better user experience, performance and to optimize search engine indexing, but you can switch rendering modes in [one line of configuration](/docs/4.x/api/nuxt-config#ssr).
 
 ## Universal Rendering
 
@@ -42,7 +42,7 @@ const handleClick = () => {
 
 On the initial request, the `counter` ref is initialized in the server since it is rendered inside the `<p>` tag. The contents of `handleClick` is never executed here. During hydration in the browser, the `counter` ref is re-initialized. The `handleClick` finally binds itself to the button; Therefore it is reasonable to deduce that the body of `handleClick` will always run in a browser environment.
 
-[Middlewares](/docs/guide/directory-structure/app/middleware) and [pages](/docs/guide/directory-structure/app/pages) run in the server and on the client during hydration. [Plugins](/docs/guide/directory-structure/plugins) can be rendered on the server or client or both. [Components](/docs/guide/directory-structure/app/components) can be forced to run on the client only as well. [Composables](/docs/guide/directory-structure/app/composables) and [utilities](/docs/guide/directory-structure/app/utils) are rendered based on the context of their usage.
+[Middlewares](/docs/4.x/guide/directory-structure/app/middleware) and [pages](/docs/4.x/guide/directory-structure/app/pages) run in the server and on the client during hydration. [Plugins](/docs/4.x/guide/directory-structure/plugins) can be rendered on the server or client or both. [Components](/docs/4.x/guide/directory-structure/app/components) can be forced to run on the client only as well. [Composables](/docs/4.x/guide/directory-structure/app/composables) and [utilities](/docs/4.x/guide/directory-structure/app/utils) are rendered based on the context of their usage.
 
 **Benefits of server-side rendering:**
 - **Performance**: Users can get immediate access to the page's content because browsers can display static content much faster than JavaScript-generated content. At the same time, Nuxt preserves the interactivity of a web application during the hydration process.
@@ -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](#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/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.**
 
@@ -96,7 +96,7 @@ If you do use `ssr: false`, you should also place an HTML file in `~/spa-loading
 
 ### Deploying a Static Client-Rendered App
 
-If you deploy your app to [static hosting](/docs/getting-started/deployment#static-hosting) with the `nuxt generate` or `nuxt build --prerender` commands, then by default, Nuxt will render every page as a separate static HTML file.
+If you deploy your app to [static hosting](/docs/4.x/getting-started/deployment#static-hosting) with the `nuxt generate` or `nuxt build --prerender` commands, then by default, Nuxt will render every page as a separate static HTML file.
 
 ::warning
 If you prerender your app with the `nuxt generate` or `nuxt build --prerender` commands, then you will not be able to use any server endpoints as no server will be included in your output folder. If you need server functionality, use `nuxt build` instead.
@@ -104,7 +104,7 @@ If you prerender your app with the `nuxt generate` or `nuxt build --prerender` c
 
 If you are using purely client-side rendering, then this might be unnecessary. You might only need a single `index.html` file, plus `200.html` and `404.html` fallbacks, which you can tell your static web host to serve up for all requests.
 
-In order to achieve this we can change how the routes are prerendered. Just add this to [your hooks](/docs/api/advanced/hooks#nuxt-hooks-build-time) in your `nuxt.config.ts`:
+In order to achieve this we can change how the routes are prerendered. Just add this to [your hooks](/docs/4.x/api/advanced/hooks#nuxt-hooks-build-time) in your `nuxt.config.ts`:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -126,7 +126,7 @@ The `200.html` and `404.html` might be useful for the hosting provider you are u
 
 #### Skipping Client Fallback Generation
 
-When prerendering a client-rendered app, Nuxt will generate `index.html`, `200.html` and `404.html` files by default. However, if you need to prevent any (or all) of these files from being generated in your build, you can use the `'prerender:generate'` hook from [Nitro](/docs/getting-started/prerendering#prerendergenerate-nitro-hook).
+When prerendering a client-rendered app, Nuxt will generate `index.html`, `200.html` and `404.html` files by default. However, if you need to prevent any (or all) of these files from being generated in your build, you can use the `'prerender:generate'` hook from [Nitro](/docs/4.x/getting-started/prerendering#prerendergenerate-nitro-hook).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -193,7 +193,7 @@ The different properties you can use are the following:
 Whenever possible, route rules will be automatically applied to the deployment platform's native rules for optimal performances (Netlify and Vercel are currently supported).
 
 ::important
-Note that Hybrid Rendering is not available when using [`nuxt generate`](/docs/api/commands/generate).
+Note that Hybrid Rendering is not available when using [`nuxt generate`](/docs/4.x/api/commands/generate).
 ::
 
 **Examples:**
@@ -219,7 +219,7 @@ With ESR, the rendering process is pushed to the 'edge' of the network - the CDN
 
 When a request for a page is made, instead of going all the way to the original server, it's intercepted by the nearest edge server. This server generates the HTML for the page and sends it back to the user. This process minimizes the physical distance the data has to travel, **reducing latency and loading the page faster**.
 
-Edge-side rendering is possible thanks to [Nitro](https://nitro.build/), the [server engine](/docs/guide/concepts/server-engine) that powers Nuxt. It offers cross-platform support for Node.js, Deno, Cloudflare Workers, and more.
+Edge-side rendering is possible thanks to [Nitro](https://nitro.build/), the [server engine](/docs/4.x/guide/concepts/server-engine) that powers Nuxt. It offers cross-platform support for Node.js, Deno, Cloudflare Workers, and more.
 
 The current platforms where you can leverage ESR are:
 - [Cloudflare Pages](https://pages.cloudflare.com) with zero configuration using the git integration and the `nuxt build` command

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

@@ -16,7 +16,7 @@ It is shipped with many features:
 
 ## API Layer
 
-Server [API endpoints](/docs/guide/directory-structure/server#api-routes) and [Middleware](/docs/guide/directory-structure/server#server-middleware) are added by Nitro that internally uses [h3](https://github.com/h3js/h3).
+Server [API endpoints](/docs/4.x/guide/directory-structure/server#server-routes) and [Middleware](/docs/4.x/guide/directory-structure/server#server-middleware) are added by Nitro that internally uses [h3](https://github.com/h3js/h3).
 
 Key features include:
 
@@ -32,9 +32,9 @@ Learn more about the API layer in the `server/` directory.
 
 ## Direct API Calls
 
-Nitro allows 'direct' calling of routes via the globally-available [`$fetch`](/docs/api/utils/dollarfetch) helper. This will make an API call to the server if run on the browser, but will directly call the relevant function if run on the server, **saving an additional API call**.
+Nitro allows 'direct' calling of routes via the globally-available [`$fetch`](/docs/4.x/api/utils/dollarfetch) helper. This will make an API call to the server if run on the browser, but will directly call the relevant function if run on the server, **saving an additional API call**.
 
-[`$fetch`](/docs/api/utils/dollarfetch) API is using [ofetch](https://github.com/unjs/ofetch), with key features including:
+[`$fetch`](/docs/4.x/api/utils/dollarfetch) API is using [ofetch](https://github.com/unjs/ofetch), with key features including:
 
 - Automatic parsing of JSON responses (with access to raw response if needed)
 - Request body and params are automatically handled, with correct `Content-Type` headers
@@ -45,7 +45,7 @@ For more information on `$fetch` features, check out [ofetch](https://github.com
 
 When using API routes (or middleware), Nitro will generate typings for these routes as long as you are returning a value instead of using `res.end()` to send a response.
 
-You can access these types when using [`$fetch()`](/docs/api/utils/dollarfetch) or [`useFetch()`](/docs/api/composables/use-fetch).
+You can access these types when using [`$fetch()`](/docs/4.x/api/utils/dollarfetch) or [`useFetch()`](/docs/4.x/api/composables/use-fetch).
 
 ## Standalone Server
 
@@ -53,7 +53,7 @@ Nitro produces a standalone server dist that is independent of `node_modules`.
 
 The server in Nuxt 2 is not standalone and requires part of Nuxt core to be involved by running `nuxt start` (with the [`nuxt-start`](https://www.npmjs.com/package/nuxt-start) or [`nuxt`](https://www.npmjs.com/package/nuxt) distributions) or custom programmatic usage, which is fragile and prone to breakage and not suitable for serverless and service worker environments.
 
-Nuxt generates this dist when running `nuxt build` into a [`.output`](/docs/guide/directory-structure/output) directory.
+Nuxt generates this dist when running `nuxt build` into a [`.output`](/docs/4.x/guide/directory-structure/output) directory.
 
 The output contains runtime code to run your Nuxt server in any environment (including experimental browser service workers!) and serve your static files, making it a true hybrid framework for the JAMstack. In addition, Nuxt implements a native storage layer, supporting multi-source drivers and local assets.
 

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

@@ -7,7 +7,7 @@ description: "Nuxt provides a module system to extend the framework core and sim
 
 When developing production-grade applications with Nuxt you might find that the framework's core functionality is not enough. Nuxt can be extended with configuration options and plugins, but maintaining these customizations across multiple projects can be tedious, repetitive and time-consuming. On the other hand, supporting every project's needs out of the box would make Nuxt very complex and hard to use.
 
-This is one of the reasons why Nuxt provides a module system that makes it possible to extend the core. Nuxt modules are async functions that sequentially run when starting Nuxt in development mode using [`nuxt dev`](/docs/api/commands/dev) or building a project for production with [`nuxt build`](/docs/api/commands/build). They can override templates, configure webpack loaders, add CSS libraries, and perform many other useful tasks.
+This is one of the reasons why Nuxt provides a module system that makes it possible to extend the core. Nuxt modules are async functions that sequentially run when starting Nuxt in development mode using [`nuxt dev`](/docs/4.x/api/commands/dev) or building a project for production with [`nuxt build`](/docs/4.x/api/commands/build). They can override templates, configure webpack loaders, add CSS libraries, and perform many other useful tasks.
 
 Best of all, Nuxt modules can be distributed in npm packages. This makes it possible for them to be reused across projects and shared with the community, helping create an ecosystem of high-quality add-ons.
 
@@ -17,7 +17,7 @@ Explore Nuxt Modules
 
 ## Add Nuxt Modules
 
-Once you have installed the modules you can add them to your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file under the `modules` property. Module developers usually provide additional steps and details for usage.
+Once you have installed the modules you can add them to your [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file under the `modules` property. Module developers usually provide additional steps and details for usage.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({

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

@@ -32,7 +32,7 @@ export { a }
 
 Before ECMAScript Modules (ESM) became a standard (it took more than 10 years!), tooling like
 [webpack](https://webpack.js.org/guides/ecma-script-modules) and even languages like TypeScript started supporting so-called **ESM syntax**.
-However, there are some key differences with actual spec; here's [a helpful explainer](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive).
+However, there are some key differences with actual spec; here's [a helpful explainer](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/).
 
 ### What is 'Native' ESM?
 
@@ -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](#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/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](#default-exports) section)
+- Prefer named exports rather than default export. This helps reduce CJS conflicts. (see [Default exports](/docs/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/1.concepts/8.typescript.md

@@ -5,7 +5,7 @@ description: "Nuxt is fully typed and provides helpful shortcuts to ensure you h
 
 ## Type-checking
 
-By default, Nuxt doesn't check types when you run [`nuxt dev`](/docs/api/commands/dev) or [`nuxt build`](/docs/api/commands/build), for performance reasons.
+By default, Nuxt doesn't check types when you run [`nuxt dev`](/docs/4.x/api/commands/dev) or [`nuxt build`](/docs/4.x/api/commands/build), for performance reasons.
 
 To enable type-checking at build or development time, install `vue-tsc` and `typescript` as development dependency:
 
@@ -29,13 +29,13 @@ To enable type-checking at build or development time, install `vue-tsc` and `typ
 
 ::
 
-Then, run [`nuxt typecheck`](/docs/api/commands/typecheck) command to check your types:
+Then, run [`nuxt typecheck`](/docs/4.x/api/commands/typecheck) command to check your types:
 
 ```bash [Terminal]
 npx nuxt typecheck
 ```
 
-To enable type-checking at build or development time, you can also use the [`typescript.typeCheck`](/docs/api/nuxt-config#typecheck) option in your `nuxt.config` file:
+To enable type-checking at build or development time, you can also use the [`typescript.typeCheck`](/docs/4.x/api/nuxt-config#typecheck) option in your `nuxt.config` file:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -60,25 +60,25 @@ Some of the references in the file are to files that are only generated within y
 This file contains the recommended basic TypeScript configuration for your project, including resolved aliases injected by Nuxt or modules you are using, so you can get full type support and path auto-complete for aliases like `~/file` or `#build/file`.
 
 ::note
-Consider using the `imports` section of [nuxt.config](/docs/api/nuxt-config#imports) to include directories beyond the default ones. This can be useful for auto-importing types which you're using across your app.
+Consider using the `imports` section of [nuxt.config](/docs/4.x/api/nuxt-config#imports) to include directories beyond the default ones. This can be useful for auto-importing types which you're using across your app.
 ::
 
-[Read more about how to extend this configuration](/docs/guide/directory-structure/tsconfig).
+[Read more about how to extend this configuration](/docs/4.x/guide/directory-structure/tsconfig).
 
 ::tip{icon="i-lucide-video" to="https://youtu.be/umLI7SlPygY" target="_blank"}
 Watch a video from Daniel Roe explaining built-in Nuxt aliases.
 ::
 
 ::note
-Nitro also [auto-generates types](/docs/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/guide/directory-structure/app/composables), plus other core functionality.
+Nitro also [auto-generates types](/docs/4.x/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/4.x/guide/directory-structure/app/composables), plus other core functionality.
 ::
 
 ::note
-For backward compatibility, Nuxt still generates `./.nuxt/tsconfig.json`. However, we recommend using [TypeScript project references](/docs/guide/directory-structure/tsconfig) with the new configuration files (`.nuxt/tsconfig.app.json`, `.nuxt/tsconfig.server.json`, etc.) for better type safety and performance.
+For backward compatibility, Nuxt still generates `./.nuxt/tsconfig.json`. However, we recommend using [TypeScript project references](/docs/4.x/guide/directory-structure/tsconfig) with the new configuration files (`.nuxt/tsconfig.app.json`, `.nuxt/tsconfig.server.json`, etc.) for better type safety and performance.
 
 If you do extend from `./.nuxt/tsconfig.json`, keep in mind that all options will be overwritten by those defined in your `tsconfig.json`. Overwriting options such as `"compilerOptions.paths"` with your own configuration will lead TypeScript to not factor in the module resolutions, which can cause module resolutions such as `#imports` to not be recognized.
 
-In case you need to extend options further, you can use the [`alias` property](/docs/api/nuxt-config#alias) within your `nuxt.config`. Nuxt will pick them up and extend the generated TypeScript configurations accordingly.
+In case you need to extend options further, you can use the [`alias` property](/docs/4.x/api/nuxt-config#alias) within your `nuxt.config`. Nuxt will pick them up and extend the generated TypeScript configurations accordingly.
 ::
 
 ## Project References

package/2.guide/2.directory-structure/0.nuxt.md

@@ -6,7 +6,7 @@ navigation.icon: i-lucide-folder
 ---
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing the dev build output to your repository.
+This directory should be added to your [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) file to avoid pushing the dev build output to your repository.
 ::
 
 This directory is interesting if you want to learn more about the files Nuxt generates based on your directory structure.
@@ -16,5 +16,5 @@ Nuxt also provides a Virtual File System (VFS) for modules to add templates to t
 You can explore the generated files by opening the [Nuxt DevTools](https://devtools.nuxt.com) in development mode and navigating to the **Virtual Files** tab.
 
 ::warning
-You should not touch any files inside since the whole directory will be re-created when running [`nuxt dev`](/docs/api/commands/dev).
+You should not touch any files inside since the whole directory will be re-created when running [`nuxt dev`](/docs/4.x/api/commands/dev).
 ::

package/2.guide/2.directory-structure/0.output.md

@@ -6,7 +6,7 @@ navigation.icon: i-lucide-folder
 ---
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing the build output to your repository.
+This directory should be added to your [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) file to avoid pushing the build output to your repository.
 ::
 
 Use this directory to deploy your Nuxt application to production.
@@ -14,5 +14,5 @@ Use this directory to deploy your Nuxt application to production.
 :read-more{to="/docs/getting-started/deployment"}
 
 ::warning
-You should not touch any files inside since the whole directory will be re-created when running [`nuxt build`](/docs/api/commands/build).
+You should not touch any files inside since the whole directory will be re-created when running [`nuxt build`](/docs/4.x/api/commands/build).
 ::

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

@@ -9,8 +9,8 @@ The directory usually contains the following types of files:
 
 - Stylesheets (CSS, SASS, etc.)
 - Fonts
-- Images that won't be served from the [`public/`](/docs/guide/directory-structure/public) directory.
+- Images that won't be served from the [`public/`](/docs/4.x/guide/directory-structure/public) directory.
 
-If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/guide/directory-structure/public) directory.
+If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/4.x/guide/directory-structure/public) directory.
 
 :read-more{to="/docs/getting-started/assets"}

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

@@ -344,7 +344,7 @@ Any nested directories need to be added first as they are scanned in order.
 
 ## npm Packages
 
-If you want to auto-import components from an npm package, you can use [`addComponent`](/docs/api/kit/components#addcomponent) in a [local module](/docs/guide/directory-structure/modules) to register them.
+If you want to auto-import components from an npm package, you can use [`addComponent`](/docs/4.x/api/kit/components#addcomponent) in a [local module](/docs/4.x/guide/directory-structure/modules) to register them.
 
 ::code-group
 
@@ -376,7 +376,7 @@ export default defineNuxtModule({
 
 ## Component Extensions
 
-By default, any file with an extension specified in the [extensions key of `nuxt.config.ts`](/docs/api/nuxt-config#extensions) is treated as a component.
+By default, any file with an extension specified in the [extensions key of `nuxt.config.ts`](/docs/4.x/api/nuxt-config#extensions) is treated as a component.
 If you need to restrict the file extensions that should be registered as components, you can use the extended form of the components directory declaration and its `extensions` key:
 
 ```ts twoslash [nuxt.config.ts]
@@ -424,7 +424,7 @@ You can also achieve a similar result with the `<ClientOnly>` component.
 
 Server components allow server-rendering individual components within your client-side apps. It's possible to use server components within Nuxt, even if you are generating a static site. That makes it possible to build complex sites that mix dynamic components, server-rendered HTML and even static chunks of markup.
 
-Server components can either be used on their own or paired with a [client component](#paired-with-a-client-component).
+Server components can either be used on their own or paired with a [client component](/docs/guide/directory-structure/app/components#paired-with-a-client-component).
 
 :video-accordion{title="Watch Learn Vue video about Nuxt Server Components" videoId="u1yyXe86xJM"}
 
@@ -467,7 +467,7 @@ Now you can register server-only components with the `.server` suffix and use th
 </template>
 ```
 
-Server-only components use [`<NuxtIsland>`](/docs/api/components/nuxt-island) under the hood, meaning that `lazy` prop and `#fallback` slot are both passed down to it.
+Server-only components use [`<NuxtIsland>`](/docs/4.x/api/components/nuxt-island) under the hood, meaning that `lazy` prop and `#fallback` slot are both passed down to it.
 
 ::warning
 Server components (and islands) must have a single root element. (HTML comments are considered elements as well.)
@@ -554,7 +554,7 @@ There are a number of components that Nuxt provides, including `<ClientOnly>` an
 
 Making Vue component libraries with automatic tree-shaking and component registration is super easy. ✨
 
-You can use the [`addComponentsDir`](/docs/api/kit/components#addcomponentsdir) method provided from the `@nuxt/kit` to register your components directory in your Nuxt module.
+You can use the [`addComponentsDir`](/docs/4.x/api/kit/components#addcomponentsdir) method provided from the `@nuxt/kit` to register your components directory in your Nuxt module.
 
 Imagine a directory structure like this:
 

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

@@ -50,7 +50,7 @@ The `app/composables/` directory in Nuxt does not provide any additional reactiv
 
 Under the hood, Nuxt auto generates the file `.nuxt/imports.d.ts` to declare the types.
 
-Be aware that you have to run [`nuxt prepare`](/docs/api/commands/prepare), [`nuxt dev`](/docs/api/commands/dev) or [`nuxt build`](/docs/api/commands/build) in order to let Nuxt generate the types.
+Be aware that you have to run [`nuxt prepare`](/docs/4.x/api/commands/prepare), [`nuxt dev`](/docs/4.x/api/commands/dev) or [`nuxt build`](/docs/4.x/api/commands/build) in order to let Nuxt generate the types.
 
 ::note
 If you create a composable without having the dev server running, TypeScript will throw an error, such as `Cannot find name 'useBar'.`
@@ -71,7 +71,7 @@ export const useFoo = () => {
 
 ### Access plugin injections
 
-You can access [plugin injections](/docs/guide/directory-structure/plugins#providing-helpers) from composables:
+You can access [plugin injections](/docs/4.x/guide/directory-structure/plugins#providing-helpers) from composables:
 
 ```js [app/composables/test.ts]
 export const useHello = () => {
@@ -82,7 +82,7 @@ export const useHello = () => {
 
 ## How Files Are Scanned
 
-Nuxt only scans files at the top level of the [`app/composables/` directory](/docs/guide/directory-structure/app/composables), e.g.:
+Nuxt only scans files at the top level of the [`app/composables/` directory](/docs/4.x/guide/directory-structure/app/composables), e.g.:
 
 ```bash [Directory Structure]
 -| composables/

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

@@ -11,7 +11,7 @@ For best performance, components placed in this directory will be automatically
 
 ## Enable Layouts
 
-Layouts are enabled by adding [`<NuxtLayout>`](/docs/api/components/nuxt-layout) to your [`app.vue`](/docs/guide/directory-structure/app):
+Layouts are enabled by adding [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-layout) to your [`app.vue`](/docs/4.x/guide/directory-structure/app):
 
 ```vue [app/app.vue]
 <template>
@@ -22,7 +22,7 @@ Layouts are enabled by adding [`<NuxtLayout>`](/docs/api/components/nuxt-layout)
 ```
 
 To use a layout:
-- Set a `layout` property in your page with [definePageMeta](/docs/api/utils/define-page-meta).
+- Set a `layout` property in your page with [definePageMeta](/docs/4.x/api/utils/define-page-meta).
 - Set the `name` prop of `<NuxtLayout>`.
 
 ::note
@@ -34,7 +34,7 @@ If no layout is specified, `app/layouts/default.vue` will be used.
 ::
 
 ::important
-If you only have a single layout in your application, we recommend using [`app.vue`](/docs/guide/directory-structure/app) instead.
+If you only have a single layout in your application, we recommend using [`app.vue`](/docs/4.x/guide/directory-structure/app) instead.
 ::
 
 ::important
@@ -78,7 +78,7 @@ definePageMeta({
 Learn more about `definePageMeta`.
 ::
 
-You can directly override the default layout for all pages using the `name` property of [`<NuxtLayout>`](/docs/api/components/nuxt-layout):
+You can directly override the default layout for all pages using the `name` property of [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-layout):
 
 ```vue [app/app.vue]
 <script setup lang="ts">
@@ -113,7 +113,7 @@ File | Layout Name
 
 ## Changing the Layout Dynamically
 
-You can also use the [`setPageLayout`](/docs/api/utils/set-page-layout) helper to change the layout dynamically:
+You can also use the [`setPageLayout`](/docs/4.x/api/utils/set-page-layout) helper to change the layout dynamically:
 
 ```vue twoslash
 <script setup lang="ts">
@@ -176,5 +176,5 @@ definePageMeta({
 ::
 
 ::important
-If you use `<NuxtLayout>` within your pages, make sure it is not the root element (or [disable layout/page transitions](/docs/getting-started/transitions#disable-transitions)).
+If you use `<NuxtLayout>` within your pages, make sure it is not the root element (or [disable layout/page transitions](/docs/4.x/getting-started/transitions#disable-transitions)).
 ::

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

@@ -13,14 +13,14 @@ There are three kinds of route middleware:
 2. Named route middleware, placed in the `app/middleware/` and automatically loaded via asynchronous import when used on a page.
 3. Global route middleware, placed in the `app/middleware/` with a `.global` suffix and is run on every route change.
 
-The first two kinds of route middleware can be defined in [`definePageMeta`](/docs/api/utils/define-page-meta).
+The first two kinds of route middleware can be defined in [`definePageMeta`](/docs/4.x/api/utils/define-page-meta).
 
 ::note
 Name of middleware are normalized to kebab-case: `myMiddleware` becomes `my-middleware`.
 ::
 
 ::note
-Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from [server middleware](/docs/guide/directory-structure/server#server-middleware), which are run in the Nitro server part of your app.
+Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from [server middleware](/docs/4.x/guide/directory-structure/server#server-middleware), which are run in the Nitro server part of your app.
 ::
 
 :video-accordion{title="Watch a video from Vue School on all 3 kinds of middleware" videoId="761471577" platform="vimeo"}
@@ -45,8 +45,8 @@ export default defineNuxtRouteMiddleware((to, from) => {
 
 Nuxt provides two globally available helpers that can be returned directly from the middleware.
 
-1. [`navigateTo`](/docs/api/utils/navigate-to) - Redirects to the given route
-2. [`abortNavigation`](/docs/api/utils/abort-navigation) - Aborts the navigation, with an optional error message.
+1. [`navigateTo`](/docs/4.x/api/utils/navigate-to) - Redirects to the given route
+2. [`abortNavigation`](/docs/4.x/api/utils/abort-navigation) - Aborts the navigation, with an optional error message.
 
 Unlike [navigation guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) from `vue-router`, a third `next()` argument is not passed, and **redirect or route cancellation is handled by returning a value from the middleware**.
 
@@ -139,12 +139,12 @@ export default defineNuxtRouteMiddleware(to => {
 This is true even if you throw an error in your middleware on the server, and an error page is rendered. The middleware will still run again in the browser.
 
 ::note
-Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](/docs/getting-started/error-handling#useerror) in middleware to check if an error is being handled.
+Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](/docs/4.x/getting-started/error-handling#useerror) in middleware to check if an error is being handled.
 ::
 
 ## Accessing Route in Middleware
 
-Always use the `to` and `from` parameters in your middleware to access the next and previous routes. Avoid using the [`useRoute()`](/docs/api/composables/use-route) composable in this context altogether.
+Always use the `to` and `from` parameters in your middleware to access the next and previous routes. Avoid using the [`useRoute()`](/docs/4.x/api/composables/use-route) composable in this context altogether.
 There is **no concept of a "current route" in middleware**, as middleware can abort a navigation or redirect to a different route. The `useRoute()` composable will always be inaccurate in this context.  
 
 ::warning
@@ -182,7 +182,7 @@ export function callsRouteInternally() {
 
 ## Adding Middleware Dynamically
 
-It is possible to add global or named route middleware manually using the [`addRouteMiddleware()`](/docs/api/utils/add-route-middleware) helper function, such as from within a plugin.
+It is possible to add global or named route middleware manually using the [`addRouteMiddleware()`](/docs/4.x/api/utils/add-route-middleware) helper function, such as from within a plugin.
 
 ```ts twoslash
 export default defineNuxtPlugin(() => {