@nuxt/docs 3.17.4 → 3.17.6

package/1.getting-started/01.introduction.md

@@ -72,9 +72,9 @@ A module system allows to extend Nuxt with custom features and integrations with
 
 Nuxt is composed of different [core packages](https://github.com/nuxt/nuxt/tree/main/packages):
 
-- Core Engine: [nuxt](https://github.com/nuxt/nuxt/tree/main/packages/nuxt)
-- Bundlers: [@nuxt/vite-builder](https://github.com/nuxt/nuxt/tree/main/packages/vite) and [@nuxt/webpack-builder](https://github.com/nuxt/nuxt/tree/main/packages/webpack)
-- Command line interface: [nuxi](https://github.com/nuxt/nuxt/tree/main/packages/nuxi)
+- Core engine: [nuxt](https://github.com/nuxt/nuxt/tree/main/packages/nuxt)
+- Bundlers: [@nuxt/vite-builder](https://github.com/nuxt/nuxt/tree/main/packages/vite), [@nuxt/rspack-builder](https://github.com/nuxt/nuxt/tree/main/packages/rspack) and [@nuxt/webpack-builder](https://github.com/nuxt/nuxt/tree/main/packages/webpack)
+- Command line interface: [@nuxt/cli](https://github.com/nuxt/cli)
 - Server engine: [nitro](https://github.com/nitrojs/nitro)
 - Development kit: [@nuxt/kit](https://github.com/nuxt/nuxt/tree/main/packages/kit)
 

package/1.getting-started/03.configuration.md

@@ -50,7 +50,7 @@ export default defineNuxtConfig({
 })
 ```
 
-To select an environment when running a Nuxt CLI command, simply pass the name to the `--envName` flag, like so: `nuxi build --envName staging`.
+To select an environment when running a Nuxt CLI command, simply pass the name to the `--envName` flag, like so: `nuxt build --envName staging`.
 
 To learn more about the mechanism behind these overrides, please refer to the `c12` documentation on [environment-specific configuration](https://github.com/unjs/c12?tab=readme-ov-file#environment-specific-configuration).
 

package/1.getting-started/07.routing.md

@@ -94,7 +94,7 @@ There are three kinds of route middleware:
 
 1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used.
 2. Named route middleware, which are placed in the [`middleware/`](/docs/guide/directory-structure/middleware) directory and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
-3. Global route middleware, which are placed in the [`middleware/` directory](/docs/guide/directory-structure/middleware) (with a `.global` suffix) and will be automatically run on every route change.
+3. Global route middleware, which are placed in the [`middleware/`](/docs/guide/directory-structure/middleware) directory (with a `.global` suffix) and will be automatically run on every route change.
 
 Example of an `auth` middleware protecting the `/dashboard` page:
 

package/1.getting-started/10.data-fetching.md

@@ -230,7 +230,7 @@ Read more about `useAsyncData`.
 
 - `data`: the result of the asynchronous function that is passed in.
 - `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
-- `clear`: a function that can be used to set `data` to `undefined`, set `error` to `null`, set `status` to `idle`, and mark any currently pending requests as cancelled.
+- `clear`: a function that can be used to set `data` to `undefined` (or the value of `options.default()` if provided), set `error` to `null`, set `status` to `idle`, and mark any currently pending requests as cancelled.
 - `error`: an error object if the data fetching failed.
 - `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
 

package/1.getting-started/11.state-management.md

@@ -84,7 +84,7 @@ This is similar to the [`nuxtServerInit` action](https://v2.nuxt.com/docs/direct
 In this example, we leverage the [Pinia module](/modules/pinia) to create a global store and use it across the app.
 
 ::important
-Make sure to install the Pinia module with `npx nuxi@latest module add pinia` or follow the [module's installation steps](https://pinia.vuejs.org/ssr/nuxt.html#Installation).
+Make sure to install the Pinia module with `npx nuxt module add pinia` or follow the [module's installation steps](https://pinia.vuejs.org/ssr/nuxt.html#Installation).
 ::
 
 ::code-group

package/1.getting-started/12.error-handling.md

@@ -99,7 +99,7 @@ const handleError = () => clearError({ redirect: '/' })
 
 <template>
   <div>
-    <h2>{{ error.statusCode }}</h2>
+    <h2>{{ error?.statusCode }}</h2>
     <button @click="handleError">Clear errors</button>
   </div>
 </template>

package/1.getting-started/13.server.md

@@ -18,7 +18,7 @@ Using Nitro gives Nuxt superpowers:
 - Universal deployment on any provider (many zero-config)
 - Hybrid rendering
 
-Nitro is internally using [h3](https://github.com/unjs/h3), a minimal H(TTP) framework built for high performance and portability.
+Nitro is internally using [h3](https://github.com/h3js/h3), a minimal H(TTP) framework built for high performance and portability.
 
 :video-accordion{title="Watch a video from Alexander Lichter to understand the responsibilities of Nuxt and Nitro in your application" videoId="DkvgJa-X31k"}
 

package/1.getting-started/15.prerendering.md

@@ -10,26 +10,26 @@ Nuxt allows for select pages from your application to be rendered at build time.
 
 ## Crawl-based Pre-rendering
 
-Use the [`nuxi generate` command](/docs/api/commands/generate) to build and pre-render your application using the [Nitro](/docs/guide/concepts/server-engine) crawler. This command is similar to `nuxt build` with the `nitro.static` option set to `true`, or running `nuxt build --prerender`.
+Use the [`nuxt generate` command](/docs/api/commands/generate) to build and pre-render your application using the [Nitro](/docs/guide/concepts/server-engine) crawler. This command is similar to `nuxt build` with the `nitro.static` option set to `true`, or running `nuxt build --prerender`.
 
 This will build your site, stand up a nuxt instance, and, by default, prerender the root page `/` along with any of your site's pages it links to, any of your site's pages they link to, and so on.
 
 ::code-group{sync="pm"}
 
 ```bash [npm]
-npx nuxi generate
+npx nuxt generate
 ```
 
 ```bash [yarn]
-yarn dlx nuxi generate
+yarn nuxt generate
 ```
 
 ```bash [pnpm]
-pnpm dlx nuxi generate
+pnpm nuxt generate
 ```
 
 ```bash [bun]
-bun x nuxi generate
+bun x nuxt generate
 ```
 
 ::
@@ -45,8 +45,8 @@ Working of the Nitro crawler:
 
 This is important to understand since pages that are not linked to a discoverable page can't be pre-rendered automatically.
 
-::read-more{to="/docs/api/commands/generate#nuxi-generate"}
-Read more about the `nuxi generate` command.
+::read-more{to="/docs/api/commands/generate#nuxt-generate"}
+Read more about the `nuxt generate` command.
 ::
 
 ### Selective Pre-rendering
@@ -135,7 +135,7 @@ export default defineNuxtConfig({
 });
 ```
 
-## Runtime prerender configuration
+## Runtime Prerender Configuration
 
 ### `prerenderRoutes`
 

package/1.getting-started/16.deployment.md

@@ -70,14 +70,14 @@ By default, the workload gets distributed to the workers with the round robin st
 
 There are two ways to deploy a Nuxt application to any static hosting services:
 
-- Static site generation (SSG) with `ssr: true` pre-renders routes of your application at build time. (This is the default behavior when running `nuxi generate`.) It will also generate `/200.html` and `/404.html` single-page app fallback pages, which can render dynamic routes or 404 errors on the client (though you may need to configure this on your static host).
+- Static site generation (SSG) with `ssr: true` pre-renders routes of your application at build time. (This is the default behavior when running `nuxt generate`.) It will also generate `/200.html` and `/404.html` single-page app fallback pages, which can render dynamic routes or 404 errors on the client (though you may need to configure this on your static host).
 - Alternatively, you can prerender your site with `ssr: false` (static single-page app). This will produce HTML pages with an empty `<div id="__nuxt"></div>` where your Vue app would normally be rendered. You will lose many SEO benefits of prerendering your site, so it is suggested instead to use [`<ClientOnly>`](/docs/api/components/client-only) to wrap the portions of your site that cannot be server rendered (if any).
 
 :read-more{title="Nuxt prerendering" to="/docs/getting-started/prerendering"}
 
 ### Client-side Only Rendering
 
-If you don't want to pre-render your routes, another way of using static hosting is to set the `ssr` property to `false` in the `nuxt.config` file. The `nuxi generate` command will then output an `.output/public/index.html` entrypoint and JavaScript bundles like a classic client-side Vue.js application.
+If you don't want to pre-render your routes, another way of using static hosting is to set the `ssr` property to `false` in the `nuxt.config` file. The `nuxt generate` command will then output an `.output/public/index.html` entrypoint and JavaScript bundles like a classic client-side Vue.js application.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({

package/1.getting-started/18.upgrade.md

@@ -8,24 +8,24 @@ navigation.icon: i-lucide-circle-arrow-up
 
 ### Latest release
 
-To upgrade Nuxt to the [latest release](https://github.com/nuxt/nuxt/releases), use the `nuxi upgrade` command.
+To upgrade Nuxt to the [latest release](https://github.com/nuxt/nuxt/releases), use the `nuxt upgrade` command.
 
 ::code-group{sync="pm"}
 
 ```bash [npm]
-npx nuxi upgrade
+npx nuxt upgrade
 ```
 
 ```bash [yarn]
-yarn dlx nuxi upgrade
+yarn nuxt upgrade
 ```
 
 ```bash [pnpm]
-pnpm dlx nuxi upgrade
+pnpm nuxt upgrade
 ```
 
 ```bash [bun]
-bun x nuxi upgrade
+bun x nuxt upgrade
 ```
 
 ::
@@ -40,7 +40,7 @@ The nightly release channel `latest` tag is currently tracking the Nuxt v4 branc
 
 ## Testing Nuxt 4
 
-The release date of Nuxt 4 is **to be announced**. It is dependent on having enough time after Nitro's major release to be properly tested in the community. You can follow progress towards Nitro's release in [this PR](https://github.com/nitrojs/nitro/pull/2521).
+Nuxt 4 is **scheduled for release in Q2 2025**. It will include all the features currently available through `compatibilityVersion: 4`.
 
 Until the release, it is possible to test many of Nuxt 4's breaking changes from Nuxt version 3.12+.
 
@@ -1016,7 +1016,7 @@ Components Auto Import   | ✅             | ✅                | ✅
 Auto Imports             | ❌             | ✅                | ✅
 webpack                  | 4              | 4                 | 5
 Vite                     | ⚠️ Partial      | 🚧 Partial        | ✅
-Nuxi CLI                 | ❌ Old         | ✅ nuxi           | ✅ nuxi
+Nuxt CLI                 | ❌ Old         | ✅ nuxt           | ✅ nuxt
 Static sites             | ✅             | ✅                | ✅
 
 ## Nuxt 2 to Nuxt 3+

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

@@ -76,17 +76,27 @@ Any redirection on the server will result in a `Location:` header being sent to
 
 :read-more{to="/docs/guide/directory-structure/middleware"}
 
-### Step 6: Setup Page and Components
+### Step 6: Render Page and Components
 
-Nuxt initializes the page and its components during this step and fetches any required data with `useFetch` and `useAsyncData`. Since there are no dynamic updates and no DOM operations occur on the server, Vue lifecycle hooks such as `onBeforeMount`, `onMounted`, and subsequent hooks are **NOT** executed during SSR.
+Nuxt renders the page and its components and fetches any required data with `useFetch` and `useAsyncData` during this step. Since there are no dynamic updates and no DOM operations occur on the server, Vue lifecycle hooks such as `onBeforeMount`, `onMounted`, and subsequent hooks are **NOT** executed during SSR.
+
+By default, Vue pauses dependency tracking during SSR for better performance.
+
+::callout{icon="i-lucide-lightbulb"}
+There is no reactivity on the server side because Vue SSR renders the app top-down as static HTML, making it impossible to go back and modify content that has already been rendered.
+::
 
 ::important
 You should avoid code that produces side effects that need cleanup in root scope of `<script setup>`. An example of such side effects is setting up timers with `setInterval`. In client-side only code we may setup a timer and then tear it down in `onBeforeUnmount` or `onUnmounted`. However, because the unmount hooks will never be called during SSR, the timers will stay around forever. To avoid this, move your side-effect code into `onMounted` instead.
 ::
 
-### Step 7: Render and Generate HTML Output
+::tip{icon="i-lucide-video" to="https://youtu.be/dZSNW07sO-A" target="_blank"}
+Watch a video from Daniel Roe explaining Server Rendering and Global State.
+::
+
+### Step 7: Generate HTML Output
 
-After all components are initialized and data is fetched, Nuxt combines the components with settings from `unhead` to generate a complete HTML document. This HTML, along with the associated data, is sent back to the client to complete the SSR process.
+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.

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

@@ -96,10 +96,10 @@ If you do use `ssr: false`, you should also place an HTML file in `~/app/spa-loa
 
 ### Deploying a Static Client-Rendered App
 
-If you deploy your app to [static hosting](/docs/getting-started/deployment#static-hosting) with the `nuxi generate` or `nuxi 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/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 `nuxi generate` or `nuxi 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 `nuxi build` instead.
+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.
 ::
 
 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.

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/unjs/h3).
+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).
 
 Key features include:
 
@@ -24,7 +24,7 @@ Key features include:
 - Handlers can return promises, which will be awaited (`res.end()` and `next()` are also supported)
 - Helper functions for body parsing, cookie handling, redirects, headers and more
 
-Check out [the h3 docs](https://github.com/unjs/h3) for more information.
+Check out [the h3 docs](https://github.com/h3js/h3) for more information.
 
 ::read-more{to="/docs/guide/directory-structure/server#server-routes"}
 Learn more about the API layer in the `server/` directory.

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 [`nuxi dev`](/docs/api/commands/dev) or building a project for production with [`nuxi 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/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.
 
 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.
 

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 [`nuxi dev`](/docs/api/commands/dev) or [`nuxi build`](/docs/api/commands/build), for performance reasons.
+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.
 
 To enable type-checking at build or development time, install `vue-tsc` and `typescript` as development dependency:
 
@@ -29,10 +29,10 @@ To enable type-checking at build or development time, install `vue-tsc` and `typ
 
 ::
 
-Then, run [`nuxi typecheck`](/docs/api/commands/typecheck) command to check your types:
+Then, run [`nuxt typecheck`](/docs/api/commands/typecheck) command to check your types:
 
 ```bash [Terminal]
-npx nuxi typecheck
+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:
@@ -47,13 +47,13 @@ export default defineNuxtConfig({
 
 ## Auto-generated Types
 
-When you run `nuxi dev` or `nuxi build`, Nuxt generates the following files for IDE type support (and type checking):
+When you run `nuxt dev` or `nuxt build`, Nuxt generates the following files for IDE type support (and type checking):
 
 ### `.nuxt/nuxt.d.ts`
 
 This file contains the types of any modules you are using, as well as the key types that Nuxt requires. Your IDE should recognize these types automatically.
 
-Some of the references in the file are to files that are only generated within your `buildDir` (`.nuxt`) and therefore for full typings, you will need to run `nuxi dev` or `nuxi build`.
+Some of the references in the file are to files that are only generated within your `buildDir` (`.nuxt`) and therefore for full typings, you will need to run `nuxt dev` or `nuxt build`.
 
 ### `.nuxt/tsconfig.json`
 
@@ -77,7 +77,7 @@ Nitro also [auto-generates types](/docs/guide/concepts/server-engine#typed-api-r
 Keep in mind that all options extended from `./.nuxt/tsconfig.json` will be overwritten by the options 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 from `./.nuxt/tsconfig.json`. This can lead to module resolutions such as `#imports` not being recognized.
 :br :br
-In case you need to extend options provided by `./.nuxt/tsconfig.json` further, you can use the [`alias` property](/docs/api/nuxt-config#alias) within your `nuxt.config`. `nuxi` will pick them up and extend `./.nuxt/tsconfig.json` accordingly.
+In case you need to extend options provided by `./.nuxt/tsconfig.json` further, you can use the [`alias` property](/docs/api/nuxt-config#alias) within your `nuxt.config`. Nuxt will pick them up and extend `./.nuxt/tsconfig.json` accordingly.
 ::
 
 ## Strict Checks

package/2.guide/1.concepts/9.code-style.md

@@ -14,7 +14,7 @@ The module is designed for the [new ESLint flat config format](https://eslint.or
 ## Quick Setup
 
 ```bash
-npx nuxi module add eslint
+npx nuxt module add eslint
 ```
 
 Start your Nuxt app, a `eslint.config.mjs` file will be generated under your project root. You can customize it as needed.

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

@@ -50,7 +50,7 @@ The `composables/` directory in Nuxt does not provide any additional reactivity
 
 Under the hood, Nuxt auto generates the file `.nuxt/imports.d.ts` to declare the types.
 
-Be aware that you have to run [`nuxi prepare`](/docs/api/commands/prepare), [`nuxi dev`](/docs/api/commands/dev) or [`nuxi build`](/docs/api/commands/build) in order to let Nuxt generate 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.
 
 ::note
 If you create a composable without having the dev server running, TypeScript will throw an error, such as `Cannot find name 'useBar'.`

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

@@ -21,7 +21,7 @@ Learn more in **Nuxt Content** documentation.
 Install the `@nuxt/content` module in your project as well as adding it to your `nuxt.config.ts` with one command:
 
 ```bash [Terminal]
-npx nuxi module add content
+npx nuxt module add content
 ```
 
 ## Create Content

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

@@ -335,6 +335,10 @@ You may define a name for this page's route.
 
 You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. See [the `vue-router` docs](https://router.vuejs.org/guide/essentials/route-matching-syntax.html#custom-regex-in-params) for more information.
 
+#### `props`
+
+Allows accessing the route `params` as props passed to the page component. See[the `vue-router` docs](https://router.vuejs.org/guide/essentials/passing-props) for more information.
+
 ### Typing Custom Metadata
 
 If you add custom metadata for your pages, you may wish to do so in a type-safe way. It is possible to augment the type of the object accepted by `definePageMeta`:
@@ -401,7 +405,7 @@ You can define a page as [client only](/docs/guide/directory-structure/component
 
 You can define a page as [server only](/docs/guide/directory-structure/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.
 
-::alert{type=warning}
+::warning
 Server-only pages must have a single root element. (HTML comments are considered elements as well.)
 ::
 

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

@@ -234,10 +234,6 @@ declare module 'vue' {
 export {}
 ```
 
-::note
-If you are using WebStorm, you may need to augment `@vue/runtime-core` until [this issue](https://youtrack.jetbrains.com/issue/WEB-59818/VUE-TypeScript-WS-PS-does-not-correctly-display-type-of-globally-injected-properties) is resolved.
-::
-
 ## Vue Plugins
 
 If you want to use Vue plugins, like [vue-gtag](https://github.com/MatteoGabriele/vue-gtag) to add Google Analytics tags, you can use a Nuxt plugin to do so.

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

@@ -101,7 +101,7 @@ export default defineNitroPlugin((nitroApp) => {
 
 ## Server Utilities
 
-Server routes are powered by [unjs/h3](https://github.com/unjs/h3) which comes with a handy set of helpers.
+Server routes are powered by [h3js/h3](https://github.com/h3js/h3) which comes with a handy set of helpers.
 
 :read-more{to="https://www.jsdocs.io/package/h3#package-index-functions" title="Available H3 Request Helpers" target="_blank"}
 
@@ -144,7 +144,7 @@ To improve clarity within your IDE between the auto-imports from 'nitro' and 'vu
 }
 ```
 
-Currently, these values won't be respected when type checking ([`nuxi typecheck`](/docs/api/commands/typecheck)), but you should get better type hints in your IDE.
+Currently, these values won't be respected when type checking ([`nuxt typecheck`](/docs/api/commands/typecheck)), but you should get better type hints in your IDE.
 
 ## Recipes
 
@@ -448,7 +448,7 @@ export default fromNodeMiddleware((req, res) => {
 ```
 
 ::important
-Legacy support is possible using [unjs/h3](https://github.com/unjs/h3), but it is advised to avoid legacy handlers as much as you can.
+Legacy support is possible using [h3js/h3](https://github.com/h3js/h3), but it is advised to avoid legacy handlers as much as you can.
 ::
 
 ```ts [server/middleware/legacy.ts]

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

@@ -11,7 +11,7 @@ This file should be added to your [`.gitignore`](/docs/guide/directory-structure
 
 ## Dev, Build and Generate Time
 
-Nuxt CLI has built-in [dotenv](https://github.com/motdotla/dotenv) support in development mode and when running [`nuxi build`](/docs/api/commands/build) and [`nuxi 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/api/commands/build) and [`nuxt generate`](/docs/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.
 
@@ -25,10 +25,10 @@ Note that removing a variable from `.env` or removing the `.env` file entirely w
 
 ## Custom File
 
-If you want to use a different file - for example, to use `.env.local` or `.env.production` - you can do so by passing the `--dotenv` flag when using `nuxi`.
+If you want to use a different file - for example, to use `.env.local` or `.env.production` - you can do so by passing the `--dotenv` flag when using the Nuxt CLI.
 
 ```bash [Terminal]
-npx nuxi dev --dotenv .env.local
+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`.
@@ -57,7 +57,7 @@ Since `.env` files are not used in production, you must explicitly set environme
 
 ## Production Preview
 
-For local production preview purpose, we recommend using [`nuxi 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/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/3.going-further/1.experimental-features.md

@@ -75,7 +75,7 @@ export default defineNuxtConfig({
 
 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 immediatly, 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/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/guide/directory-structure/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`.
 
@@ -438,6 +438,7 @@ package-lock.json
 yarn.lock
 pnpm-lock.yaml
 tsconfig.json
+bun.lock
 bun.lockb
 ```
 

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

@@ -7,7 +7,7 @@ This guide helps you better understand Nuxt internals to develop new solutions a
 
 ## The Nuxt Interface
 
-When you start Nuxt in development mode with [`nuxi dev`](/docs/api/commands/dev) or building a production application with [`nuxi build`](/docs/api/commands/build),
+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),
 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)
 allowing different components to communicate with each other. You can think of it as **Builder Core**.
@@ -78,4 +78,4 @@ While both areas can be extended, that runtime context is isolated from build-ti
 
 `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.
 
-When building an application for production, `nuxi 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/guide/going-further/modules).

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

@@ -44,7 +44,7 @@ Instead of passing non-serializable objects or functions into your application f
 The most common way to provide configuration is by using [Environment Variables](https://medium.com/chingu/an-introduction-to-environment-variables-and-how-to-use-them-f602f66d15fa).
 
 ::note
-Nuxi 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**.
+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"}
 ::
 

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

@@ -32,7 +32,7 @@ Update `nuxt` dependency inside `package.json`:
 }
 ```
 
-Remove lockfile (`package-lock.json`, `yarn.lock`, `pnpm-lock.yaml`, or `bun.lockb`) and reinstall dependencies.
+Remove lockfile (`package-lock.json`, `yarn.lock`, `pnpm-lock.yaml`, `bun.lock` or `bun.lockb`) and reinstall dependencies.
 
 ## Opting Out
 
@@ -47,18 +47,14 @@ Update `nuxt` dependency inside `package.json`:
 }
 ```
 
-Remove lockfile (`package-lock.json`, `yarn.lock`, `pnpm-lock.yaml`, or `bun.lockb`) and reinstall dependencies.
+Remove lockfile (`package-lock.json`, `yarn.lock`, `pnpm-lock.yaml`, `bun.lock` or `bun.lockb`) and reinstall dependencies.
 
-## Using Nightly `nuxi`
-
-::note
-All cli dependencies are bundled because of the building method for reducing `nuxi` package size. :br You can get dependency updates and CLI improvements using the nightly release channel.
-::
+## Using Nightly `@nuxt/cli`
 
 To try the latest version of [nuxt/cli](https://github.com/nuxt/cli):
 
 ```bash [Terminal]
-npx nuxi-nightly@latest [command]
+npx @nuxt/cli-nightly@latest [command]
 ```
 
 ::read-more{to="/docs/api/commands"}

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

@@ -6,7 +6,7 @@ image: '/socials/module-author-guide.jpg'
 
 Nuxt's [configuration](/docs/api/nuxt-config) and [hooks](/docs/guide/going-further/hooks) systems make it possible to customize every aspect of Nuxt and add any integration you might need (Vue plugins, CMS, server routes, components, logging, etc.).
 
-**Nuxt Modules** are functions that sequentially run when starting Nuxt in development mode using `nuxi dev` or building a project for production with `nuxi build`.
+**Nuxt Modules** are functions that sequentially run when starting Nuxt in development mode using `nuxt dev` or building a project for production with `nuxt build`.
 With modules, you can encapsulate, properly test, and share custom solutions as npm packages without adding unnecessary boilerplate to your project, or requiring changes to Nuxt itself.
 
 ## Quick Start
@@ -59,7 +59,7 @@ You can interact with the playground like with any Nuxt application.
 - Build it with `npm run dev:build`
 
 ::note
-All other `nuxi` commands can be used against the `playground` directory (e.g. `nuxi <COMMAND> playground`). Feel free to declare additional `dev:*` scripts within your `package.json` referencing them for convenience.
+All other `nuxt` commands can be used against the `playground` directory (e.g. `nuxt <COMMAND> playground`). Feel free to declare additional `dev:*` scripts within your `package.json` referencing them for convenience.
 ::
 
 #### How to Test
@@ -230,8 +230,6 @@ Learn more about asset injection in [the recipes section](#recipes).
 Published modules cannot leverage auto-imports for assets within their runtime directory. Instead, they have to import them explicitly from `#imports` or alike.
 :br :br
 Indeed, auto-imports are not enabled for files within `node_modules` (the location where a published module will eventually live) for performance reasons.
-:br :br
-If you are using the module starter, auto-imports will not be enabled in your playground either.
 ::
 
 ### Tooling

package/2.guide/3.going-further/9.debugging.md

@@ -22,7 +22,7 @@ export default defineNuxtConfig({
 You can use [Node inspector](https://nodejs.org/en/learn/getting-started/debugging) to debug Nuxt server-side.
 
 ```bash
-nuxi dev --inspect
+nuxt dev --inspect
 ```
 This will start Nuxt in `dev` mode with debugger active. If everything is working correctly a Node.js icon will appear on your Chrome DevTools and you can attach to the debugger.
 
@@ -38,10 +38,6 @@ It is possible to debug your Nuxt app in your IDE while you are developing it.
 
 You may need to update the config below with a path to your web browser. For more information, visit the [VS Code documentation about debug configuration](https://go.microsoft.com/fwlink/?linkid=830387).
 
-::important
-If you use `pnpm`, you will need to have `nuxi` installed as a devDependency for the configuration below to work.
-::
-
 ```json5
 {
   // Use IntelliSense to learn about possible attributes.

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

@@ -11,10 +11,10 @@ The module uses secured & sealed cookies to store session data, so you don't nee
 
 ## Install nuxt-auth-utils
 
-Install the `nuxt-auth-utils` module using the `nuxi` CLI.
+Install the `nuxt-auth-utils` module using the `nuxt` CLI.
 
 ```bash [Terminal]
-npx nuxi@latest module add auth-utils
+npx nuxt module add auth-utils
 ```
 
 ::callout
@@ -162,7 +162,7 @@ export default defineNuxtRouteMiddleware(() => {
 
 ## Home Page
 
-Now that we have our app middleware to protect our routes, we can use it on our home page that display our authenticated user informations. If the user is not authenticated, they will be redirected to the login page.
+Now that we have our app middleware to protect our routes, we can use it on our home page that display our authenticated user information. If the user is not authenticated, they will be redirected to the login page.
 
 We'll use [`definePageMeta`](/docs/api/utils/define-page-meta) to apply the middleware to the route that we want to protect.
 

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

@@ -19,7 +19,7 @@ Learn more about the [`<picture>` tag on MDN](https://developer.mozilla.org/en-U
 In order to use `<NuxtPicture>` you should install and enable the Nuxt Image module:
 
 ```bash [Terminal]
-npx nuxi@latest module add image
+npx nuxt module add image
 ```
 
 ::read-more{to="https://image.nuxt.com/usage/nuxt-picture" target="_blank"}

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

@@ -51,6 +51,10 @@ In this example, we pass the `id` param to link to the route `~/pages/posts/[id]
 Check out the Pages panel in Nuxt DevTools to see the route name and the params it might take.
 ::
 
+::tip
+When you pass an object into the `to` prop, `<NuxtLink>` will inherit Vue Router’s handling of query parameters. Keys and values will be automatically encoded, so you don’t need to call `encodeURI` or `encodeURIComponent` manually.
+::
+
 ### Handling Static File and Cross-App Links
 
 By default, `<NuxtLink>` uses Vue Router's client side navigation for relative route. When linking to static files in the `/public` directory or to another application hosted on the same domain, it might result in unexpected 404 errors because they are not part of the client routes. In such cases, you can use the `external` prop with `<NuxtLink>` to bypass Vue Router's internal routing mechanism.