@nuxt/docs 3.17.4 → 4.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/1.getting-started/01.introduction.md +3 -3
  2. package/1.getting-started/03.configuration.md +1 -1
  3. package/1.getting-started/04.views.md +3 -1
  4. package/1.getting-started/06.styling.md +3 -1
  5. package/1.getting-started/07.routing.md +1 -1
  6. package/1.getting-started/11.state-management.md +1 -1
  7. package/1.getting-started/12.error-handling.md +1 -1
  8. package/1.getting-started/15.prerendering.md +7 -7
  9. package/1.getting-started/16.deployment.md +2 -2
  10. package/1.getting-started/17.testing.md +1 -1
  11. package/1.getting-started/18.upgrade.md +9 -6
  12. package/2.guide/1.concepts/3.rendering.md +2 -2
  13. package/2.guide/1.concepts/5.modules.md +1 -1
  14. package/2.guide/1.concepts/8.typescript.md +6 -6
  15. package/2.guide/1.concepts/9.code-style.md +1 -1
  16. package/2.guide/2.directory-structure/1.composables.md +1 -1
  17. package/2.guide/2.directory-structure/1.content.md +1 -1
  18. package/2.guide/2.directory-structure/1.pages.md +5 -1
  19. package/2.guide/2.directory-structure/1.server.md +1 -1
  20. package/2.guide/2.directory-structure/2.env.md +4 -4
  21. package/2.guide/3.going-further/1.events.md +1 -1
  22. package/2.guide/3.going-further/1.experimental-features.md +1 -53
  23. package/2.guide/3.going-further/1.internals.md +2 -2
  24. package/2.guide/3.going-further/10.runtime-config.md +1 -1
  25. package/2.guide/3.going-further/11.nightly-release-channel.md +2 -6
  26. package/2.guide/3.going-further/3.modules.md +3 -3
  27. package/2.guide/3.going-further/9.debugging.md +1 -5
  28. package/2.guide/4.recipes/4.sessions-and-authentication.md +3 -3
  29. package/3.api/1.components/10.nuxt-picture.md +1 -1
  30. package/3.api/1.components/9.nuxt-img.md +1 -1
  31. package/3.api/2.composables/use-async-data.md +1 -1
  32. package/3.api/2.composables/use-fetch.md +1 -1
  33. package/3.api/2.composables/use-preview-mode.md +3 -3
  34. package/3.api/4.commands/add.md +20 -20
  35. package/3.api/4.commands/analyze.md +2 -2
  36. package/3.api/4.commands/build-module.md +2 -2
  37. package/3.api/4.commands/build.md +2 -2
  38. package/3.api/4.commands/cleanup.md +2 -2
  39. package/3.api/4.commands/dev.md +3 -3
  40. package/3.api/4.commands/devtools.md +3 -3
  41. package/3.api/4.commands/generate.md +3 -3
  42. package/3.api/4.commands/info.md +2 -2
  43. package/3.api/4.commands/init.md +3 -3
  44. package/3.api/4.commands/module.md +8 -8
  45. package/3.api/4.commands/prepare.md +2 -2
  46. package/3.api/4.commands/preview.md +3 -3
  47. package/3.api/4.commands/typecheck.md +2 -2
  48. package/3.api/4.commands/upgrade.md +2 -2
  49. package/3.api/5.kit/11.nitro.md +1 -1
  50. package/3.api/5.kit/7.pages.md +1 -1
  51. package/3.api/6.advanced/1.hooks.md +1 -1
  52. package/3.api/6.nuxt-config.md +2956 -3
  53. package/5.community/4.contribution.md +1 -1
  54. package/5.community/7.changelog.md +1 -1
  55. package/7.migration/2.configuration.md +2 -2
  56. package/package.json +1 -1
package/1.getting-started/01.introduction.md CHANGED
@@ -72,9 +72,9 @@ A module system allows to extend Nuxt with custom features and integrations with
72
72
 
