@nuxt/docs-nightly 4.2.0-29344722.285eac31 → 4.2.0-29345484.1f69d1e1
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/18.upgrade.md +175 -35
- package/2.guide/3.going-further/1.experimental-features.md +24 -0
- package/2.guide/3.going-further/1.features.md +5 -1
- package/2.guide/3.going-further/3.modules.md +35 -19
- package/2.guide/3.going-further/7.layers.md +1 -1
- package/2.guide/4.recipes/2.vite-plugin.md +18 -0
- package/3.api/5.kit/1.modules.md +87 -1
- package/3.api/5.kit/14.builder.md +57 -5
- package/3.api/6.advanced/1.hooks.md +2 -2
- package/package.json +1 -1
|
@@ -34,6 +34,146 @@ bun x nuxt upgrade
|
|
|
34
34
|
|
|
35
35
|
To use the latest Nuxt build and test features before their release, read about the [nightly release channel](/docs/4.x/guide/going-further/nightly-release-channel) guide.
|
|
36
36
|
|
|
37
|
+
## Testing Nuxt 5
|
|
38
|
+
|
|
39
|
+
Nuxt 5 is **currently in development**. Until the release, it is possible to test many of Nuxt 5's breaking changes from Nuxt version 4.2+.
|
|
40
|
+
|
|
41
|
+
### Opting in to Nuxt 5
|
|
42
|
+
|
|
43
|
+
First, upgrade Nuxt to the [latest release](https://github.com/nuxt/nuxt/releases).
|
|
44
|
+
|
|
45
|
+
Then you can set your `future.compatibilityVersion` to match Nuxt 5 behavior:
|
|
46
|
+
|
|
47
|
+
```ts twoslash [nuxt.config.ts]
|
|
48
|
+
export default defineNuxtConfig({
|
|
49
|
+
future: {
|
|
50
|
+
compatibilityVersion: 5,
|
|
51
|
+
},
|
|
52
|
+
})
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
When you set your `future.compatibilityVersion` to `5`, defaults throughout your Nuxt configuration will change to opt in to Nuxt v5 behavior, including:
|
|
56
|
+
|
|
57
|
+
- **Vite Environment API**: Automatically enables the new [Vite Environment API](#migration-to-vite-environment-api) for improved build configuration
|
|
58
|
+
- Other Nuxt 5 improvements and changes as they become available
|
|
59
|
+
|
|
60
|
+
::note
|
|
61
|
+
This section is subject to change until the final release, so please check back here regularly if you are testing Nuxt 5 using `future.compatibilityVersion: 5`.
|
|
62
|
+
::
|
|
63
|
+
|
|
64
|
+
Breaking or significant changes will be noted below along with migration steps for backward/forward compatibility.
|
|
65
|
+
|
|
66
|
+
### Migration to Vite Environment API
|
|
67
|
+
|
|
68
|
+
🚦 **Impact Level**: Medium
|
|
69
|
+
|
|
70
|
+
#### What Changed
|
|
71
|
+
|
|
72
|
+
Nuxt 5 migrates to Vite 6's new [Environment API](https://vite.dev/guide/api-environment), which formalizes the concept of environments and provides better control over configuration per environment.
|
|
73
|
+
|
|
74
|
+
Previously, Nuxt used separate client and server Vite configurations. Now, Nuxt uses a shared Vite configuration with environment-specific plugins that use the `applyToEnvironment()` method to target specific environments.
|
|
75
|
+
|
|
76
|
+
::tip
|
|
77
|
+
You can test this feature early by setting `future.compatibilityVersion: 5` (see [Testing Nuxt 5](#testing-nuxt-5)) or by enabling it explicitly with `experimental.viteEnvironmentApi: true`.
|
|
78
|
+
::
|
|
79
|
+
|
|
80
|
+
**Key changes:**
|
|
81
|
+
|
|
82
|
+
1. **Deprecated environment-specific `extendViteConfig()`**: The `server` and `client` options in `extendViteConfig()` are deprecated and will show warnings when used.
|
|
83
|
+
|
|
84
|
+
2. **Changed plugin registration**: Vite plugins registered with `addVitePlugin()` and only targeting one environment (by passing `server: false` or `client: false`) will not have their `config` or `configResolved` hooks called.
|
|
85
|
+
|
|
86
|
+
3. **Shared configuration**: The `vite:extendConfig` and `vite:configResolved` hooks now work with a shared configuration rather than separate client/server configs.
|
|
87
|
+
|
|
88
|
+
#### Reasons for Change
|
|
89
|
+
|
|
90
|
+
The Vite Environment API provides:
|
|
91
|
+
- Better consistency between development and production builds
|
|
92
|
+
- More granular control over environment-specific configuration
|
|
93
|
+
- Improved performance and plugin architecture
|
|
94
|
+
- Support for custom environments beyond just client and server
|
|
95
|
+
|
|
96
|
+
#### Migration Steps
|
|
97
|
+
|
|
98
|
+
##### 1. Migrate to use Vite plugins
|
|
99
|
+
|
|
100
|
+
We would recommend you use a Vite plugin instead of `extendViteConfig`, `vite:configResolved` and `vite:extendConfig`.
|
|
101
|
+
|
|
102
|
+
```ts
|
|
103
|
+
// Before
|
|
104
|
+
extendViteConfig((config) => {
|
|
105
|
+
config.optimizeDeps.include.push('my-package')
|
|
106
|
+
}, { server: false })
|
|
107
|
+
|
|
108
|
+
nuxt.hook('vite:extendConfig' /* or vite:configResolved */, (config, { isClient }) => {
|
|
109
|
+
if (isClient) {
|
|
110
|
+
config.optimizeDeps.include.push('my-package')
|
|
111
|
+
}
|
|
112
|
+
})
|
|
113
|
+
|
|
114
|
+
// After
|
|
115
|
+
addVitePlugin(() => ({
|
|
116
|
+
name: 'my-plugin',
|
|
117
|
+
config (config) {
|
|
118
|
+
// you can set global vite configuration here
|
|
119
|
+
},
|
|
120
|
+
configResolved (config) {
|
|
121
|
+
// you can access the fully resolved vite configuration here
|
|
122
|
+
},
|
|
123
|
+
configEnvironment (name, config) {
|
|
124
|
+
// you can set environment-specific vite configuration here
|
|
125
|
+
if (name === 'client') {
|
|
126
|
+
config.optimizeDeps ||= {}
|
|
127
|
+
config.optimizeDeps.include ||= []
|
|
128
|
+
config.optimizeDeps.include.push('my-package')
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
applyToEnvironment (environment) {
|
|
132
|
+
return environment.name === 'client'
|
|
133
|
+
},
|
|
134
|
+
}))
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
##### 2. Migrate Vite plugins to use environments
|
|
138
|
+
|
|
139
|
+
Instead of using `addVitePlugin` with `server: false` or `client: false`, you can instead use the new `applyToEnvironment` hook within your plugin.
|
|
140
|
+
|
|
141
|
+
```ts
|
|
142
|
+
// Before
|
|
143
|
+
addVitePlugin(() => ({
|
|
144
|
+
name: 'my-plugin',
|
|
145
|
+
config (config) {
|
|
146
|
+
config.optimizeDeps.include.push('my-package')
|
|
147
|
+
},
|
|
148
|
+
}), { client: false })
|
|
149
|
+
|
|
150
|
+
// After
|
|
151
|
+
addVitePlugin(() => ({
|
|
152
|
+
name: 'my-plugin',
|
|
153
|
+
config (config) {
|
|
154
|
+
// you can set global vite configuration here
|
|
155
|
+
},
|
|
156
|
+
configResolved (config) {
|
|
157
|
+
// you can access the fully resolved vite configuration here
|
|
158
|
+
},
|
|
159
|
+
configEnvironment (name, config) {
|
|
160
|
+
// you can set environment-specific vite configuration here
|
|
161
|
+
if (name === 'client') {
|
|
162
|
+
config.optimizeDeps ||= {}
|
|
163
|
+
config.optimizeDeps.include ||= []
|
|
164
|
+
config.optimizeDeps.include.push('my-package')
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
applyToEnvironment (environment) {
|
|
168
|
+
return environment.name === 'client'
|
|
169
|
+
},
|
|
170
|
+
}))
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
::read-more{to="https://vite.dev/guide/api-environment" target="_blank"}
|
|
174
|
+
Learn more about Vite's Environment API
|
|
175
|
+
::
|
|
176
|
+
|
|
37
177
|
## Migrating to Nuxt 4
|
|
38
178
|
|
|
39
179
|
Nuxt 4 includes significant improvements and changes. This guide will help you migrate your existing Nuxt 3 application to Nuxt 4.
|
|
@@ -110,11 +250,11 @@ Nuxt now defaults to a new directory structure, with backwards compatibility (so
|
|
|
110
250
|
|
|
111
251
|
#### What Changed
|
|
112
252
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
253
|
+
- the new Nuxt default `srcDir` is `app/` by default, and most things are resolved from there.
|
|
254
|
+
- `serverDir` now defaults to `<rootDir>/server` rather than `<srcDir>/server`
|
|
255
|
+
- `layers/`, `modules/` and `public/` are resolved relative to `<rootDir>` by default
|
|
256
|
+
- if using [Nuxt Content v2.13+](https://github.com/nuxt/content/pull/2649), `content/` is resolved relative to `<rootDir>`
|
|
257
|
+
- a new `dir.app` is added, which is the directory we look for `router.options.ts` and `spa-loading-template.html` - this defaults to `<srcDir>/`
|
|
118
258
|
|
|
119
259
|
<details>
|
|
120
260
|
|
|
@@ -279,15 +419,15 @@ Now modules are loaded in the correct order:
|
|
|
279
419
|
2. **Project modules last** (highest priority)
|
|
280
420
|
|
|
281
421
|
This affects both:
|
|
282
|
-
|
|
283
|
-
|
|
422
|
+
- Modules defined in the `modules` array in `nuxt.config.ts`
|
|
423
|
+
- Auto-discovered modules from the `modules/` directory
|
|
284
424
|
|
|
285
425
|
#### Reasons for Change
|
|
286
426
|
|
|
287
427
|
This change ensures that:
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
428
|
+
- Extended layers have lower priority than the consuming project
|
|
429
|
+
- Module execution order matches the intuitive layer inheritance pattern
|
|
430
|
+
- Module configuration and hooks work as expected in multi-layer setups
|
|
291
431
|
|
|
292
432
|
#### Migration Steps
|
|
293
433
|
|
|
@@ -394,9 +534,9 @@ export default defineNuxtConfig({
|
|
|
394
534
|
[Unhead](https://unhead.unjs.io/), used to generate `<head>` tags, has been updated to version 2. While mostly compatible it includes several breaking changes
|
|
395
535
|
for lower-level APIs.
|
|
396
536
|
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
537
|
+
- Removed props: `vmid`, `hid`, `children`, `body`.
|
|
538
|
+
- Promise input no longer supported.
|
|
539
|
+
- Tags are now sorted using Capo.js by default.
|
|
400
540
|
|
|
401
541
|
#### Migration Steps
|
|
402
542
|
|
|
@@ -404,7 +544,7 @@ The above changes should have minimal impact on your app.
|
|
|
404
544
|
|
|
405
545
|
If you have issues you should verify:
|
|
406
546
|
|
|
407
|
-
|
|
547
|
+
- You're not using any of the removed props.
|
|
408
548
|
|
|
409
549
|
```diff
|
|
410
550
|
useHead({
|
|
@@ -417,7 +557,7 @@ useHead({
|
|
|
417
557
|
})
|
|
418
558
|
```
|
|
419
559
|
|
|
420
|
-
|
|
560
|
+
- If you're using [Template Params](https://unhead.unjs.io/docs/head/guides/plugins/template-params) or [Alias Tag Sorting](https://unhead.unjs.io/docs/head/guides/plugins/alias-sorting), you will need to explicitly opt in to these features now.
|
|
421
561
|
|
|
422
562
|
```ts
|
|
423
563
|
import { AliasSortingPlugin, TemplateParamsPlugin } from '@unhead/vue/plugins'
|
|
@@ -915,9 +1055,9 @@ Finally, providing code serialization functions directly within Nuxt is not idea
|
|
|
915
1055
|
|
|
916
1056
|
We have raised PRs to update modules using EJS syntax, but if you need to do this yourself, you have three backwards/forwards-compatible alternatives:
|
|
917
1057
|
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
1058
|
+
- Moving your string interpolation logic directly into `getContents()`.
|
|
1059
|
+
- Using a custom function to handle the replacement, such as in https://github.com/nuxt-modules/color-mode/pull/240.
|
|
1060
|
+
- Use `es-toolkit/compat` (a drop-in replacement for lodash template), as a dependency of _your_ project rather than Nuxt:
|
|
921
1061
|
|
|
922
1062
|
```diff
|
|
923
1063
|
+ import { readFileSync } from 'node:fs'
|
|
@@ -1000,11 +1140,11 @@ There are two approaches:
|
|
|
1000
1140
|
Nuxt now generates separate TypeScript configurations for different contexts to provide better type-checking experiences:
|
|
1001
1141
|
|
|
1002
1142
|
1. **New TypeScript configuration files**: Nuxt now generates additional TypeScript configurations:
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1143
|
+
- `.nuxt/tsconfig.app.json` - For your app code (Vue components, composables, etc.)
|
|
1144
|
+
- `.nuxt/tsconfig.server.json` - For your server-side code (Nitro/server directory)
|
|
1145
|
+
- `.nuxt/tsconfig.node.json` - For your build-time code (modules, `nuxt.config.ts`, etc.)
|
|
1146
|
+
- `.nuxt/tsconfig.shared.json` - For code shared between app and server contexts (like types and non-environment specific utilities)
|
|
1147
|
+
- `.nuxt/tsconfig.json` - Legacy configuration for backward compatibility
|
|
1008
1148
|
|
|
1009
1149
|
2. **Backward compatibility**: Existing projects that extend `.nuxt/tsconfig.json` will continue to work as before.
|
|
1010
1150
|
|
|
@@ -1055,9 +1195,9 @@ However, to take advantage of improved type checking, you can opt in to the new
|
|
|
1055
1195
|
```
|
|
1056
1196
|
|
|
1057
1197
|
4. **Move all type augmentations into their appropriate context**:
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1198
|
+
- If you are augmenting types for the app context, move the files to the `app/` directory.
|
|
1199
|
+
- If you are augmenting types for the server context, move the files to the `server/` directory.
|
|
1200
|
+
- If you are augmenting types that are **shared between the app and server**, move the files to the `shared/` directory.
|
|
1061
1201
|
|
|
1062
1202
|
::warning
|
|
1063
1203
|
Augmenting types from outside the `app/`, `server/`, or `shared/` directories will not work with the new project references setup.
|
|
@@ -1097,11 +1237,11 @@ The new configuration provides better type safety and IntelliSense for projects
|
|
|
1097
1237
|
|
|
1098
1238
|
Four experimental features are no longer configurable in Nuxt 4:
|
|
1099
1239
|
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1240
|
+
- `experimental.treeshakeClientOnly` will be `true` (default since v3.0)
|
|
1241
|
+
- `experimental.configSchema` will be `true` (default since v3.3)
|
|
1242
|
+
- `experimental.polyfillVueUseHead` will be `false` (default since v3.4)
|
|
1243
|
+
- `experimental.respectNoSSRHeader` will be `false` (default since v3.4)
|
|
1244
|
+
- `vite.devBundler` is no longer configurable - it will use `vite-node` by default
|
|
1105
1245
|
|
|
1106
1246
|
#### Reasons for Change
|
|
1107
1247
|
|
|
@@ -1109,9 +1249,9 @@ These options have been set to their current values for some time and we do not
|
|
|
1109
1249
|
|
|
1110
1250
|
#### Migration Steps
|
|
1111
1251
|
|
|
1112
|
-
|
|
1252
|
+
- `polyfillVueUseHead` is implementable in user-land with [this plugin](https://github.com/nuxt/nuxt/blob/f209158352b09d1986aa320e29ff36353b91c358/packages/nuxt/src/head/runtime/plugins/vueuse-head-polyfill.ts#L10-L11)
|
|
1113
1253
|
|
|
1114
|
-
|
|
1254
|
+
- `respectNoSSRHeader`is implementable in user-land with [server middleware](https://github.com/nuxt/nuxt/blob/c660b39447f0d5b8790c0826092638d321cd6821/packages/nuxt/src/core/runtime/nitro/no-ssr.ts#L8-L9)
|
|
1115
1255
|
|
|
1116
1256
|
### Removal of Top-Level `generate` Configuration
|
|
1117
1257
|
|
|
@@ -1121,8 +1261,8 @@ These options have been set to their current values for some time and we do not
|
|
|
1121
1261
|
|
|
1122
1262
|
The top-level `generate` configuration option is no longer available in Nuxt 4. This includes all of its properties:
|
|
1123
1263
|
|
|
1124
|
-
|
|
1125
|
-
|
|
1264
|
+
- `generate.exclude` - for excluding routes from prerendering
|
|
1265
|
+
- `generate.routes` - for specifying routes to prerender
|
|
1126
1266
|
|
|
1127
1267
|
#### Reasons for Change
|
|
1128
1268
|
|
|
@@ -895,3 +895,27 @@ To use this feature, you need to:
|
|
|
895
895
|
::read-more{icon="i-simple-icons-github" to="https://github.com/KazariEX/dxup" target="_blank"}
|
|
896
896
|
Learn more about **@dxup/nuxt**.
|
|
897
897
|
::
|
|
898
|
+
|
|
899
|
+
## viteEnvironmentApi
|
|
900
|
+
|
|
901
|
+
Enable Vite 6's new [Environment API](https://vite.dev/guide/api-environment) for improved build configuration and plugin architecture.
|
|
902
|
+
|
|
903
|
+
When you set `future.compatibilityVersion` to `5`, this feature is enabled by default. You can also enable it explicitly for testing:
|
|
904
|
+
|
|
905
|
+
```ts twoslash [nuxt.config.ts]
|
|
906
|
+
export default defineNuxtConfig({
|
|
907
|
+
experimental: {
|
|
908
|
+
viteEnvironmentApi: true,
|
|
909
|
+
},
|
|
910
|
+
})
|
|
911
|
+
```
|
|
912
|
+
|
|
913
|
+
The Vite Environment API provides better consistency between development and production builds, more granular control over environment-specific configuration, and improved performance.
|
|
914
|
+
|
|
915
|
+
::important
|
|
916
|
+
Enabling this feature changes how Vite plugins are registered and configured. See the [Vite Environment API migration guide](/docs/4.x/getting-started/upgrade#migration-to-vite-environment-api) for details on updating your plugins.
|
|
917
|
+
::
|
|
918
|
+
|
|
919
|
+
::read-more{to="https://vite.dev/guide/api-environment" target="_blank"}
|
|
920
|
+
Learn more about Vite's Environment API.
|
|
921
|
+
::
|
|
@@ -63,7 +63,7 @@ There is also a `future` namespace for early opting-in to new features that will
|
|
|
63
63
|
|
|
64
64
|
This enables early access to Nuxt features or flags.
|
|
65
65
|
|
|
66
|
-
Setting `compatibilityVersion` to `5` changes defaults throughout your Nuxt configuration to opt
|
|
66
|
+
Setting `compatibilityVersion` to `5` changes defaults throughout your Nuxt configuration to opt in to Nuxt v5 behaviour, including enabling the [Vite Environment API](/docs/4.x/guide/going-further/experimental-features#viteenvironmentapi).
|
|
67
67
|
|
|
68
68
|
```ts
|
|
69
69
|
export default defineNuxtConfig({
|
|
@@ -73,6 +73,10 @@ export default defineNuxtConfig({
|
|
|
73
73
|
})
|
|
74
74
|
```
|
|
75
75
|
|
|
76
|
+
::read-more{to="/docs/4.x/getting-started/upgrade#testing-nuxt-5"}
|
|
77
|
+
Learn more about testing Nuxt 5.
|
|
78
|
+
::
|
|
79
|
+
|
|
76
80
|
### multiApp
|
|
77
81
|
|
|
78
82
|
This enables early access to the experimental multi-app support. You can follow the [tracker issue #21635](https://github.com/nuxt/nuxt/issues/21635) to see the progress of multi-app support in Nuxt.
|
|
@@ -501,35 +501,51 @@ export default defineNuxtModule({
|
|
|
501
501
|
|
|
502
502
|
#### Using Other Modules in Your Module
|
|
503
503
|
|
|
504
|
-
If your module depends on other modules, you can
|
|
504
|
+
If your module depends on other modules, you can specify them using the `moduleDependencies` option. This provides a more robust way to handle module dependencies with version constraints and configuration merging:
|
|
505
505
|
|
|
506
506
|
```ts
|
|
507
|
-
import { createResolver, defineNuxtModule
|
|
508
|
-
|
|
509
|
-
export default defineNuxtModule<ModuleOptions>({
|
|
510
|
-
async setup (options, nuxt) {
|
|
511
|
-
const resolver = createResolver(import.meta.url)
|
|
507
|
+
import { createResolver, defineNuxtModule } from '@nuxt/kit'
|
|
512
508
|
|
|
513
|
-
|
|
514
|
-
nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))
|
|
509
|
+
const resolver = createResolver(import.meta.url)
|
|
515
510
|
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
511
|
+
export default defineNuxtModule<ModuleOptions>({
|
|
512
|
+
meta: {
|
|
513
|
+
name: 'my-module',
|
|
514
|
+
},
|
|
515
|
+
moduleDependencies: {
|
|
516
|
+
'@nuxtjs/tailwindcss': {
|
|
517
|
+
// You can specify a version constraint for the module
|
|
518
|
+
version: '>=6',
|
|
519
|
+
// Any configuration that should override `nuxt.options`
|
|
520
|
+
overrides: {
|
|
521
|
+
exposeConfig: true,
|
|
522
|
+
},
|
|
523
|
+
// Any configuration that should be set. It will override module defaults but
|
|
524
|
+
// will not override any configuration set in `nuxt.options`
|
|
525
|
+
defaults: {
|
|
526
|
+
config: {
|
|
527
|
+
darkMode: 'class',
|
|
528
|
+
content: {
|
|
529
|
+
files: [
|
|
530
|
+
resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
|
|
531
|
+
resolver.resolve('./runtime/*.{mjs,js,ts}'),
|
|
532
|
+
],
|
|
533
|
+
},
|
|
526
534
|
},
|
|
527
535
|
},
|
|
528
|
-
}
|
|
536
|
+
},
|
|
537
|
+
},
|
|
538
|
+
setup (options, nuxt) {
|
|
539
|
+
// We can inject our CSS file which includes Tailwind's directives
|
|
540
|
+
nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))
|
|
529
541
|
},
|
|
530
542
|
})
|
|
531
543
|
```
|
|
532
544
|
|
|
545
|
+
::callout{type="info"}
|
|
546
|
+
The `moduleDependencies` option replaces the deprecated `installModule` function and ensures proper setup order and configuration merging.
|
|
547
|
+
::
|
|
548
|
+
|
|
533
549
|
#### Using Hooks
|
|
534
550
|
|
|
535
551
|
[Lifecycle hooks](/docs/4.x/guide/going-further/hooks) allow you to expand almost every aspect of Nuxt. Modules can hook to them programmatically or through the `hooks` map in their definition.
|
|
@@ -234,7 +234,7 @@ export default defineNuxtConfig({
|
|
|
234
234
|
|
|
235
235
|
## Multi-Layer Support for Nuxt Modules
|
|
236
236
|
|
|
237
|
-
You can use the [`getLayerDirectories`](/docs/api/kit/layers#getlayerdirectories) utility from Nuxt Kit to support custom multi-layer handling for your modules.
|
|
237
|
+
You can use the [`getLayerDirectories`](/docs/4.x/api/kit/layers#getlayerdirectories) utility from Nuxt Kit to support custom multi-layer handling for your modules.
|
|
238
238
|
|
|
239
239
|
```ts [modules/my-module.ts]
|
|
240
240
|
import { defineNuxtModule, getLayerDirectories } from 'nuxt/kit'
|
|
@@ -79,6 +79,24 @@ export default defineNuxtModule({
|
|
|
79
79
|
})
|
|
80
80
|
```
|
|
81
81
|
|
|
82
|
+
For environment-specific plugins in Nuxt 5+, use the `applyToEnvironment()` method:
|
|
83
|
+
|
|
84
|
+
```ts [modules/my-module.ts]
|
|
85
|
+
import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
|
|
86
|
+
|
|
87
|
+
export default defineNuxtModule({
|
|
88
|
+
setup () {
|
|
89
|
+
addVitePlugin(() => ({
|
|
90
|
+
name: 'my-client-plugin',
|
|
91
|
+
applyToEnvironment (environment) {
|
|
92
|
+
return environment.name === 'client'
|
|
93
|
+
},
|
|
94
|
+
// Plugin configuration
|
|
95
|
+
}))
|
|
96
|
+
},
|
|
97
|
+
})
|
|
98
|
+
```
|
|
99
|
+
|
|
82
100
|
::important
|
|
83
101
|
If you're writing code that needs to access resolved Vite configuration, you should use the `config` and `configResolved` hooks _within_ your Vite plugin, rather than using Nuxt's `vite:extend`, `vite:extendConfig` and `vite:configResolved`.
|
|
84
102
|
::
|
package/3.api/5.kit/1.modules.md
CHANGED
|
@@ -8,7 +8,7 @@ links:
|
|
|
8
8
|
size: xs
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
-
Modules are the building blocks of Nuxt. Kit provides a set of utilities to help you create and use modules. You can use these utilities to create your own modules or to reuse existing modules. For example, you can use the `defineNuxtModule` function to define a module and the `
|
|
11
|
+
Modules are the building blocks of Nuxt. Kit provides a set of utilities to help you create and use modules. You can use these utilities to create your own modules or to reuse existing modules. For example, you can use the `defineNuxtModule` function to define a module and specify dependencies using the `moduleDependencies` option.
|
|
12
12
|
|
|
13
13
|
## `defineNuxtModule`
|
|
14
14
|
|
|
@@ -62,6 +62,7 @@ export function defineNuxtModule<TOptions extends ModuleOptions> (): {
|
|
|
62
62
|
| `defaults` | `T \| ((nuxt: Nuxt) => T)`{lang="ts"} | `false` | Default options for the module. If a function is provided, it will be called with the Nuxt instance as the first argument. |
|
|
63
63
|
| `schema` | `T` | `false` | Schema for the module options. If provided, options will be applied to the schema. |
|
|
64
64
|
| `hooks` | `Partial<NuxtHooks>`{lang="ts"} | `false` | Hooks to be installed for the module. If provided, the module will install the hooks. |
|
|
65
|
+
| `moduleDependencies` | `Record<string, ModuleDependency> \| ((nuxt: Nuxt) => Record<string, ModuleDependency>)`{lang="ts"} | `false` | Dependencies on other modules with version constraints and configuration. Can be an object or a function that receives the Nuxt instance. See [example](#specifying-module-dependencies). |
|
|
65
66
|
| `onInstall` | `(nuxt: Nuxt) => Awaitable<void>`{lang="ts"} | `false` | Lifecycle hook called when the module is first installed. Requires `meta.name` and `meta.version` to be defined. |
|
|
66
67
|
| `onUpgrade` | `(options: T, nuxt: Nuxt, previousVersion: string) => Awaitable<void>`{lang="ts"} | `false` | Lifecycle hook called when the module is upgraded to a newer version. Requires `meta.name` and `meta.version` to be defined. |
|
|
67
68
|
| `setup` | `(this: void, resolvedOptions: T, nuxt: Nuxt) => Awaitable<void \| false \| ModuleSetupInstallResult>`{lang="ts"} | `false` | Setup function for the module. If provided, the module will call the setup function. |
|
|
@@ -239,8 +240,93 @@ export default defineNuxtModule({
|
|
|
239
240
|
})
|
|
240
241
|
```
|
|
241
242
|
|
|
243
|
+
#### Specifying Module Dependencies
|
|
244
|
+
|
|
245
|
+
You can use the `moduleDependencies` option to declare dependencies on other modules. This provides a robust way to ensure proper setup order, version compatibility, and configuration management.
|
|
246
|
+
|
|
247
|
+
The `moduleDependencies` option can be either an object or a function that receives the Nuxt instance:
|
|
248
|
+
|
|
249
|
+
##### Example
|
|
250
|
+
|
|
251
|
+
```ts
|
|
252
|
+
import { defineNuxtModule } from '@nuxt/kit'
|
|
253
|
+
|
|
254
|
+
export default defineNuxtModule({
|
|
255
|
+
meta: {
|
|
256
|
+
name: 'my-module',
|
|
257
|
+
},
|
|
258
|
+
moduleDependencies: {
|
|
259
|
+
'@nuxtjs/tailwindcss': {
|
|
260
|
+
// Specify a version constraint (semver format)
|
|
261
|
+
version: '>=6.0.0',
|
|
262
|
+
// Configuration that overrides user settings
|
|
263
|
+
overrides: {
|
|
264
|
+
exposeConfig: true,
|
|
265
|
+
},
|
|
266
|
+
// Configuration that sets defaults but respects user settings
|
|
267
|
+
defaults: {
|
|
268
|
+
config: {
|
|
269
|
+
darkMode: 'class',
|
|
270
|
+
},
|
|
271
|
+
},
|
|
272
|
+
},
|
|
273
|
+
'@nuxtjs/fontaine': {
|
|
274
|
+
// Optional dependencies won't be installed but ensure that options
|
|
275
|
+
// can be set if they _are_ installed
|
|
276
|
+
optional: true,
|
|
277
|
+
defaults: {
|
|
278
|
+
fonts: [
|
|
279
|
+
{
|
|
280
|
+
family: 'Roboto',
|
|
281
|
+
fallbacks: ['Impact'],
|
|
282
|
+
},
|
|
283
|
+
],
|
|
284
|
+
},
|
|
285
|
+
},
|
|
286
|
+
},
|
|
287
|
+
setup (options, nuxt) {
|
|
288
|
+
|
|
289
|
+
},
|
|
290
|
+
})
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
You can also use a function to dynamically determine dependencies based on the Nuxt configuration:
|
|
294
|
+
|
|
295
|
+
```ts
|
|
296
|
+
import { defineNuxtModule } from '@nuxt/kit'
|
|
297
|
+
|
|
298
|
+
export default defineNuxtModule({
|
|
299
|
+
meta: {
|
|
300
|
+
name: 'my-module',
|
|
301
|
+
},
|
|
302
|
+
moduleDependencies (nuxt) {
|
|
303
|
+
const dependencies: Record<string, any> = {
|
|
304
|
+
'@nuxtjs/tailwindcss': {
|
|
305
|
+
version: '>=6.0.0',
|
|
306
|
+
},
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
// Conditionally add dependencies based on Nuxt config
|
|
310
|
+
if (nuxt.options.experimental?.someFeature) {
|
|
311
|
+
dependencies['@nuxtjs/fontaine'] = {
|
|
312
|
+
optional: true,
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
return dependencies
|
|
317
|
+
},
|
|
318
|
+
setup (options, nuxt) {
|
|
319
|
+
// Your setup logic runs after all dependencies are initialized
|
|
320
|
+
},
|
|
321
|
+
})
|
|
322
|
+
```
|
|
323
|
+
|
|
242
324
|
## `installModule`
|
|
243
325
|
|
|
326
|
+
::callout{type="warning"}
|
|
327
|
+
**Deprecated:** Use the [`moduleDependencies`](#specifying-module-dependencies) option in `defineNuxtModule` instead. The `installModule` function will be removed (or may become non-blocking) in a future version.
|
|
328
|
+
::
|
|
329
|
+
|
|
244
330
|
Install specified Nuxt module programmatically. This is helpful when your module depends on other modules. You can pass the module options as an object to `inlineOptions` and they will be passed to the module's `setup` function.
|
|
245
331
|
|
|
246
332
|
### Usage
|
|
@@ -15,7 +15,7 @@ Nuxt have builders based on [Vite](https://github.com/nuxt/nuxt/tree/main/packag
|
|
|
15
15
|
Extends the Vite configuration. Callback function can be called multiple times, when applying to both client and server builds.
|
|
16
16
|
|
|
17
17
|
::warning
|
|
18
|
-
This hook is now deprecated, and we recommend using a Vite plugin instead with a `config` hook.
|
|
18
|
+
This hook is now deprecated, and we recommend using a Vite plugin instead with a `config` hook, or — for environment-specific configuration — the `applyToEnvironment` hook.
|
|
19
19
|
::
|
|
20
20
|
|
|
21
21
|
### Usage
|
|
@@ -34,6 +34,45 @@ export default defineNuxtModule({
|
|
|
34
34
|
})
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
+
For environment-specific configuration in Nuxt 5+, use `addVitePlugin()` instead:
|
|
38
|
+
|
|
39
|
+
```ts twoslash
|
|
40
|
+
import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
|
|
41
|
+
|
|
42
|
+
export default defineNuxtModule({
|
|
43
|
+
setup () {
|
|
44
|
+
// For global configuration (affects all environments)
|
|
45
|
+
addVitePlugin(() => ({
|
|
46
|
+
name: 'my-global-plugin',
|
|
47
|
+
config (config) {
|
|
48
|
+
// This runs before environment setup
|
|
49
|
+
config.optimizeDeps ||= {}
|
|
50
|
+
config.optimizeDeps.include ||= []
|
|
51
|
+
config.optimizeDeps.include.push('cross-fetch')
|
|
52
|
+
},
|
|
53
|
+
}))
|
|
54
|
+
|
|
55
|
+
// For environment-specific configuration
|
|
56
|
+
addVitePlugin(() => ({
|
|
57
|
+
name: 'my-client-plugin',
|
|
58
|
+
applyToEnvironment (environment) {
|
|
59
|
+
return environment.name === 'client'
|
|
60
|
+
},
|
|
61
|
+
configEnvironment (name, config) {
|
|
62
|
+
// This only affects the client environment
|
|
63
|
+
config.optimizeDeps ||= {}
|
|
64
|
+
config.optimizeDeps.include ||= []
|
|
65
|
+
config.optimizeDeps.include.push('client-only-package')
|
|
66
|
+
},
|
|
67
|
+
}))
|
|
68
|
+
},
|
|
69
|
+
})
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
::warning
|
|
73
|
+
**Important:** The `config` hook runs before `applyToEnvironment` and modifies the global configuration. Use `configEnvironment` for environment-specific configuration changes.
|
|
74
|
+
::
|
|
75
|
+
|
|
37
76
|
### Type
|
|
38
77
|
|
|
39
78
|
```ts twoslash
|
|
@@ -58,8 +97,8 @@ Checkout Vite website for more information about its configuration.
|
|
|
58
97
|
| --------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------ |
|
|
59
98
|
| `dev` | `boolean` | `false` | If set to `true`, the callback function will be called when building in development mode. |
|
|
60
99
|
| `build` | `boolean` | `false` | If set to `true`, the callback function will be called when building in production mode. |
|
|
61
|
-
| `server` | `boolean` | `false` | If set to `true`, the callback function will be called when building the server bundle.
|
|
62
|
-
| `client` | `boolean` | `false` | If set to `true`, the callback function will be called when building the client bundle.
|
|
100
|
+
| `server` | `boolean` | `false` | If set to `true`, the callback function will be called when building the server bundle. **Deprecated in Nuxt 5+.** Use `addVitePlugin()` with `applyToEnvironment()` instead. |
|
|
101
|
+
| `client` | `boolean` | `false` | If set to `true`, the callback function will be called when building the client bundle. **Deprecated in Nuxt 5+.** Use `addVitePlugin()` with `applyToEnvironment()` instead. |
|
|
63
102
|
| `prepend` | `boolean` | `false` | If set to `true`, the callback function will be prepended to the array with `unshift()` instead of `push()`. |
|
|
64
103
|
|
|
65
104
|
## `extendWebpackConfig`
|
|
@@ -115,6 +154,10 @@ Checkout webpack website for more information about its configuration.
|
|
|
115
154
|
|
|
116
155
|
Append Vite plugin to the config.
|
|
117
156
|
|
|
157
|
+
::warning
|
|
158
|
+
In Nuxt 5+, plugins registered with `server: false` or `client: false` options will not have their `config` or `configResolved` hooks called. Instead, use the `applyToEnvironment()` method instead for environment-specific plugins.
|
|
159
|
+
::
|
|
160
|
+
|
|
118
161
|
### Usage
|
|
119
162
|
|
|
120
163
|
```ts twoslash
|
|
@@ -135,6 +178,15 @@ export default defineNuxtModule({
|
|
|
135
178
|
},
|
|
136
179
|
setup (options) {
|
|
137
180
|
addVitePlugin(svg4VuePlugin(options.svg4vue))
|
|
181
|
+
|
|
182
|
+
// or, to add a vite plugin to only one environment
|
|
183
|
+
addVitePlugin(() => ({
|
|
184
|
+
name: 'my-client-plugin',
|
|
185
|
+
applyToEnvironment (environment) {
|
|
186
|
+
return environment.name === 'client'
|
|
187
|
+
},
|
|
188
|
+
// ... rest of your client-only plugin
|
|
189
|
+
}))
|
|
138
190
|
},
|
|
139
191
|
})
|
|
140
192
|
```
|
|
@@ -163,8 +215,8 @@ See [Vite website](https://vite.dev/guide/api-plugin.html) for more information
|
|
|
163
215
|
| --------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------ |
|
|
164
216
|
| `dev` | `boolean` | `false` | If set to `true`, the callback function will be called when building in development mode. |
|
|
165
217
|
| `build` | `boolean` | `false` | If set to `true`, the callback function will be called when building in production mode. |
|
|
166
|
-
| `server` | `boolean` | `false` | If set to `true`, the callback function will be called when building the server bundle.
|
|
167
|
-
| `client` | `boolean` | `false` | If set to `true`, the callback function will be called when building the client bundle.
|
|
218
|
+
| `server` | `boolean` | `false` | If set to `true`, the callback function will be called when building the server bundle. **Deprecated in Nuxt 5+.** Use `applyToEnvironment()` instead. |
|
|
219
|
+
| `client` | `boolean` | `false` | If set to `true`, the callback function will be called when building the client bundle. **Deprecated in Nuxt 5+.** Use `applyToEnvironment()` instead. |
|
|
168
220
|
| `prepend` | `boolean` | `false` | If set to `true`, the callback function will be prepended to the array with `unshift()` instead of `push()`. |
|
|
169
221
|
|
|
170
222
|
## `addWebpackPlugin`
|
|
@@ -75,8 +75,8 @@ Hook | Arguments | Description
|
|
|
75
75
|
`schema:beforeWrite` | `schema` | Called before writing the given schema.
|
|
76
76
|
`schema:written` | - | Called after the schema is written.
|
|
77
77
|
`vite:extend` | `viteBuildContext` | Allows extending Vite default context.
|
|
78
|
-
`vite:extendConfig` | `viteInlineConfig, env` | Allows extending Vite default config. **Deprecated
|
|
79
|
-
`vite:configResolved` | `viteInlineConfig, env` | Allows reading the resolved Vite config. **Deprecated
|
|
78
|
+
`vite:extendConfig` | `viteInlineConfig, env` | Allows extending Vite default config. **Deprecated in Nuxt 5+.** In Nuxt 5, this operates on a shared configuration rather than separate client/server configs.
|
|
79
|
+
`vite:configResolved` | `viteInlineConfig, env` | Allows reading the resolved Vite config. **Deprecated in Nuxt 5+.** In Nuxt 5, this operates on a shared configuration rather than separate client/server configs.
|
|
80
80
|
`vite:serverCreated` | `viteServer, env` | Called when the Vite server is created.
|
|
81
81
|
`vite:compiled` | - | Called after Vite server is compiled.
|
|
82
82
|
`webpack:config` | `webpackConfigs` | Called before configuring the webpack compiler.
|