@nuxt/docs 3.17.4 → 3.17.5
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.
- package/1.getting-started/01.introduction.md +3 -3
- package/1.getting-started/03.configuration.md +1 -1
- package/1.getting-started/07.routing.md +1 -1
- package/1.getting-started/11.state-management.md +1 -1
- package/1.getting-started/12.error-handling.md +1 -1
- package/1.getting-started/15.prerendering.md +7 -7
- package/1.getting-started/16.deployment.md +2 -2
- package/1.getting-started/18.upgrade.md +7 -7
- package/2.guide/1.concepts/3.rendering.md +2 -2
- package/2.guide/1.concepts/5.modules.md +1 -1
- package/2.guide/1.concepts/8.typescript.md +6 -6
- package/2.guide/1.concepts/9.code-style.md +1 -1
- package/2.guide/2.directory-structure/1.composables.md +1 -1
- package/2.guide/2.directory-structure/1.content.md +1 -1
- package/2.guide/2.directory-structure/1.pages.md +5 -1
- package/2.guide/2.directory-structure/1.server.md +1 -1
- package/2.guide/2.directory-structure/2.env.md +4 -4
- package/2.guide/3.going-further/1.experimental-features.md +1 -1
- package/2.guide/3.going-further/1.internals.md +2 -2
- package/2.guide/3.going-further/10.runtime-config.md +1 -1
- package/2.guide/3.going-further/11.nightly-release-channel.md +2 -6
- package/2.guide/3.going-further/3.modules.md +2 -2
- package/2.guide/3.going-further/9.debugging.md +1 -5
- package/2.guide/4.recipes/4.sessions-and-authentication.md +3 -3
- package/3.api/1.components/10.nuxt-picture.md +1 -1
- package/3.api/1.components/9.nuxt-img.md +1 -1
- package/3.api/2.composables/use-preview-mode.md +3 -3
- package/3.api/4.commands/add.md +20 -20
- package/3.api/4.commands/analyze.md +2 -2
- package/3.api/4.commands/build-module.md +2 -2
- package/3.api/4.commands/build.md +2 -2
- package/3.api/4.commands/cleanup.md +2 -2
- package/3.api/4.commands/dev.md +3 -3
- package/3.api/4.commands/devtools.md +3 -3
- package/3.api/4.commands/generate.md +3 -3
- package/3.api/4.commands/info.md +2 -2
- package/3.api/4.commands/init.md +3 -3
- package/3.api/4.commands/module.md +8 -8
- package/3.api/4.commands/prepare.md +2 -2
- package/3.api/4.commands/preview.md +3 -3
- package/3.api/4.commands/typecheck.md +2 -2
- package/3.api/4.commands/upgrade.md +2 -2
- package/3.api/5.kit/7.pages.md +1 -1
- package/3.api/6.advanced/1.hooks.md +1 -1
- package/5.community/4.contribution.md +1 -1
- package/5.community/6.roadmap.md +17 -12
- package/5.community/7.changelog.md +1 -1
- package/7.migration/2.configuration.md +2 -2
- package/package.json +1 -1
|
@@ -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
|
|
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: [
|
|
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
|
|
|
@@ -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: `
|
|
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
|
|
|
@@ -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/`
|
|
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
|
|
|
@@ -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
|
|
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
|
|
@@ -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 [`
|
|
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
|
|
20
|
+
npx nuxt generate
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
```bash [yarn]
|
|
24
|
-
yarn
|
|
24
|
+
yarn nuxt generate
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
```bash [pnpm]
|
|
28
|
-
pnpm
|
|
28
|
+
pnpm nuxt generate
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
```bash [bun]
|
|
32
|
-
bun x
|
|
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#
|
|
49
|
-
Read more about the `
|
|
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
|
|
@@ -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 `
|
|
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 `
|
|
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({
|
|
@@ -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 `
|
|
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
|
|
16
|
+
npx nuxt upgrade
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
```bash [yarn]
|
|
20
|
-
yarn
|
|
20
|
+
yarn nuxt upgrade
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
```bash [pnpm]
|
|
24
|
-
pnpm
|
|
24
|
+
pnpm nuxt upgrade
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
```bash [bun]
|
|
28
|
-
bun x
|
|
28
|
+
bun x nuxt upgrade
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
::
|
|
@@ -40,7 +40,7 @@ The nightly release channel `latest` tag is currently tracking the Nuxt v4 branc
|
|
|
40
40
|
|
|
41
41
|
## Testing Nuxt 4
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
Nuxt 4 is **scheduled for release in Q2 2025**. It will include all the features currently available through `compatibilityVersion: 4`.
|
|
44
44
|
|
|
45
45
|
Until the release, it is possible to test many of Nuxt 4's breaking changes from Nuxt version 3.12+.
|
|
46
46
|
|
|
@@ -1016,7 +1016,7 @@ Components Auto Import | ✅ | ✅ | ✅
|
|
|
1016
1016
|
Auto Imports | ❌ | ✅ | ✅
|
|
1017
1017
|
webpack | 4 | 4 | 5
|
|
1018
1018
|
Vite | ⚠️ Partial | 🚧 Partial | ✅
|
|
1019
|
-
|
|
1019
|
+
Nuxt CLI | ❌ Old | ✅ nuxt | ✅ nuxt
|
|
1020
1020
|
Static sites | ✅ | ✅ | ✅
|
|
1021
1021
|
|
|
1022
1022
|
## Nuxt 2 to Nuxt 3+
|
|
@@ -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 `
|
|
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 `
|
|
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.
|
|
@@ -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 [`
|
|
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
|
|
|
@@ -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 [`
|
|
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 [`
|
|
32
|
+
Then, run [`nuxt typecheck`](/docs/api/commands/typecheck) command to check your types:
|
|
33
33
|
|
|
34
34
|
```bash [Terminal]
|
|
35
|
-
npx
|
|
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 `
|
|
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 `
|
|
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`.
|
|
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
|
|
@@ -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
|
|
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.
|
|
@@ -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 [`
|
|
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'.`
|
|
@@ -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
|
|
24
|
+
npx nuxt module add content
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
## Create Content
|
|
@@ -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
|
-
::
|
|
408
|
+
::warning
|
|
405
409
|
Server-only pages must have a single root element. (HTML comments are considered elements as well.)
|
|
406
410
|
::
|
|
407
411
|
|
|
@@ -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 ([`
|
|
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
|
|
|
@@ -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 [`
|
|
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
|
|
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
|
|
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 [`
|
|
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
|
|
|
@@ -75,7 +75,7 @@ export default defineNuxtConfig({
|
|
|
75
75
|
|
|
76
76
|
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
77
|
|
|
78
|
-
If you set this to `'automatic-immediate'` Nuxt will reload the current route
|
|
78
|
+
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
79
|
|
|
80
80
|
You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
|
|
81
81
|
|
|
@@ -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 [`
|
|
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, `
|
|
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).
|
|
@@ -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
|
-
|
|
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
|
|
|
@@ -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 `
|
|
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
|
|
57
|
+
npx @nuxt/cli-nightly@latest [command]
|
|
62
58
|
```
|
|
63
59
|
|
|
64
60
|
::read-more{to="/docs/api/commands"}
|
|
@@ -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 `
|
|
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 `
|
|
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
|
|
@@ -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
|
-
|
|
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.
|
|
@@ -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 `
|
|
14
|
+
Install the `nuxt-auth-utils` module using the `nuxt` CLI.
|
|
15
15
|
|
|
16
16
|
```bash [Terminal]
|
|
17
|
-
npx
|
|
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
|
|
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
|
|
|
@@ -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
|
|
22
|
+
npx nuxt module add image
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
::read-more{to="https://image.nuxt.com/usage/nuxt-picture" target="_blank"}
|
|
@@ -103,8 +103,8 @@ const { data } = await useFetch('/api/preview', {
|
|
|
103
103
|
Now you can generate your site and serve it:
|
|
104
104
|
|
|
105
105
|
```bash [Terminal]
|
|
106
|
-
npx
|
|
107
|
-
npx
|
|
106
|
+
npx nuxt generate
|
|
107
|
+
npx nuxt preview
|
|
108
108
|
```
|
|
109
109
|
|
|
110
110
|
Then you can see your preview page by adding the query param `preview` to the end of the page you want to see once:
|
|
@@ -114,5 +114,5 @@ Then you can see your preview page by adding the query param `preview` to the en
|
|
|
114
114
|
```
|
|
115
115
|
|
|
116
116
|
::note
|
|
117
|
-
`usePreviewMode` should be tested locally with `
|
|
117
|
+
`usePreviewMode` should be tested locally with `nuxt generate` and then `nuxt preview` rather than `nuxt dev`. (The [preview command](/docs/api/commands/preview) is not related to preview mode.)
|
|
118
118
|
::
|
package/3.api/4.commands/add.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: "
|
|
2
|
+
title: "nuxt add"
|
|
3
3
|
description: "Scaffold an entity into your Nuxt application."
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--add-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt add <TEMPLATE> <NAME> [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--force]
|
|
14
14
|
```
|
|
15
15
|
<!--/add-cmd-->
|
|
16
16
|
|
|
@@ -39,74 +39,74 @@ Some templates support additional modifier flags to add a suffix (like `.client`
|
|
|
39
39
|
|
|
40
40
|
```bash [Terminal]
|
|
41
41
|
# Generates `/plugins/sockets.client.ts`
|
|
42
|
-
npx
|
|
42
|
+
npx nuxt add plugin sockets --client
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
## `
|
|
45
|
+
## `nuxt add component`
|
|
46
46
|
|
|
47
47
|
* Modifier flags: `--mode client|server` or `--client` or `--server`
|
|
48
48
|
|
|
49
49
|
```bash [Terminal]
|
|
50
50
|
# Generates `components/TheHeader.vue`
|
|
51
|
-
npx
|
|
51
|
+
npx nuxt add component TheHeader
|
|
52
52
|
```
|
|
53
53
|
|
|
54
|
-
## `
|
|
54
|
+
## `nuxt add composable`
|
|
55
55
|
|
|
56
56
|
```bash [Terminal]
|
|
57
57
|
# Generates `composables/foo.ts`
|
|
58
|
-
npx
|
|
58
|
+
npx nuxt add composable foo
|
|
59
59
|
```
|
|
60
60
|
|
|
61
|
-
## `
|
|
61
|
+
## `nuxt add layout`
|
|
62
62
|
|
|
63
63
|
```bash [Terminal]
|
|
64
64
|
# Generates `layouts/custom.vue`
|
|
65
|
-
npx
|
|
65
|
+
npx nuxt add layout custom
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
-
## `
|
|
68
|
+
## `nuxt add plugin`
|
|
69
69
|
|
|
70
70
|
* Modifier flags: `--mode client|server` or `--client`or `--server`
|
|
71
71
|
|
|
72
72
|
```bash [Terminal]
|
|
73
73
|
# Generates `plugins/analytics.ts`
|
|
74
|
-
npx
|
|
74
|
+
npx nuxt add plugin analytics
|
|
75
75
|
```
|
|
76
76
|
|
|
77
|
-
## `
|
|
77
|
+
## `nuxt add page`
|
|
78
78
|
|
|
79
79
|
```bash [Terminal]
|
|
80
80
|
# Generates `pages/about.vue`
|
|
81
|
-
npx
|
|
81
|
+
npx nuxt add page about
|
|
82
82
|
```
|
|
83
83
|
|
|
84
84
|
```bash [Terminal]
|
|
85
85
|
# Generates `pages/category/[id].vue`
|
|
86
|
-
npx
|
|
86
|
+
npx nuxt add page "category/[id]"
|
|
87
87
|
```
|
|
88
88
|
|
|
89
|
-
## `
|
|
89
|
+
## `nuxt add middleware`
|
|
90
90
|
|
|
91
91
|
* Modifier flags: `--global`
|
|
92
92
|
|
|
93
93
|
```bash [Terminal]
|
|
94
94
|
# Generates `middleware/auth.ts`
|
|
95
|
-
npx
|
|
95
|
+
npx nuxt add middleware auth
|
|
96
96
|
```
|
|
97
97
|
|
|
98
|
-
## `
|
|
98
|
+
## `nuxt add api`
|
|
99
99
|
|
|
100
100
|
* Modifier flags: `--method` (can accept `connect`, `delete`, `get`, `head`, `options`, `patch`, `post`, `put` or `trace`) or alternatively you can directly use `--get`, `--post`, etc.
|
|
101
101
|
|
|
102
102
|
```bash [Terminal]
|
|
103
103
|
# Generates `server/api/hello.ts`
|
|
104
|
-
npx
|
|
104
|
+
npx nuxt add api hello
|
|
105
105
|
```
|
|
106
106
|
|
|
107
|
-
## `
|
|
107
|
+
## `nuxt add layer`
|
|
108
108
|
|
|
109
109
|
```bash [Terminal]
|
|
110
110
|
# Generates `layers/subscribe/nuxt.config.ts`
|
|
111
|
-
npx
|
|
111
|
+
npx nuxt add layer subscribe
|
|
112
112
|
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: "
|
|
2
|
+
title: "nuxt analyze"
|
|
3
3
|
description: "Analyze the production bundle or your Nuxt application."
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--analyze-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt analyze [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--dotenv] [--name=<name>] [--no-serve]
|
|
14
14
|
```
|
|
15
15
|
<!--/analyze-cmd-->
|
|
16
16
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: '
|
|
2
|
+
title: 'nuxt build-module'
|
|
3
3
|
description: 'Nuxt command to build your Nuxt module before publishing.'
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--build-module-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt build-module [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--build] [--stub] [--sourcemap] [--prepare]
|
|
14
14
|
```
|
|
15
15
|
<!--/build-module-cmd-->
|
|
16
16
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: "
|
|
2
|
+
title: "nuxt build"
|
|
3
3
|
description: "Build your Nuxt application."
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--build-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt build [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--prerender] [--preset] [--dotenv] [--envName]
|
|
14
14
|
```
|
|
15
15
|
<!--/build-cmd-->
|
|
16
16
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: '
|
|
2
|
+
title: 'nuxt cleanup'
|
|
3
3
|
description: 'Remove common generated Nuxt files and caches.'
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--cleanup-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt cleanup [ROOTDIR] [--cwd=<directory>]
|
|
14
14
|
```
|
|
15
15
|
<!--/cleanup-cmd-->
|
|
16
16
|
|
package/3.api/4.commands/dev.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: '
|
|
2
|
+
title: 'nuxt dev'
|
|
3
3
|
description: The dev command starts a development server with hot module replacement at http://localhost:3000
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--dev-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt dev [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--dotenv] [--envName] [--no-clear] [--no-fork] [-p, --port] [-h, --host] [--clipboard] [-o, --open] [--https] [--publicURL] [--qr] [--public] [--tunnel] [--sslCert] [--sslKey]
|
|
14
14
|
```
|
|
15
15
|
<!--/dev-cmd-->
|
|
16
16
|
|
|
@@ -50,7 +50,7 @@ Option | Default | Description
|
|
|
50
50
|
|
|
51
51
|
The port and host can also be set via NUXT_PORT, PORT, NUXT_HOST or HOST environment variables.
|
|
52
52
|
|
|
53
|
-
Additionally to the above options, `
|
|
53
|
+
Additionally to the above options, `@nuxt/cli` can pass options through to `listhen`, e.g. `--no-qr` to turn off the dev server QR code. You can find the list of `listhen` options in the [unjs/listhen](https://github.com/unjs/listhen) docs.
|
|
54
54
|
|
|
55
55
|
This command sets `process.env.NODE_ENV` to `development`.
|
|
56
56
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: "
|
|
2
|
+
title: "nuxt devtools"
|
|
3
3
|
description: The devtools command allows you to enable or disable Nuxt DevTools on a per-project basis.
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,11 +10,11 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--devtools-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt devtools <COMMAND> [ROOTDIR] [--cwd=<directory>]
|
|
14
14
|
```
|
|
15
15
|
<!--/devtools-cmd-->
|
|
16
16
|
|
|
17
|
-
Running `
|
|
17
|
+
Running `nuxt devtools enable` will install the Nuxt DevTools globally, and also enable it within the particular project you are using. It is saved as a preference in your user-level `.nuxtrc`. If you want to remove devtools support for a particular project, you can run `nuxt devtools disable`.
|
|
18
18
|
|
|
19
19
|
## Arguments
|
|
20
20
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: "
|
|
2
|
+
title: "nuxt generate"
|
|
3
3
|
description: Pre-renders every route of the application and stores the result in plain HTML files.
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,11 +10,11 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--generate-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt generate [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--preset] [--dotenv] [--envName]
|
|
14
14
|
```
|
|
15
15
|
<!--/generate-cmd-->
|
|
16
16
|
|
|
17
|
-
The `generate` command pre-renders every route of your application and stores the result in plain HTML files that you can deploy on any static hosting services. The command triggers the `
|
|
17
|
+
The `generate` command pre-renders every route of your application and stores the result in plain HTML files that you can deploy on any static hosting services. The command triggers the `nuxt build` command with the `prerender` argument set to `true`
|
|
18
18
|
|
|
19
19
|
## Arguments
|
|
20
20
|
|
package/3.api/4.commands/info.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: "
|
|
2
|
+
title: "nuxt info"
|
|
3
3
|
description: The info command logs information about the current or specified Nuxt project.
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--info-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt info [ROOTDIR] [--cwd=<directory>]
|
|
14
14
|
```
|
|
15
15
|
<!--/info-cmd-->
|
|
16
16
|
|
package/3.api/4.commands/init.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: "
|
|
2
|
+
title: "create nuxt"
|
|
3
3
|
description: The init command initializes a fresh Nuxt project.
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,11 +10,11 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--init-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
|
|
13
|
+
npm create nuxt@latest [DIR] [--cwd=<directory>] [-t, --template] [-f, --force] [--offline] [--preferOffline] [--no-install] [--gitInit] [--shell] [--packageManager]
|
|
14
14
|
```
|
|
15
15
|
<!--/init-cmd-->
|
|
16
16
|
|
|
17
|
-
The `
|
|
17
|
+
The `create-nuxt` command initializes a fresh Nuxt project using [unjs/giget](https://github.com/unjs/giget).
|
|
18
18
|
|
|
19
19
|
## Arguments
|
|
20
20
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: "
|
|
2
|
+
title: "nuxt module"
|
|
3
3
|
description: "Search and add modules to your Nuxt application with the command line."
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -8,13 +8,13 @@ links:
|
|
|
8
8
|
size: xs
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Nuxt provides a few utilities to work with [Nuxt modules](/modules) seamlessly.
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## nuxt module add
|
|
14
14
|
|
|
15
15
|
<!--module-add-cmd-->
|
|
16
16
|
```bash [Terminal]
|
|
17
|
-
npx
|
|
17
|
+
npx nuxt module add <MODULENAME> [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--skipInstall] [--skipConfig] [--dev]
|
|
18
18
|
```
|
|
19
19
|
<!--/module-add-cmd-->
|
|
20
20
|
|
|
@@ -47,14 +47,14 @@ When running the command, it will:
|
|
|
47
47
|
Installing the [`Pinia`](/modules/pinia) module
|
|
48
48
|
|
|
49
49
|
```bash [Terminal]
|
|
50
|
-
npx
|
|
50
|
+
npx nuxt module add pinia
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
##
|
|
53
|
+
## nuxt module search
|
|
54
54
|
|
|
55
55
|
<!--module-search-cmd-->
|
|
56
56
|
```bash [Terminal]
|
|
57
|
-
npx
|
|
57
|
+
npx nuxt module search <QUERY> [--cwd=<directory>] [--nuxtVersion=<2|3>]
|
|
58
58
|
```
|
|
59
59
|
<!--/module-search-cmd-->
|
|
60
60
|
|
|
@@ -80,5 +80,5 @@ The command searches for Nuxt modules matching your query that are compatible wi
|
|
|
80
80
|
**Example:**
|
|
81
81
|
|
|
82
82
|
```bash [Terminal]
|
|
83
|
-
npx
|
|
83
|
+
npx nuxt module search pinia
|
|
84
84
|
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: '
|
|
2
|
+
title: 'nuxt prepare'
|
|
3
3
|
description: The prepare command creates a .nuxt directory in your application and generates types.
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--prepare-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt prepare [ROOTDIR] [--dotenv] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--envName]
|
|
14
14
|
```
|
|
15
15
|
<!--/prepare-cmd-->
|
|
16
16
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: "
|
|
2
|
+
title: "nuxt preview"
|
|
3
3
|
description: The preview command starts a server to preview your application after the build command.
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--preview-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt preview [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--envName] [--dotenv] [-p, --port]
|
|
14
14
|
```
|
|
15
15
|
<!--/preview-cmd-->
|
|
16
16
|
|
|
@@ -39,5 +39,5 @@ Option | Default | Description
|
|
|
39
39
|
This command sets `process.env.NODE_ENV` to `production`. To override, define `NODE_ENV` in a `.env` file or as command-line argument.
|
|
40
40
|
|
|
41
41
|
::note
|
|
42
|
-
For convenience, in preview mode, your [`.env`](/docs/guide/directory-structure/env) file will be loaded into `process.env`. (However, in production you will need to ensure your environment variables are set yourself.)
|
|
42
|
+
For convenience, in preview mode, your [`.env`](/docs/guide/directory-structure/env) file will be loaded into `process.env`. (However, in production you will need to ensure your environment variables are set yourself. For example, with Node.js 20+ you could do this by running `node --env-file .env .output/server/index.mjs` to start your server.)
|
|
43
43
|
::
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: "
|
|
2
|
+
title: "nuxt typecheck"
|
|
3
3
|
description: The typecheck command runs vue-tsc to check types throughout your app.
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--typecheck-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt typecheck [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>]
|
|
14
14
|
```
|
|
15
15
|
<!--/typecheck-cmd-->
|
|
16
16
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: "
|
|
2
|
+
title: "nuxt upgrade"
|
|
3
3
|
description: The upgrade command upgrades Nuxt to the latest version.
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--upgrade-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npx
|
|
13
|
+
npx nuxt upgrade [ROOTDIR] [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--dedupe] [-f, --force] [-ch, --channel=<stable|nightly>]
|
|
14
14
|
```
|
|
15
15
|
<!--/upgrade-cmd-->
|
|
16
16
|
|
package/3.api/5.kit/7.pages.md
CHANGED
|
@@ -68,7 +68,7 @@ Hook | Arguments | Description
|
|
|
68
68
|
`nitro:build:public-assets` | `nitro` | Called after copying public assets. Allows modifying public assets before Nitro server is built.
|
|
69
69
|
`prerender:routes` | `ctx` | Allows extending the routes to be pre-rendered.
|
|
70
70
|
`build:error` | `error` | Called when an error occurs at build time.
|
|
71
|
-
`prepare:types` | `options` | Called before
|
|
71
|
+
`prepare:types` | `options` | Called before `@nuxt/cli` writes `.nuxt/tsconfig.json` and `.nuxt/nuxt.d.ts`, allowing addition of custom references and declarations in `nuxt.d.ts`, or directly modifying the options in `tsconfig.json`
|
|
72
72
|
`listen` | `listenerServer, listener` | Called when the dev server is loading.
|
|
73
73
|
`schema:extend` | `schemas` | Allows extending default schemas.
|
|
74
74
|
`schema:resolved` | `schema` | Allows extending resolved schema.
|
|
@@ -52,7 +52,7 @@ Note that `fix:` and `feat:` are for **actual code changes** (that might affect
|
|
|
52
52
|
|
|
53
53
|
* ~~`fix: typo`~~ -> `docs: fix typo`
|
|
54
54
|
|
|
55
|
-
If you are working in a project with a monorepo, like `nuxt/nuxt`, ensure that you specify the main scope of your commit in brackets. For example: `feat(
|
|
55
|
+
If you are working in a project with a monorepo, like `nuxt/nuxt`, ensure that you specify the main scope of your commit in brackets. For example: `feat(kit): add 'addMagicStuff' utility`.
|
|
56
56
|
|
|
57
57
|
#### Making the Pull Request
|
|
58
58
|
|
package/5.community/6.roadmap.md
CHANGED
|
@@ -30,8 +30,8 @@ Check [Discussions](https://github.com/nuxt/nuxt/discussions) and [RFCs](https:/
|
|
|
30
30
|
|
|
31
31
|
Milestone | Expected date | Notes | Description
|
|
32
32
|
-------------|---------------|------------------------------------------------------------------------|-----------------------
|
|
33
|
-
SEO & PWA |
|
|
34
|
-
Assets |
|
|
33
|
+
SEO & PWA | 2025 | [nuxt/nuxt#18395](https://github.com/nuxt/nuxt/discussions/18395) | Migrating from [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) for built-in SEO utils and service worker support
|
|
34
|
+
Assets | 2025 | [nuxt/nuxt#22012](https://github.com/nuxt/nuxt/discussions/22012) | Allow developers and modules to handle loading third-party assets.
|
|
35
35
|
Translations | - | [nuxt/translations#4](https://github.com/nuxt/translations/discussions/4) ([request access](https://github.com/nuxt/nuxt/discussions/16054)) | A collaborative project for a stable translation process for Nuxt docs. Currently pending for ideas and documentation tooling support (content v2 with remote sources).
|
|
36
36
|
|
|
37
37
|
## Core Modules Roadmap
|
|
@@ -40,33 +40,38 @@ In addition to the Nuxt framework, there are modules that are vital for the ecos
|
|
|
40
40
|
|
|
41
41
|
Module | Status | Nuxt Support | Repository | Description
|
|
42
42
|
------------------------------------|---------------------|--------------|------------|-------------------
|
|
43
|
-
[Scripts](https://scripts.nuxt.com) | Public Beta | 3.x
|
|
44
|
-
Auth Utils | Planned |
|
|
45
|
-
A11y | Planned |
|
|
46
|
-
Hints | Planned |
|
|
43
|
+
[Scripts](https://scripts.nuxt.com) | Public Beta | 3.x, 4.x | [nuxt/scripts](https://github.com/nuxt/scripts) | Easy 3rd party script management.
|
|
44
|
+
Auth Utils | Planned | 4.x, 5.x | `nuxt/auth-utils` to be announced | The temporary repository [atinux/nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils) is available while awaiting its official integration into Nuxt via RFC.
|
|
45
|
+
A11y | Planned | 4.x, 5.x | `nuxt/a11y` to be announced | Accessibility hinting and utilities [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255)
|
|
46
|
+
Hints | Planned | 4.x, 5.x | `nuxt/hints` to be announced | Guidance and suggestions for enhancing development practices.
|
|
47
47
|
|
|
48
48
|
## Release Cycle
|
|
49
49
|
|
|
50
50
|
Since January 2023, we've adopted a consistent release cycle for Nuxt, following [semver](https://semver.org). We aim for major framework releases every year, with an expectation of patch releases every week or so and minor releases every month or so. They should never contain breaking changes except within options clearly marked as `experimental`.
|
|
51
51
|
|
|
52
|
+
We are planning a slight variation from this plan for Nuxt 4 and Nuxt 5. Nuxt 4 will be a stability-focused release containing all `compatibilityVersion: 4` features, and will be followed shortly by Nuxt 5 which will include an upgrade to Nitro v3 and additional changes.
|
|
53
|
+
|
|
54
|
+
This approach separates breaking changes into manageable phases, allowing for better ecosystem testing and smoother migrations.
|
|
55
|
+
|
|
52
56
|
### Ongoing Support for Nuxt
|
|
53
57
|
|
|
54
|
-
|
|
58
|
+
We commit to support each major version of Nuxt for a minimum of six months after the release of the next major version, and to providing an upgrade path for current users at that point.
|
|
55
59
|
|
|
56
60
|
### Current Packages
|
|
57
61
|
|
|
58
62
|
The current active version of [Nuxt](https://nuxt.com) is **v3** which is available as `nuxt` on npm with the `latest` tag.
|
|
59
63
|
|
|
60
|
-
Nuxt 2 is in maintenance mode and is available on npm with the `2x` tag. It
|
|
64
|
+
Nuxt 2 is in maintenance mode and is available on npm with the `2x` tag. It reached End of Life (EOL) on June 30, 2024.
|
|
61
65
|
|
|
62
66
|
Each active version has its own nightly releases which are generated automatically. For more about enabling the Nuxt nightly release channel, see [the nightly release channel docs](/docs/guide/going-further/nightly-release-channel).
|
|
63
67
|
|
|
64
68
|
Release | | Initial release | End Of Life | Docs
|
|
65
69
|
----------------------------------------|---------------------------------------------------------------------------------------------------|-----------------|--------------|-------
|
|
66
|
-
**
|
|
67
|
-
**
|
|
68
|
-
**
|
|
69
|
-
**
|
|
70
|
+
**5.x** (scheduled) | | Q4 2025 (estimated) | TBA |
|
|
71
|
+
**4.x** (scheduled) | | 2025-06-30 (planned) | 6 months after 5.x release |
|
|
72
|
+
**3.x** (stable) | <a href="https://npmjs.com/package/nuxt"><img alt="Nuxt latest 3.x version" src="https://flat.badgen.net/npm/v/nuxt?label=" class="not-prose"></a> | 2022-11-16 | 2025-12-31 (TBC) | [nuxt.com](/docs)
|
|
73
|
+
**2.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 2.x version" src="https://flat.badgen.net/npm/v/nuxt/2x?label=" class="not-prose"></a> | 2018-09-21 | 2024-06-30 | [v2.nuxt.com](https://v2.nuxt.com/docs)
|
|
74
|
+
**1.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 1.x version" src="https://flat.badgen.net/npm/v/nuxt/1x?label=" class="not-prose"></a> | 2018-01-08 | 2019-09-21 |
|
|
70
75
|
|
|
71
76
|
### Support Status
|
|
72
77
|
|
|
@@ -147,7 +147,7 @@ It will be much easier to migrate your application if you use Nuxt's TypeScript
|
|
|
147
147
|
You can read more about Nuxt's TypeScript support [in the docs](/docs/guide/concepts/typescript).
|
|
148
148
|
|
|
149
149
|
::note
|
|
150
|
-
Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/tsc) with `
|
|
150
|
+
Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/tsc) with `nuxt typecheck` command.
|
|
151
151
|
::
|
|
152
152
|
|
|
153
153
|
### Migration
|
|
@@ -160,7 +160,7 @@ Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language
|
|
|
160
160
|
}
|
|
161
161
|
```
|
|
162
162
|
|
|
163
|
-
1. Run `npx
|
|
163
|
+
1. Run `npx nuxt prepare` to generate `.nuxt/tsconfig.json`.
|
|
164
164
|
1. Install Volar following the instructions in the [docs](/docs/getting-started/introduction#prerequisites).
|
|
165
165
|
|
|
166
166
|
## Vue Changes
|