73
73
  Nuxt is composed of different [core packages](https://github.com/nuxt/nuxt/tree/main/packages):
74
74
 
75
- - Core Engine: [nuxt](https://github.com/nuxt/nuxt/tree/main/packages/nuxt)
76
- - 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)
77
- - Command line interface: [nuxi](https://github.com/nuxt/nuxt/tree/main/packages/nuxi)
75
+ - Core engine: [nuxt](https://github.com/nuxt/nuxt/tree/main/packages/nuxt)
76
+ - 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)
77
+ - Command line interface: [@nuxt/cli](https://github.com/nuxt/cli)
78
78
  - Server engine: [nitro](https://github.com/nitrojs/nitro)
79
79
  - Development kit: [@nuxt/kit](https://github.com/nuxt/nuxt/tree/main/packages/kit)
80
80
 
package/1.getting-started/03.configuration.md CHANGED
@@ -50,7 +50,7 @@ export default defineNuxtConfig({
50
50
  })
51
51
  ```
52
52
 
53
- To select an environment when running a Nuxt CLI command, simply pass the name to the `--envName` flag, like so: `nuxi build --envName staging`.
53
+ To select an environment when running a Nuxt CLI command, simply pass the name to the `--envName` flag, like so: `nuxt build --envName staging`.
54
54
 
55
55
  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).
56
56
 
package/1.getting-started/04.views.md CHANGED
@@ -148,7 +148,9 @@ If you only need to modify the `<head>`, you can refer to the [SEO and meta sect
148
148
  You can have full control over the HTML template by adding a Nitro plugin that registers a hook.
149
149
  The callback function of the `render:html` hook allows you to mutate the HTML before it is sent to the client.
150
150
 
151
- ```ts twoslash [server/plugins/extend-html.ts]
151
+ <!-- TODO: figure out how to use twoslash to inject types for a different context -->
152
+
153
+ ```ts [server/plugins/extend-html.ts]
152
154
  export default defineNitroPlugin((nitroApp) => {
153
155
  nitroApp.hooks.hook('render:html', (html, { event }) => {
154
156
  // This will be an object representation of the html template.
package/1.getting-started/06.styling.md CHANGED
@@ -153,7 +153,9 @@ If you need more advanced control, you can intercept the rendered html with a ho
153
153
 
154
154
  Create a plugin in `~/server/plugins/my-plugin.ts` like this:
155
155
 
156
- ```ts twoslash [server/plugins/my-plugin.ts]
156
+ <!-- TODO: figure out how to use twoslash to inject types for a different context -->
157
+
158
+ ```ts [server/plugins/my-plugin.ts]
157
159
  export default defineNitroPlugin((nitro) => {
158
160
  nitro.hooks.hook('render:html', (html) => {
159
161
  html.head.push('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">')
package/1.getting-started/07.routing.md CHANGED
@@ -94,7 +94,7 @@ There are three kinds of route middleware:
94
94
 
95
95
  1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used.
96
96
  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`.)
97
- 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.
97
+ 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.
98
98
 
99
99
  Example of an `auth` middleware protecting the `/dashboard` page:
100
100
 
package/1.getting-started/11.state-management.md CHANGED
@@ -84,7 +84,7 @@ This is similar to the [`nuxtServerInit` action](https://v2.nuxt.com/docs/direct
84
84
  In this example, we leverage the [Pinia module](/modules/pinia) to create a global store and use it across the app.
85
85
 
86
86
  ::important
87
- 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).
87
+ 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).
88
88
  ::
89
89
 
90
90
  ::code-group
package/1.getting-started/12.error-handling.md CHANGED
@@ -99,7 +99,7 @@ const handleError = () => clearError({ redirect: '/' })
99
99
 
100
100
  <template>
101
101
  <div>
102
- <h2>{{ error.statusCode }}</h2>
102
+ <h2>{{ error?.statusCode }}</h2>
103
103
  <button @click="handleError">Clear errors</button>
104
104
  </div>
105
105
  </template>
package/1.getting-started/15.prerendering.md CHANGED
@@ -10,26 +10,26 @@ Nuxt allows for select pages from your application to be rendered at build time.
10
10
 
11
11
  ## Crawl-based Pre-rendering
12
12
 
13
- 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`.
13
+ 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`.
14
14
 
15
15
  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.
16
16
 
17
17
  ::code-group{sync="pm"}
18
18
 
19
19
  ```bash [npm]
20
- npx nuxi generate
20
+ npx nuxt generate
21
21
  ```
22
22
 
23
23
  ```bash [yarn]
24
- yarn dlx nuxi generate
24
+ yarn nuxt generate
25
25
  ```
26
26
 
27
27
  ```bash [pnpm]
28
- pnpm dlx nuxi generate
28
+ pnpm nuxt generate
29
29
  ```
30
30
 
31
31
  ```bash [bun]
32
- bun x nuxi generate
32
+ bun x nuxt generate
33
33
  ```
34
34
 
35
35
  ::
@@ -45,8 +45,8 @@ Working of the Nitro crawler:
45
45
 
46
46
  This is important to understand since pages that are not linked to a discoverable page can't be pre-rendered automatically.
47
47
 
48
- ::read-more{to="/docs/api/commands/generate#nuxi-generate"}
49
- Read more about the `nuxi generate` command.
48
+ ::read-more{to="/docs/api/commands/generate#nuxt-generate"}
49
+ Read more about the `nuxt generate` command.
50
50
  ::
51
51
 
52
52
  ### Selective Pre-rendering
package/1.getting-started/16.deployment.md CHANGED
@@ -70,14 +70,14 @@ By default, the workload gets distributed to the workers with the round robin st
70
70
 
71
71
  There are two ways to deploy a Nuxt application to any static hosting services:
72
72
 
73
- - 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).
73
+ - 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).
74
74
  - 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).
