@nuxt/docs-nightly 4.2.0-29344661.0b65203b → 4.2.0-29344710.84b82c47
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 +35 -175
- package/2.guide/3.going-further/1.experimental-features.md +0 -24
- package/2.guide/3.going-further/1.features.md +1 -5
- package/2.guide/4.recipes/2.vite-plugin.md +0 -18
- package/3.api/5.kit/14.builder.md +5 -57
- package/3.api/6.advanced/1.hooks.md +2 -2
- package/package.json +1 -1
|
@@ -34,146 +34,6 @@ 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
|
-
|
|
177
37
|
## Migrating to Nuxt 4
|
|
178
38
|
|
|
179
39
|
Nuxt 4 includes significant improvements and changes. This guide will help you migrate your existing Nuxt 3 application to Nuxt 4.
|
|
@@ -250,11 +110,11 @@ Nuxt now defaults to a new directory structure, with backwards compatibility (so
|
|
|
250
110
|
|
|
251
111
|
#### What Changed
|
|
252
112
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
113
|
+
* the new Nuxt default `srcDir` is `app/` by default, and most things are resolved from there.
|
|
114
|
+
* `serverDir` now defaults to `<rootDir>/server` rather than `<srcDir>/server`
|
|
115
|
+
* `layers/`, `modules/` and `public/` are resolved relative to `<rootDir>` by default
|
|
116
|
+
* if using [Nuxt Content v2.13+](https://github.com/nuxt/content/pull/2649), `content/` is resolved relative to `<rootDir>`
|
|
117
|
+
* 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>/`
|
|
258
118
|
|
|
259
119
|
<details>
|
|
260
120
|
|
|
@@ -419,15 +279,15 @@ Now modules are loaded in the correct order:
|
|
|
419
279
|
2. **Project modules last** (highest priority)
|
|
420
280
|
|
|
421
281
|
This affects both:
|
|
422
|
-
|
|
423
|
-
|
|
282
|
+
* Modules defined in the `modules` array in `nuxt.config.ts`
|
|
283
|
+
* Auto-discovered modules from the `modules/` directory
|
|
424
284
|
|
|
425
285
|
#### Reasons for Change
|
|
426
286
|
|
|
427
287
|
This change ensures that:
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
288
|
+
* Extended layers have lower priority than the consuming project
|
|
289
|
+
* Module execution order matches the intuitive layer inheritance pattern
|
|
290
|
+
* Module configuration and hooks work as expected in multi-layer setups
|
|
431
291
|
|
|
432
292
|
#### Migration Steps
|
|
433
293
|
|
|
@@ -534,9 +394,9 @@ export default defineNuxtConfig({
|
|
|
534
394
|
[Unhead](https://unhead.unjs.io/), used to generate `<head>` tags, has been updated to version 2. While mostly compatible it includes several breaking changes
|
|
535
395
|
for lower-level APIs.
|
|
536
396
|
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
397
|
+
* Removed props: `vmid`, `hid`, `children`, `body`.
|
|
398
|
+
* Promise input no longer supported.
|
|
399
|
+
* Tags are now sorted using Capo.js by default.
|
|
540
400
|
|
|
541
401
|
#### Migration Steps
|
|
542
402
|
|
|
@@ -544,7 +404,7 @@ The above changes should have minimal impact on your app.
|
|
|
544
404
|
|
|
545
405
|
If you have issues you should verify:
|
|
546
406
|
|
|
547
|
-
|
|
407
|
+
* You're not using any of the removed props.
|
|
548
408
|
|
|
549
409
|
```diff
|
|
550
410
|
useHead({
|
|
@@ -557,7 +417,7 @@ useHead({
|
|
|
557
417
|
})
|
|
558
418
|
```
|
|
559
419
|
|
|
560
|
-
|
|
420
|
+
* 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.
|
|
561
421
|
|
|
562
422
|
```ts
|
|
563
423
|
import { AliasSortingPlugin, TemplateParamsPlugin } from '@unhead/vue/plugins'
|
|
@@ -1055,9 +915,9 @@ Finally, providing code serialization functions directly within Nuxt is not idea
|
|
|
1055
915
|
|
|
1056
916
|
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:
|
|
1057
917
|
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
918
|
+
* Moving your string interpolation logic directly into `getContents()`.
|
|
919
|
+
* Using a custom function to handle the replacement, such as in https://github.com/nuxt-modules/color-mode/pull/240.
|
|
920
|
+
* Use `es-toolkit/compat` (a drop-in replacement for lodash template), as a dependency of _your_ project rather than Nuxt:
|
|
1061
921
|
|
|
1062
922
|
```diff
|
|
1063
923
|
+ import { readFileSync } from 'node:fs'
|
|
@@ -1140,11 +1000,11 @@ There are two approaches:
|
|
|
1140
1000
|
Nuxt now generates separate TypeScript configurations for different contexts to provide better type-checking experiences:
|
|
1141
1001
|
|
|
1142
1002
|
1. **New TypeScript configuration files**: Nuxt now generates additional TypeScript configurations:
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1003
|
+
* `.nuxt/tsconfig.app.json` - For your app code (Vue components, composables, etc.)
|
|
1004
|
+
* `.nuxt/tsconfig.server.json` - For your server-side code (Nitro/server directory)
|
|
1005
|
+
* `.nuxt/tsconfig.node.json` - For your build-time code (modules, `nuxt.config.ts`, etc.)
|
|
1006
|
+
* `.nuxt/tsconfig.shared.json` - For code shared between app and server contexts (like types and non-environment specific utilities)
|
|
1007
|
+
* `.nuxt/tsconfig.json` - Legacy configuration for backward compatibility
|
|
1148
1008
|
|
|
1149
1009
|
2. **Backward compatibility**: Existing projects that extend `.nuxt/tsconfig.json` will continue to work as before.
|
|
1150
1010
|
|
|
@@ -1195,9 +1055,9 @@ However, to take advantage of improved type checking, you can opt in to the new
|
|
|
1195
1055
|
```
|
|
1196
1056
|
|
|
1197
1057
|
4. **Move all type augmentations into their appropriate context**:
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1058
|
+
* If you are augmenting types for the app context, move the files to the `app/` directory.
|
|
1059
|
+
* If you are augmenting types for the server context, move the files to the `server/` directory.
|
|
1060
|
+
* If you are augmenting types that are **shared between the app and server**, move the files to the `shared/` directory.
|
|
1201
1061
|
|
|
1202
1062
|
::warning
|
|
1203
1063
|
Augmenting types from outside the `app/`, `server/`, or `shared/` directories will not work with the new project references setup.
|
|
@@ -1237,11 +1097,11 @@ The new configuration provides better type safety and IntelliSense for projects
|
|
|
1237
1097
|
|
|
1238
1098
|
Four experimental features are no longer configurable in Nuxt 4:
|
|
1239
1099
|
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1100
|
+
* `experimental.treeshakeClientOnly` will be `true` (default since v3.0)
|
|
1101
|
+
* `experimental.configSchema` will be `true` (default since v3.3)
|
|
1102
|
+
* `experimental.polyfillVueUseHead` will be `false` (default since v3.4)
|
|
1103
|
+
* `experimental.respectNoSSRHeader` will be `false` (default since v3.4)
|
|
1104
|
+
* `vite.devBundler` is no longer configurable - it will use `vite-node` by default
|
|
1245
1105
|
|
|
1246
1106
|
#### Reasons for Change
|
|
1247
1107
|
|
|
@@ -1249,9 +1109,9 @@ These options have been set to their current values for some time and we do not
|
|
|
1249
1109
|
|
|
1250
1110
|
#### Migration Steps
|
|
1251
1111
|
|
|
1252
|
-
|
|
1112
|
+
* `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)
|
|
1253
1113
|
|
|
1254
|
-
|
|
1114
|
+
* `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)
|
|
1255
1115
|
|
|
1256
1116
|
### Removal of Top-Level `generate` Configuration
|
|
1257
1117
|
|
|
@@ -1261,8 +1121,8 @@ These options have been set to their current values for some time and we do not
|
|
|
1261
1121
|
|
|
1262
1122
|
The top-level `generate` configuration option is no longer available in Nuxt 4. This includes all of its properties:
|
|
1263
1123
|
|
|
1264
|
-
|
|
1265
|
-
|
|
1124
|
+
* `generate.exclude` - for excluding routes from prerendering
|
|
1125
|
+
* `generate.routes` - for specifying routes to prerender
|
|
1266
1126
|
|
|
1267
1127
|
#### Reasons for Change
|
|
1268
1128
|
|
|
@@ -895,27 +895,3 @@ 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.
|
|
67
67
|
|
|
68
68
|
```ts
|
|
69
69
|
export default defineNuxtConfig({
|
|
@@ -73,10 +73,6 @@ 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
|
-
|
|
80
76
|
### multiApp
|
|
81
77
|
|
|
82
78
|
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.
|
|
@@ -79,24 +79,6 @@ 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
|
-
|
|
100
82
|
::important
|
|
101
83
|
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`.
|
|
102
84
|
::
|
|
@@ -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.
|
|
19
19
|
::
|
|
20
20
|
|
|
21
21
|
### Usage
|
|
@@ -34,45 +34,6 @@ 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
|
-
|
|
76
37
|
### Type
|
|
77
38
|
|
|
78
39
|
```ts twoslash
|
|
@@ -97,8 +58,8 @@ Checkout Vite website for more information about its configuration.
|
|
|
97
58
|
| --------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------ |
|
|
98
59
|
| `dev` | `boolean` | `false` | If set to `true`, the callback function will be called when building in development mode. |
|
|
99
60
|
| `build` | `boolean` | `false` | If set to `true`, the callback function will be called when building in production mode. |
|
|
100
|
-
| `server` | `boolean` | `false` | If set to `true`, the callback function will be called when building the server bundle.
|
|
101
|
-
| `client` | `boolean` | `false` | If set to `true`, the callback function will be called when building the client bundle.
|
|
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. |
|
|
102
63
|
| `prepend` | `boolean` | `false` | If set to `true`, the callback function will be prepended to the array with `unshift()` instead of `push()`. |
|
|
103
64
|
|
|
104
65
|
## `extendWebpackConfig`
|
|
@@ -154,10 +115,6 @@ Checkout webpack website for more information about its configuration.
|
|
|
154
115
|
|
|
155
116
|
Append Vite plugin to the config.
|
|
156
117
|
|
|
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
|
-
|
|
161
118
|
### Usage
|
|
162
119
|
|
|
163
120
|
```ts twoslash
|
|
@@ -178,15 +135,6 @@ export default defineNuxtModule({
|
|
|
178
135
|
},
|
|
179
136
|
setup (options) {
|
|
180
137
|
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
|
-
}))
|
|
190
138
|
},
|
|
191
139
|
})
|
|
192
140
|
```
|
|
@@ -215,8 +163,8 @@ See [Vite website](https://vite.dev/guide/api-plugin.html) for more information
|
|
|
215
163
|
| --------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------ |
|
|
216
164
|
| `dev` | `boolean` | `false` | If set to `true`, the callback function will be called when building in development mode. |
|
|
217
165
|
| `build` | `boolean` | `false` | If set to `true`, the callback function will be called when building in production mode. |
|
|
218
|
-
| `server` | `boolean` | `false` | If set to `true`, the callback function will be called when building the server bundle.
|
|
219
|
-
| `client` | `boolean` | `false` | If set to `true`, the callback function will be called when building the client bundle.
|
|
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. |
|
|
220
168
|
| `prepend` | `boolean` | `false` | If set to `true`, the callback function will be prepended to the array with `unshift()` instead of `push()`. |
|
|
221
169
|
|
|
222
170
|
## `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.** We recommend adding a Vite plugin with a `config` hook.
|
|
79
|
+
`vite:configResolved` | `viteInlineConfig, env` | Allows reading the resolved Vite config. **Deprecated.** We recommend adding a Vite plugin with a `configResolved` hook.
|
|
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.
|