75
75
 
76
76
  :read-more{title="Nuxt prerendering" to="/docs/getting-started/prerendering"}
77
77
 
78
78
  ### Client-side Only Rendering
79
79
 
80
- 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.
80
+ 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.
81
81
 
82
82
  ```ts twoslash [nuxt.config.ts]
83
83
  export default defineNuxtConfig({
package/1.getting-started/17.testing.md CHANGED
@@ -594,7 +594,7 @@ For local development or automated deploy pipelines, testing against a separate
594
594
 
595
595
  To utilize a separate target host for end-to-end tests, simply provide the `host` property of the `setup` function with the desired URL.
596
596
 
597
- ```ts twoslash
597
+ ```ts
598
598
  import { setup, createPage } from '@nuxt/test-utils/e2e'
599
599
  import { describe, it, expect } from 'vitest'
600
600
 
package/1.getting-started/18.upgrade.md CHANGED
@@ -8,24 +8,24 @@ navigation.icon: i-lucide-circle-arrow-up
8
8
 
9
9
  ### Latest release
10
10
 
11
- To upgrade Nuxt to the [latest release](https://github.com/nuxt/nuxt/releases), use the `nuxi upgrade` command.
11
+ To upgrade Nuxt to the [latest release](https://github.com/nuxt/nuxt/releases), use the `nuxt upgrade` command.
12
12
 
13
13
  ::code-group{sync="pm"}
14
14
 
15
15
  ```bash [npm]
16
- npx nuxi upgrade
16
+ npx nuxt upgrade
17
17
  ```
18
18
 
19
19
  ```bash [yarn]
20
- yarn dlx nuxi upgrade
20
+ yarn nuxt upgrade
21
21
  ```
22
22
 
23
23
  ```bash [pnpm]
24
- pnpm dlx nuxi upgrade
24
+ pnpm nuxt upgrade
25
25
  ```
26
26
 
27
27
  ```bash [bun]
28
- bun x nuxi upgrade
28
+ bun x nuxt upgrade
29
29
  ```
30
30
 
31
31
  ::
@@ -621,6 +621,7 @@ You can automate this step by running `npx codemod@latest nuxt/4/default-data-er
621
621
  If you encounter any issues you can revert back to the previous behavior with:
622
622
 
623
623
  ```ts twoslash [nuxt.config.ts]
624
+ // @errors: 2353
624
625
  export default defineNuxtConfig({
625
626
  experimental: {
626
627
  defaults: {
@@ -644,6 +645,7 @@ Please report an issue if you are doing this, as we do not plan to keep this as
644
645
  Previously it was possible to pass `dedupe: boolean` to `refresh`. These were aliases of `cancel` (`true`) and `defer` (`false`).
645
646
 
646
647
  ```ts twoslash [app.vue]
648
+ // @errors: 2322
647
649
  const { refresh } = await useAsyncData(async () => ({ message: 'Hello, Nuxt!' }))
648
650
 
649
651
  async function refreshData () {
@@ -696,6 +698,7 @@ Often users set an appropriately empty value, such as an empty array, to avoid t
696
698
  If you encounter any issues you can revert back to the previous behavior, for now, with:
697
699
 
698
700
  ```ts twoslash [nuxt.config.ts]
701
+ // @errors: 2353
699
702
  export default defineNuxtConfig({
700
703
  experimental: {
701
704
  resetAsyncDataToUndefined: true,
@@ -1016,7 +1019,7 @@ Components Auto Import | ✅ | ✅ | ✅
1016
1019
  Auto Imports | ❌ | ✅ | ✅
1017
1020
  webpack | 4 | 4 | 5
1018
1021
  Vite | ⚠️ Partial | 🚧 Partial | ✅
1019
- Nuxi CLI | ❌ Old | ✅ nuxi | ✅ nuxi
1022
+ Nuxt CLI | ❌ Old | ✅ nuxt | ✅ nuxt
1020
1023
  Static sites | ✅ | ✅ | ✅
1021
1024
 
1022
1025
  ## Nuxt 2 to Nuxt 3+
package/2.guide/1.concepts/3.rendering.md CHANGED
@@ -96,10 +96,10 @@ If you do use `ssr: false`, you should also place an HTML file in `~/app/spa-loa
96
96
 
97
97
  ### Deploying a Static Client-Rendered App
98
98
 
99
- 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.
99
+ 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.
100
100
 
101
101
  ::warning
102
- 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.
102
+ 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.
103
103
  ::
104
104
 
105
105
  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/5.modules.md CHANGED
@@ -7,7 +7,7 @@ description: "Nuxt provides a module system to extend the framework core and sim
7
7
 
8
8
  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.
9
9
 
10
- 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.
10
+ 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.
11
11
 
12
12
  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.
13
13
 
package/2.guide/1.concepts/8.typescript.md CHANGED
@@ -5,7 +5,7 @@ description: "Nuxt is fully typed and provides helpful shortcuts to ensure you h
5
5
 
6
6
  ## Type-checking
7
7
 
8
- 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.
8
+ 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.
9
9
 
10
10
  To enable type-checking at build or development time, install `vue-tsc` and `typescript` as development dependency:
11
11
 
@@ -29,10 +29,10 @@ To enable type-checking at build or development time, install `vue-tsc` and `typ
29
29
 
30
30
  ::
31
31
 
32
- Then, run [`nuxi typecheck`](/docs/api/commands/typecheck) command to check your types:
32
+ Then, run [`nuxt typecheck`](/docs/api/commands/typecheck) command to check your types:
33
33
 
34
34
  ```bash [Terminal]
35
- npx nuxi typecheck
35
+ npx nuxt typecheck
36
36
  ```
37
37
 
38
38
  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({
47
47
 
48
48
  ## Auto-generated Types
49
49
 
50
- When you run `nuxi dev` or `nuxi build`, Nuxt generates the following files for IDE type support (and type checking):
50
+ When you run `nuxt dev` or `nuxt build`, Nuxt generates the following files for IDE type support (and type checking):
51
51
 
52
52
  ### `.nuxt/nuxt.d.ts`
53
53
 
54
54
  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.
55
55
 
56
- 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`.
56
+ 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`.
57
57
 
58
58
  ### `.nuxt/tsconfig.json`
59
59
 
@@ -77,7 +77,7 @@ Nitro also [auto-generates types](/docs/guide/concepts/server-engine#typed-api-r
77
77
  Keep in mind that all options extended from `./.nuxt/tsconfig.json` will be overwritten by the options defined in your `tsconfig.json`.
78
78
  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.
79
79
  :br :br
80
- 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.
80
+ 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.
81
81
  ::
82
82
 
83
83
  ## Strict Checks
package/2.guide/1.concepts/9.code-style.md CHANGED
@@ -14,7 +14,7 @@ The module is designed for the [new ESLint flat config format](https://eslint.or
14
14
  ## Quick Setup
15
15
 
16
16
  ```bash
17
- npx nuxi module add eslint
17
+ npx nuxt module add eslint
18
18
  ```
19
19
 
20
20
  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 CHANGED
@@ -50,7 +50,7 @@ The `composables/` directory in Nuxt does not provide any additional reactivity
50
50
 
51
51
  Under the hood, Nuxt auto generates the file `.nuxt/imports.d.ts` to declare the types.
52
52
 
53
- 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.
53
+ 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.
54
54
 
55
55
  ::note
56
56
  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 CHANGED
@@ -21,7 +21,7 @@ Learn more in **Nuxt Content** documentation.
21
21
  Install the `@nuxt/content` module in your project as well as adding it to your `nuxt.config.ts` with one command:
22
22
 
23
23
  ```bash [Terminal]
24
- npx nuxi module add content
24
+ npx nuxt module add content
25
25
  ```
26
26
 
27
27
  ## Create Content
package/2.guide/2.directory-structure/1.pages.md CHANGED
@@ -335,6 +335,10 @@ You may define a name for this page's route.
335
335
 
336
336
  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.
337
337
 
338
+ #### `props`
339
+
340
+ 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.
341
+
338
342
  ### Typing Custom Metadata
339
343
 
340
344
  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
401
405
 
402
406
  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.
403
407
 
404
- ::alert{type=warning}
408
+ ::warning
405
409
  Server-only pages must have a single root element. (HTML comments are considered elements as well.)
406
410
  ::
407
411
 
package/2.guide/2.directory-structure/1.server.md CHANGED
@@ -144,7 +144,7 @@ To improve clarity within your IDE between the auto-imports from 'nitro' and 'vu
144
144
  }
145
145
  ```
146
146
 
147
- 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.
147
+ 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.
148
148
 
149
149
  ## Recipes
150
150
 
package/2.guide/2.directory-structure/2.env.md CHANGED
@@ -11,7 +11,7 @@ This file should be added to your [`.gitignore`](/docs/guide/directory-structure
11
11
 
12
12
  ## Dev, Build and Generate Time
13
13
 
14
- 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).
14
+ 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).
15
15
 
16
16
  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.
17
17
 
@@ -25,10 +25,10 @@ Note that removing a variable from `.env` or removing the `.env` file entirely w
25
25
 
26
26
  ## Custom File
27
27
 
28
- 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`.
28
+ 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.
29
29
 
30
30
  ```bash [Terminal]
31
- npx nuxi dev --dotenv .env.local
31
+ npx nuxt dev --dotenv .env.local
32
32
  ```
33
33
 
34
34
  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
57
57
 
58
58
  ## Production Preview
59
59
 
60
- 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.
60
+ 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.
61
61
 
62
62
  Or you could pass the environment variables as arguments using the terminal. For example, on Linux or macOS:
63
63
 
package/2.guide/3.going-further/1.events.md CHANGED
@@ -74,7 +74,7 @@ declare module '#app' {
74
74
  }
75
75
  }
76
76
 
77
- declare module 'nitropack' {
77
+ declare module 'nitropack/types' {
78
78
  interface NitroRuntimeHooks {
79
79
  'your-nitro-hook': () => void;
80
80
  }
package/2.guide/3.going-further/1.experimental-features.md CHANGED
@@ -57,25 +57,11 @@ export default defineNuxtConfig({
57
57
  This feature will likely be removed in a near future.
58
58
  ::
59
59
 
60
- ## treeshakeClientOnly
61
-
62
- Tree shakes contents of client-only components from server bundle.
63
-
64
- *Enabled by default.*
65
-
66
- ```ts twoslash [nuxt.config.ts]
67
- export default defineNuxtConfig({
68
- experimental: {
69
- treeshakeClientOnly: true
70
- }
71
- })
72
- ```
73
-
74
60
  ## emitRouteChunkError
75
61
 
76
62
  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.
77
63
 
78
- 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.
64
+ 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.
79
65
 
80
66
  You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
81
67
 
@@ -240,44 +226,6 @@ export default defineNuxtConfig({
240
226
  You can follow the server components roadmap on GitHub.
241
227
  ::
242
228
 
243
- ## configSchema
244
-
245
- Enables config schema support.
246
-
247
- *Enabled by default.*
248
-
249
- ```ts twoslash [nuxt.config.ts]
250
- export default defineNuxtConfig({
251
- experimental: {
252
- configSchema: true
253
- }
254
- })
255
- ```
256
-
257
- ## polyfillVueUseHead
258
-
259
- Adds a compatibility layer for modules, plugins, or user code relying on the old `@vueuse/head` API.
260
-
261
- ```ts twoslash [nuxt.config.ts]
262
- export default defineNuxtConfig({
263
- experimental: {
264
- polyfillVueUseHead: false
265
- }
266
- })
267
- ```
268
-
269
- ## respectNoSSRHeader
270
-
271
- Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header.
272
-
273
- ```ts twoslash [nuxt.config.ts]
274
- export default defineNuxtConfig({
275
- experimental: {
276
- respectNoSSRHeader: false
277
- }
278
- })
279
- ```
280
-
281
229
  ## localLayerAliases
282
230
 
283
231
  Resolve `~`, `~~`, `@` and `@@` aliases located within layers with respect to their layer source and root directories.
package/2.guide/3.going-further/1.internals.md CHANGED
@@ -7,7 +7,7 @@ This guide helps you better understand Nuxt internals to develop new solutions a
7
7
 
8
8
  ## The Nuxt Interface
9
9
 
10
- 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),
10
+ 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),
11
11
  a common context will be created, referred to as `nuxt` internally. It holds normalized options merged with `nuxt.config` file,
12
12
  some internal state, and a powerful [hooking system](/docs/api/advanced/hooks) powered by [unjs/hookable](https://github.com/unjs/hookable)
13
13
  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
78
78
 
79
79
  `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.
80
80
 
81
- 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).
81
+ 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 CHANGED
@@ -44,7 +44,7 @@ Instead of passing non-serializable objects or functions into your application f
44
44
  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).
45
45
 
46
46
  ::note
47
- 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**.
47
+ 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**.
48
48
  :read-more{to="/docs/guide/directory-structure/env"}
49
49
  ::
50
50
 
package/2.guide/3.going-further/11.nightly-release-channel.md CHANGED
@@ -49,16 +49,12 @@ Update `nuxt` dependency inside `package.json`:
49
49
 
50
50
  Remove lockfile (`package-lock.json`, `yarn.lock`, `pnpm-lock.yaml`, or `bun.lockb`) and reinstall dependencies.
51
51
 
52
- ## Using Nightly `nuxi`
53
-
54
- ::note
55
- 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.
56
- ::
52
+ ## Using Nightly `@nuxt/cli`
57
53
 
58
54
  To try the latest version of [nuxt/cli](https://github.com/nuxt/cli):
59
55
 
60
56
  ```bash [Terminal]
61
- npx nuxi-nightly@latest [command]
57
+ npx @nuxt/cli-nightly@latest [command]
62
58
  ```
63
59
 
64
60
  ::read-more{to="/docs/api/commands"}
package/2.guide/3.going-further/3.modules.md CHANGED
@@ -6,7 +6,7 @@ image: '/socials/module-author-guide.jpg'
6
6
 
7
7
  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.).
8
8
 
9
- **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`.
9
+ **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`.
10
10
  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.
11
11
 
12
12
  ## Quick Start
@@ -59,7 +59,7 @@ You can interact with the playground like with any Nuxt application.
59
59
  - Build it with `npm run dev:build`
60
60
 
61
61
  ::note
62
- 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.
62
+ 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.
63
63
  ::
64
64
 
65
65
  #### How to Test
@@ -614,7 +614,7 @@ export default defineNuxtModule({
614
614
  interface MyModuleNitroRules {
615
615
  myModule?: { foo: 'bar' }
616
616
  }
617
- declare module 'nitropack' {
617
+ declare module 'nitropack/types' {
618
618
  interface NitroRouteRules extends MyModuleNitroRules {}
619
619
  interface NitroRouteConfig extends MyModuleNitroRules {}
620
620
  }
package/2.guide/3.going-further/9.debugging.md CHANGED
@@ -22,7 +22,7 @@ export default defineNuxtConfig({
22
22
  You can use [Node inspector](https://nodejs.org/en/learn/getting-started/debugging) to debug Nuxt server-side.
23
23
 
24
24
  ```bash
25
- nuxi dev --inspect
25
+ nuxt dev --inspect
26
26
  ```
27
27
  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.
28
28
 
@@ -38,10 +38,6 @@ It is possible to debug your Nuxt app in your IDE while you are developing it.
38
38
 
39
39
  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).
40
40
 
41
- ::important
42
- If you use `pnpm`, you will need to have `nuxi` installed as a devDependency for the configuration below to work.
43
- ::
44
-
45
41
  ```json5
46
42
  {
47
43
  // Use IntelliSense to learn about possible attributes.
package/2.guide/4.recipes/4.sessions-and-authentication.md CHANGED
@@ -11,10 +11,10 @@ The module uses secured & sealed cookies to store session data, so you don't nee
11
11
 
12
12
  ## Install nuxt-auth-utils
13
13
 
14
- Install the `nuxt-auth-utils` module using the `nuxi` CLI.
14
+ Install the `nuxt-auth-utils` module using the `nuxt` CLI.
15
15
 
16
16
  ```bash [Terminal]
17
- npx nuxi@latest module add auth-utils
17
+ npx nuxt module add auth-utils
18
18
  ```
19
19
 
20
20
  ::callout
@@ -162,7 +162,7 @@ export default defineNuxtRouteMiddleware(() => {
162
162
 
163
163
  ## Home Page
164
164
 
165
- 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.
165
+ 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.
166
166
 
167
167
  We'll use [`definePageMeta`](/docs/api/utils/define-page-meta) to apply the middleware to the route that we want to protect.
168
168
 
package/3.api/1.components/10.nuxt-picture.md CHANGED
@@ -19,7 +19,7 @@ Learn more about the [`<picture>` tag on MDN](https://developer.mozilla.org/en-U
19
19
  In order to use `<NuxtPicture>` you should install and enable the Nuxt Image module:
20
20
 
21
21
  ```bash [Terminal]
22
- npx nuxi@latest module add image
22
+ npx nuxt module add image
23
23
  ```
24
24
 
25
25
  ::read-more{to="https://image.nuxt.com/usage/nuxt-picture" target="_blank"}
package/3.api/1.components/9.nuxt-img.md CHANGED
@@ -21,7 +21,7 @@ links:
21
21
  In order to use `<NuxtImg>` you should install and enable the Nuxt Image module:
22
22
 
23
23
  ```bash [Terminal]
24
- npx nuxi@latest module add image
24
+ npx nuxt module add image
25
25
  ```
26
26
 
27
27
  ## Usage
package/3.api/2.composables/use-async-data.md CHANGED
@@ -98,7 +98,7 @@ The `handler` function should be **side-effect free** to ensure predictable beha
98
98
  Which only caches data when `experimental.payloadExtraction` of `nuxt.config` is enabled.
99
99
  - `pick`: only pick specified keys in this array from the `handler` function result
100
100
  - `watch`: watch reactive sources to auto-refresh
101
- - `deep`: return data in a deep ref object (it is `true` by default). It can be set to `false` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive.
101
+ - `deep`: return data in a deep ref object. It is `false` by default to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive.
102
102
  - `dedupe`: avoid fetching same key more than once at a time (defaults to `cancel`). Possible options:
103
103
  - `cancel` - cancels existing requests when a new one is made
104
104
  - `defer` - does not make new requests at all if there is a pending request
package/3.api/2.composables/use-fetch.md CHANGED
@@ -132,7 +132,7 @@ All fetch options can be given a `computed` or `ref` value. These will be watche
132
132
  Which only caches data when `experimental.payloadExtraction` of `nuxt.config` is enabled.
133
133
  - `pick`: only pick specified keys in this array from the `handler` function result
134
134
  - `watch`: watch an array of reactive sources and auto-refresh the fetch result when they change. Fetch options and URL are watched by default. You can completely ignore reactive sources by using `watch: false`. Together with `immediate: false`, this allows for a fully-manual `useFetch`. (You can [see an example here](/docs/getting-started/data-fetching#watch) of using `watch`.)
135
- - `deep`: return data in a deep ref object (it is `true` by default). It can be set to `false` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive.
135
+ - `deep`: return data in a deep ref object. It is `false` by default to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive.
136
136
  - `dedupe`: avoid fetching same key more than once at a time (defaults to `cancel`). Possible options:
137
137
  - `cancel` - cancels existing requests when a new one is made
138
138
  - `defer` - does not make new requests at all if there is a pending request