@nuxt/docs-nightly 4.0.0-29162105.8c587084 → 4.0.0-29165109.5b7cbcb6
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/10.data-fetching.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 +51 -9
- package/2.guide/1.concepts/3.rendering.md +3 -3
- 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.app/.navigation.yml +5 -0
- package/2.guide/2.directory-structure/{1.composables.md → 1.app/1.composables.md} +1 -1
- package/2.guide/2.directory-structure/{1.pages.md → 1.app/1.pages.md} +2 -2
- package/2.guide/2.directory-structure/1.content.md +1 -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.events.md +1 -1
- 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 +3 -3
- package/2.guide/3.going-further/9.debugging.md +1 -5
- package/2.guide/4.recipes/1.custom-routing.md +5 -5
- package/2.guide/4.recipes/4.sessions-and-authentication.md +2 -2
- 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-async-data.md +1 -1
- package/3.api/2.composables/use-cookie.md +5 -4
- package/3.api/2.composables/use-fetch.md +1 -1
- package/3.api/2.composables/use-preview-mode.md +3 -3
- package/3.api/3.utils/define-page-meta.md +1 -1
- 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/11.nitro.md +48 -1
- package/3.api/5.kit/4.autoimports.md +8 -8
- package/3.api/6.advanced/1.hooks.md +1 -1
- package/3.api/6.nuxt-config.md +2932 -3
- 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/7.migration/7.component-options.md +1 -1
- package/package.json +1 -1
- /package/2.guide/2.directory-structure/{1.assets.md → 1.app/1.assets.md} +0 -0
- /package/2.guide/2.directory-structure/{1.components.md → 1.app/1.components.md} +0 -0
- /package/2.guide/2.directory-structure/{1.layouts.md → 1.app/1.layouts.md} +0 -0
- /package/2.guide/2.directory-structure/{1.middleware.md → 1.app/1.middleware.md} +0 -0
- /package/2.guide/2.directory-structure/{1.plugins.md → 1.app/1.plugins.md} +0 -0
- /package/2.guide/2.directory-structure/{1.utils.md → 1.app/1.utils.md} +0 -0
- /package/2.guide/2.directory-structure/{3.app-config.md → 1.app/3.app-config.md} +0 -0
- /package/2.guide/2.directory-structure/{3.app.md → 1.app/3.app.md} +0 -0
- /package/2.guide/2.directory-structure/{3.error.md → 1.app/3.error.md} +0 -0
package/3.api/6.nuxt-config.md
CHANGED
|
@@ -5,8 +5,2937 @@ description: Discover all the options you can use in your nuxt.config.ts file.
|
|
|
5
5
|
navigation.icon: i-lucide-cog
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
## alias
|
|
9
|
+
|
|
10
|
+
You can improve your DX by defining additional aliases to access custom directories within your JavaScript and CSS.
|
|
11
|
+
|
|
12
|
+
- **Type**: `object`
|
|
13
|
+
- **Default**
|
|
14
|
+
```json
|
|
15
|
+
{
|
|
16
|
+
"~": "/<srcDir>",
|
|
17
|
+
"@": "/<srcDir>",
|
|
18
|
+
"~~": "/<rootDir>",
|
|
19
|
+
"@@": "/<rootDir>",
|
|
20
|
+
"#shared": "/<rootDir>/shared",
|
|
21
|
+
"assets": "/<srcDir>/assets",
|
|
22
|
+
"public": "/<srcDir>/public",
|
|
23
|
+
"#build": "/<rootDir>/.nuxt",
|
|
24
|
+
"#internal/nuxt/paths": "/<rootDir>/.nuxt/paths.mjs"
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
::callout
|
|
29
|
+
**Note**: Within a webpack context (image sources, CSS - but not JavaScript) you _must_ access
|
|
30
|
+
your alias by prefixing it with `~`.
|
|
31
|
+
::
|
|
32
|
+
|
|
33
|
+
::callout
|
|
34
|
+
**Note**: These aliases will be automatically added to the generated `.nuxt/tsconfig.json` so you can get full
|
|
35
|
+
type support and path auto-complete. In case you need to extend options provided by `./.nuxt/tsconfig.json`
|
|
36
|
+
further, make sure to add them here or within the `typescript.TSConfig` property in `nuxt.config`.
|
|
37
|
+
::
|
|
38
|
+
|
|
39
|
+
**Example**:
|
|
40
|
+
```js
|
|
41
|
+
export default {
|
|
42
|
+
alias: {
|
|
43
|
+
'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
|
|
44
|
+
'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
|
|
45
|
+
'data': fileURLToPath(new URL('./assets/other/data', import.meta.url))
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<template>
|
|
52
|
+
<img src="~images/main-bg.jpg">
|
|
53
|
+
</template>
|
|
54
|
+
|
|
55
|
+
<script>
|
|
56
|
+
import data from 'data/test.json'
|
|
57
|
+
</script>
|
|
58
|
+
|
|
59
|
+
<style>
|
|
60
|
+
// Uncomment the below
|
|
61
|
+
//@import '~style/variables.scss';
|
|
62
|
+
//@import '~style/utils.scss';
|
|
63
|
+
//@import '~style/base.scss';
|
|
64
|
+
body {
|
|
65
|
+
background-image: url('~images/main-bg.jpg');
|
|
66
|
+
}
|
|
67
|
+
</style>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## analyzeDir
|
|
71
|
+
|
|
72
|
+
The directory where Nuxt will store the generated files when running `nuxt analyze`.
|
|
73
|
+
|
|
74
|
+
If a relative path is specified, it will be relative to your `rootDir`.
|
|
75
|
+
|
|
76
|
+
- **Type**: `string`
|
|
77
|
+
- **Default:** `"/<rootDir>/.nuxt/analyze"`
|
|
78
|
+
|
|
79
|
+
## app
|
|
80
|
+
|
|
81
|
+
Nuxt App configuration.
|
|
82
|
+
|
|
83
|
+
### `baseURL`
|
|
84
|
+
|
|
85
|
+
The base path of your Nuxt application.
|
|
86
|
+
|
|
87
|
+
For example:
|
|
88
|
+
|
|
89
|
+
- **Type**: `string`
|
|
90
|
+
- **Default:** `"/"`
|
|
91
|
+
|
|
92
|
+
**Example**:
|
|
93
|
+
```ts
|
|
94
|
+
export default defineNuxtConfig({
|
|
95
|
+
app: {
|
|
96
|
+
baseURL: '/prefix/'
|
|
97
|
+
}
|
|
98
|
+
})
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
This can also be set at runtime by setting the NUXT_APP_BASE_URL environment variable.
|
|
102
|
+
|
|
103
|
+
**Example**:
|
|
104
|
+
```bash
|
|
105
|
+
NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### `buildAssetsDir`
|
|
109
|
+
|
|
110
|
+
The folder name for the built site assets, relative to `baseURL` (or `cdnURL` if set). This is set at build time and should not be customized at runtime.
|
|
111
|
+
|
|
112
|
+
- **Type**: `string`
|
|
113
|
+
- **Default:** `"/_nuxt/"`
|
|
114
|
+
|
|
115
|
+
### `cdnURL`
|
|
116
|
+
|
|
117
|
+
An absolute URL to serve the public folder from (production-only).
|
|
118
|
+
|
|
119
|
+
For example:
|
|
120
|
+
|
|
121
|
+
- **Type**: `string`
|
|
122
|
+
- **Default:** `""`
|
|
123
|
+
|
|
124
|
+
**Example**:
|
|
125
|
+
```ts
|
|
126
|
+
export default defineNuxtConfig({
|
|
127
|
+
app: {
|
|
128
|
+
cdnURL: 'https://mycdn.org/'
|
|
129
|
+
}
|
|
130
|
+
})
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
This can be set to a different value at runtime by setting the `NUXT_APP_CDN_URL` environment variable.
|
|
134
|
+
|
|
135
|
+
**Example**:
|
|
136
|
+
```bash
|
|
137
|
+
NUXT_APP_CDN_URL=https://mycdn.org/ node .output/server/index.mjs
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### `head`
|
|
141
|
+
|
|
142
|
+
Set default configuration for `<head>` on every page.
|
|
143
|
+
|
|
144
|
+
- **Type**: `object`
|
|
145
|
+
- **Default**
|
|
146
|
+
```json
|
|
147
|
+
{
|
|
148
|
+
"meta": [
|
|
149
|
+
{
|
|
150
|
+
"name": "viewport",
|
|
151
|
+
"content": "width=device-width, initial-scale=1"
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"charset": "utf-8"
|
|
155
|
+
}
|
|
156
|
+
],
|
|
157
|
+
"link": [],
|
|
158
|
+
"style": [],
|
|
159
|
+
"script": [],
|
|
160
|
+
"noscript": []
|
|
161
|
+
}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
**Example**:
|
|
165
|
+
```js
|
|
166
|
+
app: {
|
|
167
|
+
head: {
|
|
168
|
+
meta: [
|
|
169
|
+
// <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
170
|
+
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
|
|
171
|
+
],
|
|
172
|
+
script: [
|
|
173
|
+
// <script src="https://myawesome-lib.js"></script>
|
|
174
|
+
{ src: 'https://awesome-lib.js' }
|
|
175
|
+
],
|
|
176
|
+
link: [
|
|
177
|
+
// <link rel="stylesheet" href="https://myawesome-lib.css">
|
|
178
|
+
{ rel: 'stylesheet', href: 'https://awesome-lib.css' }
|
|
179
|
+
],
|
|
180
|
+
// please note that this is an area that is likely to change
|
|
181
|
+
style: [
|
|
182
|
+
// <style>:root { color: red }</style>
|
|
183
|
+
{ textContent: ':root { color: red }' }
|
|
184
|
+
],
|
|
185
|
+
noscript: [
|
|
186
|
+
// <noscript>JavaScript is required</noscript>
|
|
187
|
+
{ textContent: 'JavaScript is required' }
|
|
188
|
+
]
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### `keepalive`
|
|
194
|
+
|
|
195
|
+
Default values for KeepAlive configuration between pages.
|
|
196
|
+
|
|
197
|
+
This can be overridden with `definePageMeta` on an individual page. Only JSON-serializable values are allowed.
|
|
198
|
+
|
|
199
|
+
- **Type**: `boolean`
|
|
200
|
+
- **Default:** `false`
|
|
201
|
+
|
|
202
|
+
**See**: [Vue KeepAlive](https://vuejs.org/api/built-in-components.html#keepalive)
|
|
203
|
+
|
|
204
|
+
### `layoutTransition`
|
|
205
|
+
|
|
206
|
+
Default values for layout transitions.
|
|
207
|
+
|
|
208
|
+
This can be overridden with `definePageMeta` on an individual page. Only JSON-serializable values are allowed.
|
|
209
|
+
|
|
210
|
+
- **Type**: `boolean`
|
|
211
|
+
- **Default:** `false`
|
|
212
|
+
|
|
213
|
+
**See**: [Vue Transition docs](https://vuejs.org/api/built-in-components.html#transition)
|
|
214
|
+
|
|
215
|
+
### `pageTransition`
|
|
216
|
+
|
|
217
|
+
Default values for page transitions.
|
|
218
|
+
|
|
219
|
+
This can be overridden with `definePageMeta` on an individual page. Only JSON-serializable values are allowed.
|
|
220
|
+
|
|
221
|
+
- **Type**: `boolean`
|
|
222
|
+
- **Default:** `false`
|
|
223
|
+
|
|
224
|
+
**See**: [Vue Transition docs](https://vuejs.org/api/built-in-components.html#transition)
|
|
225
|
+
|
|
226
|
+
### `rootAttrs`
|
|
227
|
+
|
|
228
|
+
Customize Nuxt root element id.
|
|
229
|
+
|
|
230
|
+
- **Type**: `object`
|
|
231
|
+
- **Default**
|
|
232
|
+
```json
|
|
233
|
+
{
|
|
234
|
+
"id": "__nuxt"
|
|
235
|
+
}
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
### `rootId`
|
|
239
|
+
|
|
240
|
+
Customize Nuxt root element id.
|
|
241
|
+
|
|
242
|
+
- **Type**: `string`
|
|
243
|
+
- **Default:** `"__nuxt"`
|
|
244
|
+
|
|
245
|
+
### `rootTag`
|
|
246
|
+
|
|
247
|
+
Customize Nuxt root element tag.
|
|
248
|
+
|
|
249
|
+
- **Type**: `string`
|
|
250
|
+
- **Default:** `"div"`
|
|
251
|
+
|
|
252
|
+
### `spaLoaderAttrs`
|
|
253
|
+
|
|
254
|
+
Customize Nuxt Nuxt SpaLoader element attributes.
|
|
255
|
+
|
|
256
|
+
#### `id`
|
|
257
|
+
|
|
258
|
+
- **Type**: `string`
|
|
259
|
+
- **Default:** `"__nuxt-loader"`
|
|
260
|
+
|
|
261
|
+
### `spaLoaderTag`
|
|
262
|
+
|
|
263
|
+
Customize Nuxt SpaLoader element tag.
|
|
264
|
+
|
|
265
|
+
- **Type**: `string`
|
|
266
|
+
- **Default:** `"div"`
|
|
267
|
+
|
|
268
|
+
### `teleportAttrs`
|
|
269
|
+
|
|
270
|
+
Customize Nuxt Teleport element attributes.
|
|
271
|
+
|
|
272
|
+
- **Type**: `object`
|
|
273
|
+
- **Default**
|
|
274
|
+
```json
|
|
275
|
+
{
|
|
276
|
+
"id": "teleports"
|
|
277
|
+
}
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
### `teleportId`
|
|
281
|
+
|
|
282
|
+
Customize Nuxt Teleport element id.
|
|
283
|
+
|
|
284
|
+
- **Type**: `string`
|
|
285
|
+
- **Default:** `"teleports"`
|
|
286
|
+
|
|
287
|
+
### `teleportTag`
|
|
288
|
+
|
|
289
|
+
Customize Nuxt Teleport element tag.
|
|
290
|
+
|
|
291
|
+
- **Type**: `string`
|
|
292
|
+
- **Default:** `"div"`
|
|
293
|
+
|
|
294
|
+
### `viewTransition`
|
|
295
|
+
|
|
296
|
+
Default values for view transitions.
|
|
297
|
+
|
|
298
|
+
This only has an effect when **experimental** support for View Transitions is [enabled in your nuxt.config file](/docs/getting-started/transitions#view-transitions-api-experimental).
|
|
299
|
+
This can be overridden with `definePageMeta` on an individual page.
|
|
300
|
+
|
|
301
|
+
- **Type**: `boolean`
|
|
302
|
+
- **Default:** `false`
|
|
303
|
+
|
|
304
|
+
**See**: [Nuxt View Transition API docs](https://nuxt.com/docs/getting-started/transitions#view-transitions-api-experimental)
|
|
305
|
+
|
|
306
|
+
## appConfig
|
|
307
|
+
|
|
308
|
+
Additional app configuration
|
|
309
|
+
|
|
310
|
+
For programmatic usage and type support, you can directly provide app config with this option. It will be merged with `app.config` file as default value.
|
|
311
|
+
|
|
312
|
+
### `nuxt`
|
|
313
|
+
|
|
314
|
+
## appId
|
|
315
|
+
|
|
316
|
+
For multi-app projects, the unique id of the Nuxt application.
|
|
317
|
+
|
|
318
|
+
Defaults to `nuxt-app`.
|
|
319
|
+
|
|
320
|
+
- **Type**: `string`
|
|
321
|
+
- **Default:** `"nuxt-app"`
|
|
322
|
+
|
|
323
|
+
## build
|
|
324
|
+
|
|
325
|
+
Shared build configuration.
|
|
326
|
+
|
|
327
|
+
### `analyze`
|
|
328
|
+
|
|
329
|
+
Nuxt allows visualizing your bundles and how to optimize them.
|
|
330
|
+
|
|
331
|
+
Set to `true` to enable bundle analysis, or pass an object with options: [for webpack](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin) or [for vite](https://github.com/btd/rollup-plugin-visualizer#options).
|
|
332
|
+
|
|
333
|
+
- **Type**: `object`
|
|
334
|
+
- **Default**
|
|
335
|
+
```json
|
|
336
|
+
{
|
|
337
|
+
"template": "treemap",
|
|
338
|
+
"projectRoot": "/<rootDir>",
|
|
339
|
+
"filename": "/<rootDir>/.nuxt/analyze/{name}.html"
|
|
340
|
+
}
|
|
341
|
+
```
|
|
342
|
+
|
|
343
|
+
**Example**:
|
|
344
|
+
```js
|
|
345
|
+
analyze: {
|
|
346
|
+
analyzerMode: 'static'
|
|
347
|
+
}
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
### `templates`
|
|
351
|
+
|
|
352
|
+
It is recommended to use `addTemplate` from `@nuxt/kit` instead of this option.
|
|
353
|
+
|
|
354
|
+
- **Type**: `array`
|
|
355
|
+
|
|
356
|
+
**Example**:
|
|
357
|
+
```js
|
|
358
|
+
templates: [
|
|
359
|
+
{
|
|
360
|
+
src: '~/modules/support/plugin.js', // `src` can be absolute or relative
|
|
361
|
+
dst: 'support.js', // `dst` is relative to project `.nuxt` dir
|
|
362
|
+
}
|
|
363
|
+
]
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
### `transpile`
|
|
367
|
+
|
|
368
|
+
If you want to transpile specific dependencies with Babel, you can add them here. Each item in transpile can be a package name, a function, a string or regex object matching the dependency's file name.
|
|
369
|
+
|
|
370
|
+
You can also use a function to conditionally transpile. The function will receive an object ({ isDev, isServer, isClient, isModern, isLegacy }).
|
|
371
|
+
|
|
372
|
+
- **Type**: `array`
|
|
373
|
+
|
|
374
|
+
**Example**:
|
|
375
|
+
```js
|
|
376
|
+
transpile: [({ isLegacy }) => isLegacy && 'ky']
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
## buildDir
|
|
380
|
+
|
|
381
|
+
Define the directory where your built Nuxt files will be placed.
|
|
382
|
+
|
|
383
|
+
Many tools assume that `.nuxt` is a hidden directory (because it starts with a `.`). If that is a problem, you can use this option to prevent that.
|
|
384
|
+
|
|
385
|
+
- **Type**: `string`
|
|
386
|
+
- **Default:** `"/<rootDir>/.nuxt"`
|
|
387
|
+
|
|
388
|
+
**Example**:
|
|
389
|
+
```js
|
|
390
|
+
export default {
|
|
391
|
+
buildDir: 'nuxt-build'
|
|
392
|
+
}
|
|
393
|
+
```
|
|
394
|
+
|
|
395
|
+
## buildId
|
|
396
|
+
|
|
397
|
+
A unique identifier matching the build. This may contain the hash of the current state of the project.
|
|
398
|
+
|
|
399
|
+
- **Type**: `string`
|
|
400
|
+
- **Default:** `"4a2e2d30-418f-41df-8e58-ed5df06de7fd"`
|
|
401
|
+
|
|
402
|
+
## builder
|
|
403
|
+
|
|
404
|
+
The builder to use for bundling the Vue part of your application.
|
|
405
|
+
|
|
406
|
+
- **Type**: `string`
|
|
407
|
+
- **Default:** `"@nuxt/vite-builder"`
|
|
408
|
+
|
|
409
|
+
## compatibilityDate
|
|
410
|
+
|
|
411
|
+
Specify a compatibility date for your app.
|
|
412
|
+
|
|
413
|
+
This is used to control the behavior of presets in Nitro, Nuxt Image and other modules that may change behavior without a major version bump.
|
|
414
|
+
We plan to improve the tooling around this feature in the future.
|
|
415
|
+
|
|
416
|
+
## components
|
|
417
|
+
|
|
418
|
+
Configure Nuxt component auto-registration.
|
|
419
|
+
|
|
420
|
+
Any components in the directories configured here can be used throughout your pages, layouts (and other components) without needing to explicitly import them.
|
|
421
|
+
|
|
422
|
+
- **Type**: `object`
|
|
423
|
+
- **Default**
|
|
424
|
+
```json
|
|
425
|
+
{
|
|
426
|
+
"dirs": [
|
|
427
|
+
{
|
|
428
|
+
"path": "~/components/global",
|
|
429
|
+
"global": true
|
|
430
|
+
},
|
|
431
|
+
"~/components"
|
|
432
|
+
]
|
|
433
|
+
}
|
|
434
|
+
```
|
|
435
|
+
|
|
436
|
+
**See**: [`components/` directory documentation](https://nuxt.com/docs/guide/directory-structure/components)
|
|
437
|
+
|
|
438
|
+
## css
|
|
439
|
+
|
|
440
|
+
You can define the CSS files/modules/libraries you want to set globally (included in every page).
|
|
441
|
+
|
|
442
|
+
Nuxt will automatically guess the file type by its extension and use the appropriate pre-processor. You will still need to install the required loader if you need to use them.
|
|
443
|
+
|
|
444
|
+
- **Type**: `array`
|
|
445
|
+
|
|
446
|
+
**Example**:
|
|
447
|
+
```js
|
|
448
|
+
css: [
|
|
449
|
+
// Load a Node.js module directly (here it's a Sass file).
|
|
450
|
+
'bulma',
|
|
451
|
+
// CSS file in the project
|
|
452
|
+
'~/assets/css/main.css',
|
|
453
|
+
// SCSS file in the project
|
|
454
|
+
'~/assets/css/main.scss'
|
|
455
|
+
]
|
|
456
|
+
```
|
|
457
|
+
|
|
458
|
+
## debug
|
|
459
|
+
|
|
460
|
+
Set to `true` to enable debug mode.
|
|
461
|
+
|
|
462
|
+
At the moment, it prints out hook names and timings on the server, and logs hook arguments as well in the browser.
|
|
463
|
+
You can also set this to an object to enable specific debug options.
|
|
464
|
+
|
|
465
|
+
- **Type**: `boolean`
|
|
466
|
+
- **Default:** `false`
|
|
467
|
+
|
|
468
|
+
## dev
|
|
469
|
+
|
|
470
|
+
Whether Nuxt is running in development mode.
|
|
471
|
+
|
|
472
|
+
Normally, you should not need to set this.
|
|
473
|
+
|
|
474
|
+
- **Type**: `boolean`
|
|
475
|
+
- **Default:** `false`
|
|
476
|
+
|
|
477
|
+
## devServer
|
|
478
|
+
|
|
479
|
+
### `cors`
|
|
480
|
+
|
|
481
|
+
Set CORS options for the dev server
|
|
482
|
+
|
|
483
|
+
#### `origin`
|
|
484
|
+
|
|
485
|
+
- **Type**: `array`
|
|
486
|
+
- **Default**
|
|
487
|
+
```json
|
|
488
|
+
[
|
|
489
|
+
{}
|
|
490
|
+
]
|
|
491
|
+
```
|
|
492
|
+
|
|
493
|
+
### `host`
|
|
494
|
+
|
|
495
|
+
Dev server listening host
|
|
496
|
+
|
|
497
|
+
### `https`
|
|
498
|
+
|
|
499
|
+
Whether to enable HTTPS.
|
|
500
|
+
|
|
501
|
+
- **Type**: `boolean`
|
|
502
|
+
- **Default:** `false`
|
|
503
|
+
|
|
504
|
+
**Example**:
|
|
505
|
+
```ts
|
|
506
|
+
export default defineNuxtConfig({
|
|
507
|
+
devServer: {
|
|
508
|
+
https: {
|
|
509
|
+
key: './server.key',
|
|
510
|
+
cert: './server.crt'
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
})
|
|
514
|
+
```
|
|
515
|
+
|
|
516
|
+
### `loadingTemplate`
|
|
517
|
+
|
|
518
|
+
Template to show a loading screen
|
|
519
|
+
|
|
520
|
+
- **Type**: `function`
|
|
521
|
+
|
|
522
|
+
### `port`
|
|
523
|
+
|
|
524
|
+
Dev server listening port
|
|
525
|
+
|
|
526
|
+
- **Type**: `number`
|
|
527
|
+
- **Default:** `3000`
|
|
528
|
+
|
|
529
|
+
### `url`
|
|
530
|
+
|
|
531
|
+
Listening dev server URL.
|
|
532
|
+
|
|
533
|
+
This should not be set directly as it will always be overridden by the dev server with the full URL (for module and internal use).
|
|
534
|
+
|
|
535
|
+
- **Type**: `string`
|
|
536
|
+
- **Default:** `"http://localhost:3000"`
|
|
537
|
+
|
|
538
|
+
## devServerHandlers
|
|
539
|
+
|
|
540
|
+
Nitro development-only server handlers.
|
|
541
|
+
|
|
542
|
+
- **Type**: `array`
|
|
543
|
+
|
|
544
|
+
**See**: [Nitro server routes documentation](https://nitro.build/guide/routing)
|
|
545
|
+
|
|
546
|
+
## devtools
|
|
547
|
+
|
|
548
|
+
Enable Nuxt DevTools for development.
|
|
549
|
+
|
|
550
|
+
Breaking changes for devtools might not reflect on the version of Nuxt.
|
|
551
|
+
|
|
552
|
+
**See**: [Nuxt DevTools](https://devtools.nuxt.com/) for more information.
|
|
553
|
+
|
|
554
|
+
## dir
|
|
555
|
+
|
|
556
|
+
Customize default directory structure used by Nuxt.
|
|
557
|
+
|
|
558
|
+
It is better to stick with defaults unless needed.
|
|
559
|
+
|
|
560
|
+
### `app`
|
|
561
|
+
|
|
562
|
+
- **Type**: `string`
|
|
563
|
+
- **Default:** `"app"`
|
|
564
|
+
|
|
565
|
+
### `assets`
|
|
566
|
+
|
|
567
|
+
The assets directory (aliased as `~assets` in your build).
|
|
568
|
+
|
|
569
|
+
- **Type**: `string`
|
|
570
|
+
- **Default:** `"assets"`
|
|
571
|
+
|
|
572
|
+
### `layouts`
|
|
573
|
+
|
|
574
|
+
The layouts directory, each file of which will be auto-registered as a Nuxt layout.
|
|
575
|
+
|
|
576
|
+
- **Type**: `string`
|
|
577
|
+
- **Default:** `"layouts"`
|
|
578
|
+
|
|
579
|
+
### `middleware`
|
|
580
|
+
|
|
581
|
+
The middleware directory, each file of which will be auto-registered as a Nuxt middleware.
|
|
582
|
+
|
|
583
|
+
- **Type**: `string`
|
|
584
|
+
- **Default:** `"middleware"`
|
|
585
|
+
|
|
586
|
+
### `modules`
|
|
587
|
+
|
|
588
|
+
The modules directory, each file in which will be auto-registered as a Nuxt module.
|
|
589
|
+
|
|
590
|
+
- **Type**: `string`
|
|
591
|
+
- **Default:** `"modules"`
|
|
592
|
+
|
|
593
|
+
### `pages`
|
|
594
|
+
|
|
595
|
+
The directory which will be processed to auto-generate your application page routes.
|
|
596
|
+
|
|
597
|
+
- **Type**: `string`
|
|
598
|
+
- **Default:** `"pages"`
|
|
599
|
+
|
|
600
|
+
### `plugins`
|
|
601
|
+
|
|
602
|
+
The plugins directory, each file of which will be auto-registered as a Nuxt plugin.
|
|
603
|
+
|
|
604
|
+
- **Type**: `string`
|
|
605
|
+
- **Default:** `"plugins"`
|
|
606
|
+
|
|
607
|
+
### `public`
|
|
608
|
+
|
|
609
|
+
The directory containing your static files, which will be directly accessible via the Nuxt server and copied across into your `dist` folder when your app is generated.
|
|
610
|
+
|
|
611
|
+
- **Type**: `string`
|
|
612
|
+
- **Default:** `"public"`
|
|
613
|
+
|
|
614
|
+
### `shared`
|
|
615
|
+
|
|
616
|
+
The shared directory. This directory is shared between the app and the server.
|
|
617
|
+
|
|
618
|
+
- **Type**: `string`
|
|
619
|
+
- **Default:** `"shared"`
|
|
620
|
+
|
|
621
|
+
### `static`
|
|
622
|
+
|
|
623
|
+
- **Type**: `string`
|
|
624
|
+
- **Default:** `"public"`
|
|
625
|
+
|
|
626
|
+
## esbuild
|
|
627
|
+
|
|
628
|
+
### `options`
|
|
629
|
+
|
|
630
|
+
Configure shared esbuild options used within Nuxt and passed to other builders, such as Vite or webpack.
|
|
631
|
+
|
|
632
|
+
#### `jsxFactory`
|
|
633
|
+
|
|
634
|
+
- **Type**: `string`
|
|
635
|
+
- **Default:** `"h"`
|
|
636
|
+
|
|
637
|
+
#### `jsxFragment`
|
|
638
|
+
|
|
639
|
+
- **Type**: `string`
|
|
640
|
+
- **Default:** `"Fragment"`
|
|
641
|
+
|
|
642
|
+
#### `target`
|
|
643
|
+
|
|
644
|
+
- **Type**: `string`
|
|
645
|
+
- **Default:** `"esnext"`
|
|
646
|
+
|
|
647
|
+
#### `tsconfigRaw`
|
|
648
|
+
|
|
649
|
+
- **Type**: `object`
|
|
650
|
+
|
|
651
|
+
## experimental
|
|
652
|
+
|
|
653
|
+
### `alwaysRunFetchOnKeyChange`
|
|
654
|
+
|
|
655
|
+
Whether to run `useFetch` when the key changes, even if it is set to `immediate: false` and it has not been triggered yet.
|
|
656
|
+
|
|
657
|
+
`useFetch` and `useAsyncData` will always run when the key changes if `immediate: true` or if it has been already triggered.
|
|
658
|
+
|
|
659
|
+
- **Type**: `boolean`
|
|
660
|
+
- **Default:** `true`
|
|
661
|
+
|
|
662
|
+
### `appManifest`
|
|
663
|
+
|
|
664
|
+
Use app manifests to respect route rules on client-side.
|
|
665
|
+
|
|
666
|
+
- **Type**: `boolean`
|
|
667
|
+
- **Default:** `true`
|
|
668
|
+
|
|
669
|
+
### `asyncContext`
|
|
670
|
+
|
|
671
|
+
Enable native async context to be accessible for nested composables
|
|
672
|
+
|
|
673
|
+
- **Type**: `boolean`
|
|
674
|
+
- **Default:** `false`
|
|
675
|
+
|
|
676
|
+
**See**: [Nuxt PR #20918](https://github.com/nuxt/nuxt/pull/20918)
|
|
677
|
+
|
|
678
|
+
### `asyncEntry`
|
|
679
|
+
|
|
680
|
+
Set to true to generate an async entry point for the Vue bundle (for module federation support).
|
|
681
|
+
|
|
682
|
+
- **Type**: `boolean`
|
|
683
|
+
- **Default:** `false`
|
|
684
|
+
|
|
685
|
+
### `browserDevtoolsTiming`
|
|
686
|
+
|
|
687
|
+
Enable timings for Nuxt application hooks in the performance panel of Chromium-based browsers.
|
|
688
|
+
|
|
689
|
+
This feature adds performance markers for Nuxt hooks, allowing you to track their execution time in the browser's Performance tab. This is particularly useful for debugging performance issues.
|
|
690
|
+
|
|
691
|
+
- **Type**: `boolean`
|
|
692
|
+
- **Default:** `false`
|
|
693
|
+
|
|
694
|
+
**Example**:
|
|
695
|
+
```ts
|
|
696
|
+
// nuxt.config.ts
|
|
697
|
+
export default defineNuxtConfig({
|
|
698
|
+
experimental: {
|
|
699
|
+
// Enable performance markers for Nuxt hooks in browser devtools
|
|
700
|
+
browserDevtoolsTiming: true
|
|
701
|
+
}
|
|
702
|
+
})
|
|
703
|
+
```
|
|
704
|
+
|
|
705
|
+
**See**: [PR #29922](https://github.com/nuxt/nuxt/pull/29922)
|
|
706
|
+
|
|
707
|
+
**See**: [Chrome DevTools Performance API](https://developer.chrome.com/docs/devtools/performance/extension#tracks)
|
|
708
|
+
|
|
709
|
+
### `buildCache`
|
|
710
|
+
|
|
711
|
+
Cache Nuxt/Nitro build artifacts based on a hash of the configuration and source files.
|
|
712
|
+
|
|
713
|
+
This only works for source files within `srcDir` and `serverDir` for the Vue/Nitro parts of your app.
|
|
714
|
+
|
|
715
|
+
- **Type**: `boolean`
|
|
716
|
+
- **Default:** `false`
|
|
717
|
+
|
|
718
|
+
### `checkOutdatedBuildInterval`
|
|
719
|
+
|
|
720
|
+
Set the time interval (in ms) to check for new builds. Disabled when `experimental.appManifest` is `false`.
|
|
721
|
+
|
|
722
|
+
Set to `false` to disable.
|
|
723
|
+
|
|
724
|
+
- **Type**: `number`
|
|
725
|
+
- **Default:** `3600000`
|
|
726
|
+
|
|
727
|
+
### `clientFallback`
|
|
728
|
+
|
|
729
|
+
Whether to enable the experimental `<NuxtClientFallback>` component for rendering content on the client if there's an error in SSR.
|
|
730
|
+
|
|
731
|
+
- **Type**: `boolean`
|
|
732
|
+
- **Default:** `false`
|
|
733
|
+
|
|
734
|
+
### `clientNodeCompat`
|
|
735
|
+
|
|
736
|
+
Automatically polyfill Node.js imports in the client build using `unenv`.
|
|
737
|
+
|
|
738
|
+
- **Type**: `boolean`
|
|
739
|
+
- **Default:** `false`
|
|
740
|
+
|
|
741
|
+
**See**: [unenv](https://github.com/unjs/unenv)
|
|
742
|
+
|
|
743
|
+
**Note:** To make globals like `Buffer` work in the browser, you need to manually inject them.
|
|
744
|
+
|
|
745
|
+
```ts
|
|
746
|
+
import { Buffer } from 'node:buffer'
|
|
747
|
+
|
|
748
|
+
globalThis.Buffer = globalThis.Buffer || Buffer
|
|
749
|
+
```
|
|
750
|
+
|
|
751
|
+
### `compileTemplate`
|
|
752
|
+
|
|
753
|
+
Whether to use `lodash.template` to compile Nuxt templates.
|
|
754
|
+
|
|
755
|
+
This flag will be removed with the release of v4 and exists only for advance testing within Nuxt v3.12+ or in [the nightly release channel](/docs/guide/going-further/nightly-release-channel).
|
|
756
|
+
|
|
757
|
+
- **Type**: `boolean`
|
|
758
|
+
- **Default:** `true`
|
|
759
|
+
|
|
760
|
+
### `componentIslands`
|
|
761
|
+
|
|
762
|
+
Experimental component islands support with `<NuxtIsland>` and `.island.vue` files.
|
|
763
|
+
|
|
764
|
+
By default it is set to 'auto', which means it will be enabled only when there are islands, server components or server pages in your app.
|
|
765
|
+
|
|
766
|
+
- **Type**: `string`
|
|
767
|
+
- **Default:** `"auto"`
|
|
768
|
+
|
|
769
|
+
### `configSchema`
|
|
770
|
+
|
|
771
|
+
Config schema support
|
|
772
|
+
|
|
773
|
+
- **Type**: `boolean`
|
|
774
|
+
- **Default:** `true`
|
|
775
|
+
|
|
776
|
+
**See**: [Nuxt Issue #15592](https://github.com/nuxt/nuxt/issues/15592)
|
|
777
|
+
|
|
778
|
+
### `cookieStore`
|
|
779
|
+
|
|
780
|
+
Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh `useCookie` ref values.
|
|
781
|
+
|
|
782
|
+
- **Type**: `boolean`
|
|
783
|
+
- **Default:** `true`
|
|
784
|
+
|
|
785
|
+
**See**: [CookieStore](https://developer.mozilla.org/en-US/docs/Web/API/CookieStore)
|
|
786
|
+
|
|
787
|
+
### `crossOriginPrefetch`
|
|
788
|
+
|
|
789
|
+
Enable cross-origin prefetch using the Speculation Rules API.
|
|
790
|
+
|
|
791
|
+
- **Type**: `boolean`
|
|
792
|
+
- **Default:** `false`
|
|
793
|
+
|
|
794
|
+
### `debugModuleMutation`
|
|
795
|
+
|
|
796
|
+
Record mutations to `nuxt.options` in module context, helping to debug configuration changes made by modules during the Nuxt initialization phase.
|
|
797
|
+
|
|
798
|
+
When enabled, Nuxt will track which modules modify configuration options, making it easier to trace unexpected configuration changes.
|
|
799
|
+
|
|
800
|
+
- **Type**: `boolean`
|
|
801
|
+
- **Default:** `false`
|
|
802
|
+
|
|
803
|
+
**Example**:
|
|
804
|
+
```ts
|
|
805
|
+
// nuxt.config.ts
|
|
806
|
+
export default defineNuxtConfig({
|
|
807
|
+
experimental: {
|
|
808
|
+
// Enable tracking of config mutations by modules
|
|
809
|
+
debugModuleMutation: true
|
|
810
|
+
}
|
|
811
|
+
})
|
|
812
|
+
```
|
|
813
|
+
|
|
814
|
+
**See**: [PR #30555](https://github.com/nuxt/nuxt/pull/30555)
|
|
815
|
+
|
|
816
|
+
### `decorators`
|
|
817
|
+
|
|
818
|
+
Enable to use experimental decorators in Nuxt and Nitro.
|
|
819
|
+
|
|
820
|
+
- **Type**: `boolean`
|
|
821
|
+
- **Default:** `false`
|
|
822
|
+
|
|
823
|
+
**See**: https://github.com/tc39/proposal-decorators
|
|
824
|
+
|
|
825
|
+
### `defaults`
|
|
826
|
+
|
|
827
|
+
This allows specifying the default options for core Nuxt components and composables.
|
|
828
|
+
|
|
829
|
+
These options will likely be moved elsewhere in the future, such as into `app.config` or into the `app/` directory.
|
|
830
|
+
|
|
831
|
+
#### `nuxtLink`
|
|
832
|
+
|
|
833
|
+
##### `componentName`
|
|
834
|
+
|
|
835
|
+
- **Type**: `string`
|
|
836
|
+
- **Default:** `"NuxtLink"`
|
|
837
|
+
|
|
838
|
+
##### `prefetch`
|
|
839
|
+
|
|
840
|
+
- **Type**: `boolean`
|
|
841
|
+
- **Default:** `true`
|
|
842
|
+
|
|
843
|
+
##### `prefetchOn`
|
|
844
|
+
|
|
845
|
+
###### `visibility`
|
|
846
|
+
|
|
847
|
+
- **Type**: `boolean`
|
|
848
|
+
- **Default:** `true`
|
|
849
|
+
|
|
850
|
+
#### `useAsyncData`
|
|
851
|
+
|
|
852
|
+
Options that apply to `useAsyncData` (and also therefore `useFetch`)
|
|
853
|
+
|
|
854
|
+
##### `deep`
|
|
855
|
+
|
|
856
|
+
- **Type**: `boolean`
|
|
857
|
+
- **Default:** `true`
|
|
858
|
+
|
|
859
|
+
##### `errorValue`
|
|
860
|
+
|
|
861
|
+
- **Type**: `string`
|
|
862
|
+
- **Default:** `"null"`
|
|
863
|
+
|
|
864
|
+
##### `value`
|
|
865
|
+
|
|
866
|
+
- **Type**: `string`
|
|
867
|
+
- **Default:** `"null"`
|
|
868
|
+
|
|
869
|
+
#### `useFetch`
|
|
870
|
+
|
|
871
|
+
### `emitRouteChunkError`
|
|
872
|
+
|
|
873
|
+
Emit `app:chunkError` hook when there is an error loading vite/webpack chunks.
|
|
874
|
+
|
|
875
|
+
By default, Nuxt will also perform a reload of the new route when a chunk fails to load when navigating to a new route (`automatic`).
|
|
876
|
+
Setting `automatic-immediate` will lead Nuxt to perform a reload of the current route right when a chunk fails to load (instead of waiting for navigation).
|
|
877
|
+
You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
|
|
878
|
+
|
|
879
|
+
- **Type**: `string`
|
|
880
|
+
- **Default:** `"automatic"`
|
|
881
|
+
|
|
882
|
+
**See**: [Nuxt PR #19038](https://github.com/nuxt/nuxt/pull/19038)
|
|
883
|
+
|
|
884
|
+
### `enforceModuleCompatibility`
|
|
885
|
+
|
|
886
|
+
Whether Nuxt should stop if a Nuxt module is incompatible.
|
|
887
|
+
|
|
888
|
+
- **Type**: `boolean`
|
|
889
|
+
- **Default:** `false`
|
|
890
|
+
|
|
891
|
+
### `externalVue`
|
|
892
|
+
|
|
893
|
+
Externalize `vue`, `@vue/*` and `vue-router` when building.
|
|
894
|
+
|
|
895
|
+
- **Type**: `boolean`
|
|
896
|
+
- **Default:** `true`
|
|
897
|
+
|
|
898
|
+
**See**: [Nuxt Issue #13632](https://github.com/nuxt/nuxt/issues/13632)
|
|
899
|
+
|
|
900
|
+
### `extraPageMetaExtractionKeys`
|
|
901
|
+
|
|
902
|
+
Configure additional keys to extract from the page metadata when using `scanPageMeta`.
|
|
903
|
+
|
|
904
|
+
This allows modules to access additional metadata from the page metadata. It's recommended to augment the NuxtPage types with your keys.
|
|
905
|
+
|
|
906
|
+
- **Type**: `array`
|
|
907
|
+
|
|
908
|
+
### `granularCachedData`
|
|
909
|
+
|
|
910
|
+
Whether to call and use the result from `getCachedData` on manual refresh for `useAsyncData` and `useFetch`.
|
|
911
|
+
|
|
912
|
+
- **Type**: `boolean`
|
|
913
|
+
- **Default:** `false`
|
|
914
|
+
|
|
915
|
+
### `headNext`
|
|
916
|
+
|
|
917
|
+
Use new experimental head optimisations:
|
|
918
|
+
|
|
919
|
+
- Add the capo.js head plugin in order to render tags in of the head in a more performant way. - Uses the hash hydration plugin to reduce initial hydration
|
|
920
|
+
|
|
921
|
+
- **Type**: `boolean`
|
|
922
|
+
- **Default:** `true`
|
|
923
|
+
|
|
924
|
+
**See**: [Nuxt Discussion #22632](https://github.com/nuxt/nuxt/discussions/22632)
|
|
925
|
+
|
|
926
|
+
### `inlineRouteRules`
|
|
927
|
+
|
|
928
|
+
Allow defining `routeRules` directly within your `~/pages` directory using `defineRouteRules`.
|
|
929
|
+
|
|
930
|
+
Rules are converted (based on the path) and applied for server requests. For example, a rule defined in `~/pages/foo/bar.vue` will be applied to `/foo/bar` requests. A rule in `~/pages/foo/[id].vue` will be applied to `/foo/**` requests.
|
|
931
|
+
For more control, such as if you are using a custom `path` or `alias` set in the page's `definePageMeta`, you should set `routeRules` directly within your `nuxt.config`.
|
|
932
|
+
|
|
933
|
+
- **Type**: `boolean`
|
|
934
|
+
- **Default:** `false`
|
|
935
|
+
|
|
936
|
+
### `lazyHydration`
|
|
937
|
+
|
|
938
|
+
Enable automatic configuration of hydration strategies for `<Lazy>` components.
|
|
939
|
+
|
|
940
|
+
This feature intelligently determines when to hydrate lazy components based on visibility, idle time, or other triggers, improving performance by deferring hydration of components until they're needed.
|
|
941
|
+
|
|
942
|
+
- **Type**: `boolean`
|
|
943
|
+
- **Default:** `true`
|
|
944
|
+
|
|
945
|
+
**Example**:
|
|
946
|
+
```ts
|
|
947
|
+
// nuxt.config.ts
|
|
948
|
+
export default defineNuxtConfig({
|
|
949
|
+
experimental: {
|
|
950
|
+
lazyHydration: true // Enable smart hydration strategies for Lazy components
|
|
951
|
+
}
|
|
952
|
+
})
|
|
953
|
+
|
|
954
|
+
// In your Vue components
|
|
955
|
+
<template>
|
|
956
|
+
<Lazy>
|
|
957
|
+
<ExpensiveComponent />
|
|
958
|
+
</Lazy>
|
|
959
|
+
</template>
|
|
960
|
+
```
|
|
961
|
+
|
|
962
|
+
**See**: [PR #26468](https://github.com/nuxt/nuxt/pull/26468)
|
|
963
|
+
|
|
964
|
+
### `localLayerAliases`
|
|
965
|
+
|
|
966
|
+
Resolve `~`, `~~`, `@` and `@@` aliases located within layers with respect to their layer source and root directories.
|
|
967
|
+
|
|
968
|
+
- **Type**: `boolean`
|
|
969
|
+
- **Default:** `true`
|
|
970
|
+
|
|
971
|
+
### `navigationRepaint`
|
|
972
|
+
|
|
973
|
+
Wait for a single animation frame before navigation, which gives an opportunity for the browser to repaint, acknowledging user interaction.
|
|
974
|
+
|
|
975
|
+
It can reduce INP when navigating on prerendered routes.
|
|
976
|
+
|
|
977
|
+
- **Type**: `boolean`
|
|
978
|
+
- **Default:** `true`
|
|
979
|
+
|
|
980
|
+
### `noVueServer`
|
|
981
|
+
|
|
982
|
+
Disable vue server renderer endpoint within nitro.
|
|
983
|
+
|
|
984
|
+
- **Type**: `boolean`
|
|
985
|
+
- **Default:** `false`
|
|
986
|
+
|
|
987
|
+
### `normalizeComponentNames`
|
|
988
|
+
|
|
989
|
+
Ensure that auto-generated Vue component names match the full component name you would use to auto-import the component.
|
|
990
|
+
|
|
991
|
+
- **Type**: `boolean`
|
|
992
|
+
- **Default:** `false`
|
|
993
|
+
|
|
994
|
+
### `parseErrorData`
|
|
995
|
+
|
|
996
|
+
Whether to parse `error.data` when rendering a server error page.
|
|
997
|
+
|
|
998
|
+
- **Type**: `boolean`
|
|
999
|
+
- **Default:** `false`
|
|
1000
|
+
|
|
1001
|
+
### `payloadExtraction`
|
|
1002
|
+
|
|
1003
|
+
When this option is enabled (by default) payload of pages that are prerendered are extracted
|
|
1004
|
+
|
|
1005
|
+
- **Type**: `boolean`
|
|
1006
|
+
- **Default:** `true`
|
|
1007
|
+
|
|
1008
|
+
### `pendingWhenIdle`
|
|
1009
|
+
|
|
1010
|
+
For `useAsyncData` and `useFetch`, whether `pending` should be `true` when data has not yet started to be fetched.
|
|
1011
|
+
|
|
1012
|
+
- **Type**: `boolean`
|
|
1013
|
+
- **Default:** `true`
|
|
1014
|
+
|
|
1015
|
+
### `polyfillVueUseHead`
|
|
1016
|
+
|
|
1017
|
+
Whether or not to add a compatibility layer for modules, plugins or user code relying on the old `@vueuse/head` API.
|
|
1018
|
+
|
|
1019
|
+
This is disabled to reduce the client-side bundle by ~0.5kb.
|
|
1020
|
+
|
|
1021
|
+
- **Type**: `boolean`
|
|
1022
|
+
- **Default:** `false`
|
|
1023
|
+
|
|
1024
|
+
### `purgeCachedData`
|
|
1025
|
+
|
|
1026
|
+
Whether to clean up Nuxt static and asyncData caches on route navigation.
|
|
1027
|
+
|
|
1028
|
+
Nuxt will automatically purge cached data from `useAsyncData` and `nuxtApp.static.data`. This helps prevent memory leaks and ensures fresh data is loaded when needed, but it is possible to disable it.
|
|
1029
|
+
|
|
1030
|
+
- **Type**: `boolean`
|
|
1031
|
+
- **Default:** `true`
|
|
1032
|
+
|
|
1033
|
+
**Example**:
|
|
1034
|
+
```ts
|
|
1035
|
+
// nuxt.config.ts
|
|
1036
|
+
export default defineNuxtConfig({
|
|
1037
|
+
experimental: {
|
|
1038
|
+
// Disable automatic cache cleanup (default is true)
|
|
1039
|
+
purgeCachedData: false
|
|
1040
|
+
}
|
|
1041
|
+
})
|
|
1042
|
+
```
|
|
1043
|
+
|
|
1044
|
+
**See**: [PR #31379](https://github.com/nuxt/nuxt/pull/31379)
|
|
1045
|
+
|
|
1046
|
+
### `relativeWatchPaths`
|
|
1047
|
+
|
|
1048
|
+
Whether to provide relative paths in the `builder:watch` hook.
|
|
1049
|
+
|
|
1050
|
+
This flag will be removed with the release of v4 and exists only for advance testing within Nuxt v3.12+ or in [the nightly release channel](/docs/guide/going-further/nightly-release-channel).
|
|
1051
|
+
|
|
1052
|
+
- **Type**: `boolean`
|
|
1053
|
+
- **Default:** `true`
|
|
1054
|
+
|
|
1055
|
+
### `renderJsonPayloads`
|
|
1056
|
+
|
|
1057
|
+
Render JSON payloads with support for revivifying complex types.
|
|
1058
|
+
|
|
1059
|
+
- **Type**: `boolean`
|
|
1060
|
+
- **Default:** `true`
|
|
1061
|
+
|
|
1062
|
+
### `resetAsyncDataToUndefined`
|
|
1063
|
+
|
|
1064
|
+
Whether `clear` and `clearNuxtData` should reset async data to its _default_ value or update it to `null`/`undefined`.
|
|
1065
|
+
|
|
1066
|
+
- **Type**: `boolean`
|
|
1067
|
+
- **Default:** `true`
|
|
1068
|
+
|
|
1069
|
+
### `respectNoSSRHeader`
|
|
1070
|
+
|
|
1071
|
+
Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header.
|
|
1072
|
+
|
|
1073
|
+
- **Type**: `boolean`
|
|
1074
|
+
- **Default:** `false`
|
|
1075
|
+
|
|
1076
|
+
### `restoreState`
|
|
1077
|
+
|
|
1078
|
+
Whether to restore Nuxt app state from `sessionStorage` when reloading the page after a chunk error or manual `reloadNuxtApp()` call.
|
|
1079
|
+
|
|
1080
|
+
To avoid hydration errors, it will be applied only after the Vue app has been mounted, meaning there may be a flicker on initial load.
|
|
1081
|
+
Consider carefully before enabling this as it can cause unexpected behavior, and consider providing explicit keys to `useState` as auto-generated keys may not match across builds.
|
|
1082
|
+
|
|
1083
|
+
- **Type**: `boolean`
|
|
1084
|
+
- **Default:** `false`
|
|
1085
|
+
|
|
1086
|
+
### `scanPageMeta`
|
|
1087
|
+
|
|
1088
|
+
Allow exposing some route metadata defined in `definePageMeta` at build-time to modules (alias, name, path, redirect, props, middleware).
|
|
1089
|
+
|
|
1090
|
+
This only works with static or strings/arrays rather than variables or conditional assignment.
|
|
1091
|
+
|
|
1092
|
+
- **Type**: `boolean`
|
|
1093
|
+
- **Default:** `true`
|
|
1094
|
+
|
|
1095
|
+
**See**: [Nuxt Issues #24770](https://github.com/nuxt/nuxt/issues/24770)
|
|
1096
|
+
|
|
1097
|
+
### `sharedPrerenderData`
|
|
1098
|
+
|
|
1099
|
+
Automatically share payload _data_ between pages that are prerendered. This can result in a significant performance improvement when prerendering sites that use `useAsyncData` or `useFetch` and fetch the same data in different pages.
|
|
1100
|
+
|
|
1101
|
+
It is particularly important when enabling this feature to make sure that any unique key of your data is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch data related to a particular page, you should provide a key that uniquely matches that data. (`useFetch` should do this automatically for you.)
|
|
1102
|
+
|
|
1103
|
+
- **Type**: `boolean`
|
|
1104
|
+
- **Default:** `false`
|
|
1105
|
+
|
|
1106
|
+
**Example**:
|
|
1107
|
+
```ts
|
|
1108
|
+
// This would be unsafe in a dynamic page (e.g. `[slug].vue`) because the route slug makes a difference
|
|
1109
|
+
// to the data fetched, but Nuxt can't know that because it's not reflected in the key.
|
|
1110
|
+
const route = useRoute()
|
|
1111
|
+
const { data } = await useAsyncData(async () => {
|
|
1112
|
+
return await $fetch(`/api/my-page/${route.params.slug}`)
|
|
1113
|
+
})
|
|
1114
|
+
// Instead, you should use a key that uniquely identifies the data fetched.
|
|
1115
|
+
const { data } = await useAsyncData(route.params.slug, async () => {
|
|
1116
|
+
return await $fetch(`/api/my-page/${route.params.slug}`)
|
|
1117
|
+
})
|
|
1118
|
+
```
|
|
1119
|
+
|
|
1120
|
+
### `spaLoadingTemplateLocation`
|
|
1121
|
+
|
|
1122
|
+
Keep showing the spa-loading-template until suspense:resolve
|
|
1123
|
+
|
|
1124
|
+
- **Type**: `string`
|
|
1125
|
+
- **Default:** `"within"`
|
|
1126
|
+
|
|
1127
|
+
**See**: [Nuxt Issues #24770](https://github.com/nuxt/nuxt/issues/21721)
|
|
1128
|
+
|
|
1129
|
+
### `templateImportResolution`
|
|
1130
|
+
|
|
1131
|
+
Disable resolving imports into Nuxt templates from the path of the module that added the template.
|
|
1132
|
+
|
|
1133
|
+
By default, Nuxt attempts to resolve imports in templates relative to the module that added them. Setting this to `false` disables this behavior, which may be useful if you're experiencing resolution conflicts in certain environments.
|
|
1134
|
+
|
|
1135
|
+
- **Type**: `boolean`
|
|
1136
|
+
- **Default:** `true`
|
|
1137
|
+
|
|
1138
|
+
**Example**:
|
|
1139
|
+
```ts
|
|
1140
|
+
// nuxt.config.ts
|
|
1141
|
+
export default defineNuxtConfig({
|
|
1142
|
+
experimental: {
|
|
1143
|
+
// Disable template import resolution from module path
|
|
1144
|
+
templateImportResolution: false
|
|
1145
|
+
}
|
|
1146
|
+
})
|
|
1147
|
+
```
|
|
1148
|
+
|
|
1149
|
+
**See**: [PR #31175](https://github.com/nuxt/nuxt/pull/31175)
|
|
1150
|
+
|
|
1151
|
+
### `templateRouteInjection`
|
|
1152
|
+
|
|
1153
|
+
By default the route object returned by the auto-imported `useRoute()` composable is kept in sync with the current page in view in `<NuxtPage>`. This is not true for `vue-router`'s exported `useRoute` or for the default `$route` object available in your Vue templates.
|
|
1154
|
+
|
|
1155
|
+
By enabling this option a mixin will be injected to keep the `$route` template object in sync with Nuxt's managed `useRoute()`.
|
|
1156
|
+
|
|
1157
|
+
- **Type**: `boolean`
|
|
1158
|
+
- **Default:** `true`
|
|
1159
|
+
|
|
1160
|
+
### `templateUtils`
|
|
1161
|
+
|
|
1162
|
+
Whether to provide a legacy `templateUtils` object (with `serialize`, `importName` and `importSources`) when compiling Nuxt templates.
|
|
1163
|
+
|
|
1164
|
+
This flag will be removed with the release of v4 and exists only for advance testing within Nuxt v3.12+ or in [the nightly release channel](/docs/guide/going-further/nightly-release-channel).
|
|
1165
|
+
|
|
1166
|
+
- **Type**: `boolean`
|
|
1167
|
+
- **Default:** `true`
|
|
1168
|
+
|
|
1169
|
+
### `treeshakeClientOnly`
|
|
1170
|
+
|
|
1171
|
+
Tree shakes contents of client-only components from server bundle.
|
|
1172
|
+
|
|
1173
|
+
- **Type**: `boolean`
|
|
1174
|
+
- **Default:** `true`
|
|
1175
|
+
|
|
1176
|
+
**See**: [Nuxt PR #5750](https://github.com/nuxt/framework/pull/5750)
|
|
1177
|
+
|
|
1178
|
+
### `typedPages`
|
|
1179
|
+
|
|
1180
|
+
Enable the new experimental typed router using [unplugin-vue-router](https://github.com/posva/unplugin-vue-router).
|
|
1181
|
+
|
|
1182
|
+
- **Type**: `boolean`
|
|
1183
|
+
- **Default:** `false`
|
|
1184
|
+
|
|
1185
|
+
### `viewTransition`
|
|
1186
|
+
|
|
1187
|
+
Enable View Transition API integration with client-side router.
|
|
1188
|
+
|
|
1189
|
+
- **Type**: `boolean`
|
|
1190
|
+
- **Default:** `false`
|
|
1191
|
+
|
|
1192
|
+
**See**: [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions)
|
|
1193
|
+
|
|
1194
|
+
### `watcher`
|
|
1195
|
+
|
|
1196
|
+
Set an alternative watcher that will be used as the watching service for Nuxt.
|
|
1197
|
+
|
|
1198
|
+
Nuxt uses 'chokidar-granular' if your source directory is the same as your root directory . This will ignore top-level directories (like `node_modules` and `.git`) that are excluded from watching.
|
|
1199
|
+
You can set this instead to `parcel` to use `@parcel/watcher`, which may improve performance in large projects or on Windows platforms.
|
|
1200
|
+
You can also set this to `chokidar` to watch all files in your source directory.
|
|
1201
|
+
|
|
1202
|
+
- **Type**: `string`
|
|
1203
|
+
- **Default:** `"chokidar"`
|
|
1204
|
+
|
|
1205
|
+
**See**: [chokidar](https://github.com/paulmillr/chokidar)
|
|
1206
|
+
|
|
1207
|
+
**See**: [@parcel/watcher](https://github.com/parcel-bundler/watcher)
|
|
1208
|
+
|
|
1209
|
+
### `writeEarlyHints`
|
|
1210
|
+
|
|
1211
|
+
Write early hints when using node server.
|
|
1212
|
+
|
|
1213
|
+
- **Type**: `boolean`
|
|
1214
|
+
- **Default:** `false`
|
|
1215
|
+
|
|
1216
|
+
::callout
|
|
1217
|
+
**Note**: nginx does not support 103 Early hints in the current version.
|
|
1218
|
+
::
|
|
1219
|
+
|
|
1220
|
+
## extends
|
|
1221
|
+
|
|
1222
|
+
Extend project from multiple local or remote sources.
|
|
1223
|
+
|
|
1224
|
+
Value should be either a string or array of strings pointing to source directories or config path relative to current config.
|
|
1225
|
+
You can use `github:`, `gh:` `gitlab:` or `bitbucket:`
|
|
1226
|
+
|
|
1227
|
+
**See**: [`c12` docs on extending config layers](https://github.com/unjs/c12#extending-config-layer-from-remote-sources)
|
|
1228
|
+
|
|
1229
|
+
**See**: [`giget` documentation](https://github.com/unjs/giget)
|
|
1230
|
+
|
|
1231
|
+
## extensions
|
|
1232
|
+
|
|
1233
|
+
The extensions that should be resolved by the Nuxt resolver.
|
|
1234
|
+
|
|
1235
|
+
- **Type**: `array`
|
|
1236
|
+
- **Default**
|
|
1237
|
+
```json
|
|
1238
|
+
[
|
|
1239
|
+
".js",
|
|
1240
|
+
".jsx",
|
|
1241
|
+
".mjs",
|
|
1242
|
+
".ts",
|
|
1243
|
+
".tsx",
|
|
1244
|
+
".vue"
|
|
1245
|
+
]
|
|
1246
|
+
```
|
|
1247
|
+
|
|
1248
|
+
## features
|
|
1249
|
+
|
|
1250
|
+
Some features of Nuxt are available on an opt-in basis, or can be disabled based on your needs.
|
|
1251
|
+
|
|
1252
|
+
### `devLogs`
|
|
1253
|
+
|
|
1254
|
+
Stream server logs to the client as you are developing. These logs can be handled in the `dev:ssr-logs` hook.
|
|
1255
|
+
|
|
1256
|
+
If set to `silent`, the logs will not be printed to the browser console.
|
|
1257
|
+
|
|
1258
|
+
- **Type**: `boolean`
|
|
1259
|
+
- **Default:** `false`
|
|
1260
|
+
|
|
1261
|
+
### `inlineStyles`
|
|
1262
|
+
|
|
1263
|
+
Inline styles when rendering HTML (currently vite only).
|
|
1264
|
+
|
|
1265
|
+
You can also pass a function that receives the path of a Vue component and returns a boolean indicating whether to inline the styles for that component.
|
|
1266
|
+
|
|
1267
|
+
- **Type**: `boolean`
|
|
1268
|
+
- **Default:** `true`
|
|
1269
|
+
|
|
1270
|
+
### `noScripts`
|
|
1271
|
+
|
|
1272
|
+
Turn off rendering of Nuxt scripts and JS resource hints. You can also disable scripts more granularly within `routeRules`.
|
|
1273
|
+
|
|
1274
|
+
If set to 'production' or `true`, JS will be disabled in production mode only.
|
|
1275
|
+
|
|
1276
|
+
- **Type**: `boolean`
|
|
1277
|
+
- **Default:** `false`
|
|
1278
|
+
|
|
1279
|
+
## future
|
|
1280
|
+
|
|
1281
|
+
`future` is for early opting-in to new features that will become default in a future (possibly major) version of the framework.
|
|
1282
|
+
|
|
1283
|
+
### `compatibilityVersion`
|
|
1284
|
+
|
|
1285
|
+
Enable early access to Nuxt v4 features or flags.
|
|
1286
|
+
|
|
1287
|
+
Setting `compatibilityVersion` to `4` changes defaults throughout your Nuxt configuration, but you can granularly re-enable Nuxt v3 behaviour when testing (see example). Please file issues if so, so that we can address in Nuxt or in the ecosystem.
|
|
1288
|
+
|
|
1289
|
+
- **Type**: `number`
|
|
1290
|
+
- **Default:** `3`
|
|
1291
|
+
|
|
1292
|
+
**Example**:
|
|
1293
|
+
```ts
|
|
1294
|
+
export default defineNuxtConfig({
|
|
1295
|
+
future: {
|
|
1296
|
+
compatibilityVersion: 4,
|
|
1297
|
+
},
|
|
1298
|
+
// To re-enable _all_ Nuxt v3 behaviour, set the following options:
|
|
1299
|
+
srcDir: '.',
|
|
1300
|
+
dir: {
|
|
1301
|
+
app: 'app'
|
|
1302
|
+
},
|
|
1303
|
+
experimental: {
|
|
1304
|
+
compileTemplate: true,
|
|
1305
|
+
templateUtils: true,
|
|
1306
|
+
relativeWatchPaths: true,
|
|
1307
|
+
resetAsyncDataToUndefined: true,
|
|
1308
|
+
defaults: {
|
|
1309
|
+
useAsyncData: {
|
|
1310
|
+
deep: true
|
|
1311
|
+
}
|
|
1312
|
+
}
|
|
1313
|
+
},
|
|
1314
|
+
unhead: {
|
|
1315
|
+
renderSSRHeadOptions: {
|
|
1316
|
+
omitLineBreaks: false
|
|
1317
|
+
}
|
|
1318
|
+
}
|
|
1319
|
+
})
|
|
1320
|
+
```
|
|
1321
|
+
|
|
1322
|
+
### `multiApp`
|
|
1323
|
+
|
|
1324
|
+
This enables early access to the experimental multi-app support.
|
|
1325
|
+
|
|
1326
|
+
- **Type**: `boolean`
|
|
1327
|
+
- **Default:** `false`
|
|
1328
|
+
|
|
1329
|
+
**See**: [Nuxt Issue #21635](https://github.com/nuxt/nuxt/issues/21635)
|
|
1330
|
+
|
|
1331
|
+
### `typescriptBundlerResolution`
|
|
1332
|
+
|
|
1333
|
+
This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting for frameworks like Nuxt and Vite.
|
|
1334
|
+
|
|
1335
|
+
It improves type support when using modern libraries with `exports`.
|
|
1336
|
+
You can set it to false to use the legacy 'Node' mode, which is the default for TypeScript.
|
|
1337
|
+
|
|
1338
|
+
- **Type**: `boolean`
|
|
1339
|
+
- **Default:** `true`
|
|
1340
|
+
|
|
1341
|
+
**See**: [TypeScript PR implementing `bundler` module resolution](https://github.com/microsoft/TypeScript/pull/51669)
|
|
1342
|
+
|
|
1343
|
+
## hooks
|
|
1344
|
+
|
|
1345
|
+
Hooks are listeners to Nuxt events that are typically used in modules, but are also available in `nuxt.config`.
|
|
1346
|
+
|
|
1347
|
+
Internally, hooks follow a naming pattern using colons (e.g., build:done).
|
|
1348
|
+
For ease of configuration, you can also structure them as an hierarchical object in `nuxt.config` (as below).
|
|
1349
|
+
|
|
1350
|
+
**Example**:
|
|
1351
|
+
```js
|
|
1352
|
+
import fs from 'node:fs'
|
|
1353
|
+
import path from 'node:path'
|
|
1354
|
+
export default {
|
|
1355
|
+
hooks: {
|
|
1356
|
+
build: {
|
|
1357
|
+
done(builder) {
|
|
1358
|
+
const extraFilePath = path.join(
|
|
1359
|
+
builder.nuxt.options.buildDir,
|
|
1360
|
+
'extra-file'
|
|
1361
|
+
)
|
|
1362
|
+
fs.writeFileSync(extraFilePath, 'Something extra')
|
|
1363
|
+
}
|
|
1364
|
+
}
|
|
1365
|
+
}
|
|
1366
|
+
}
|
|
1367
|
+
```
|
|
1368
|
+
|
|
1369
|
+
## ignore
|
|
1370
|
+
|
|
1371
|
+
More customizable than `ignorePrefix`: all files matching glob patterns specified inside the `ignore` array will be ignored in building.
|
|
1372
|
+
|
|
1373
|
+
- **Type**: `array`
|
|
1374
|
+
- **Default**
|
|
1375
|
+
```json
|
|
1376
|
+
[
|
|
1377
|
+
"**/*.stories.{js,cts,mts,ts,jsx,tsx}",
|
|
1378
|
+
"**/*.{spec,test}.{js,cts,mts,ts,jsx,tsx}",
|
|
1379
|
+
"**/*.d.{cts,mts,ts}",
|
|
1380
|
+
"**/.{pnpm-store,vercel,netlify,output,git,cache,data}",
|
|
1381
|
+
"**/*.sock",
|
|
1382
|
+
".nuxt/analyze",
|
|
1383
|
+
".nuxt",
|
|
1384
|
+
"**/-*.*"
|
|
1385
|
+
]
|
|
1386
|
+
```
|
|
1387
|
+
|
|
1388
|
+
## ignoreOptions
|
|
1389
|
+
|
|
1390
|
+
Pass options directly to `node-ignore` (which is used by Nuxt to ignore files).
|
|
1391
|
+
|
|
1392
|
+
**See**: [node-ignore](https://github.com/kaelzhang/node-ignore)
|
|
1393
|
+
|
|
1394
|
+
**Example**:
|
|
1395
|
+
```js
|
|
1396
|
+
ignoreOptions: {
|
|
1397
|
+
ignorecase: false
|
|
1398
|
+
}
|
|
1399
|
+
```
|
|
1400
|
+
|
|
1401
|
+
## ignorePrefix
|
|
1402
|
+
|
|
1403
|
+
Any file in `pages/`, `layouts/`, `middleware/`, and `public/` directories will be ignored during the build process if its filename starts with the prefix specified by `ignorePrefix`. This is intended to prevent certain files from being processed or served in the built application. By default, the `ignorePrefix` is set to '-', ignoring any files starting with '-'.
|
|
1404
|
+
|
|
1405
|
+
- **Type**: `string`
|
|
1406
|
+
- **Default:** `"-"`
|
|
1407
|
+
|
|
1408
|
+
## imports
|
|
1409
|
+
|
|
1410
|
+
Configure how Nuxt auto-imports composables into your application.
|
|
1411
|
+
|
|
1412
|
+
**See**: [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/composables)
|
|
1413
|
+
|
|
1414
|
+
### `dirs`
|
|
1415
|
+
|
|
1416
|
+
An array of custom directories that will be auto-imported. Note that this option will not override the default directories (~/composables, ~/utils).
|
|
1417
|
+
|
|
1418
|
+
- **Type**: `array`
|
|
1419
|
+
|
|
1420
|
+
**Example**:
|
|
1421
|
+
```js
|
|
1422
|
+
imports: {
|
|
1423
|
+
// Auto-import pinia stores defined in `~/stores`
|
|
1424
|
+
dirs: ['stores']
|
|
1425
|
+
}
|
|
1426
|
+
```
|
|
1427
|
+
|
|
1428
|
+
### `global`
|
|
1429
|
+
|
|
1430
|
+
- **Type**: `boolean`
|
|
1431
|
+
- **Default:** `false`
|
|
1432
|
+
|
|
1433
|
+
### `scan`
|
|
1434
|
+
|
|
1435
|
+
Whether to scan your `composables/` and `utils/` directories for composables to auto-import. Auto-imports registered by Nuxt or other modules, such as imports from `vue` or `nuxt`, will still be enabled.
|
|
1436
|
+
|
|
1437
|
+
- **Type**: `boolean`
|
|
1438
|
+
- **Default:** `true`
|
|
1439
|
+
|
|
1440
|
+
## logLevel
|
|
1441
|
+
|
|
1442
|
+
Log level when building logs.
|
|
1443
|
+
|
|
1444
|
+
Defaults to 'silent' when running in CI or when a TTY is not available. This option is then used as 'silent' in Vite and 'none' in webpack
|
|
1445
|
+
|
|
1446
|
+
- **Type**: `string`
|
|
1447
|
+
- **Default:** `"info"`
|
|
1448
|
+
|
|
1449
|
+
## modules
|
|
1450
|
+
|
|
1451
|
+
Modules are Nuxt extensions which can extend its core functionality and add endless integrations.
|
|
1452
|
+
|
|
1453
|
+
Each module is either a string (which can refer to a package, or be a path to a file), a tuple with the module as first string and the options as a second object, or an inline module function.
|
|
1454
|
+
Nuxt tries to resolve each item in the modules array using node require path (in `node_modules`) and then will be resolved from project `srcDir` if `~` alias is used.
|
|
1455
|
+
|
|
1456
|
+
- **Type**: `array`
|
|
1457
|
+
|
|
1458
|
+
::callout
|
|
1459
|
+
**Note**: Modules are executed sequentially so the order is important. First, the modules defined in `nuxt.config.ts` are loaded. Then, modules found in the `modules/`
|
|
1460
|
+
directory are executed, and they load in alphabetical order.
|
|
1461
|
+
::
|
|
1462
|
+
|
|
1463
|
+
**Example**:
|
|
1464
|
+
```js
|
|
1465
|
+
modules: [
|
|
1466
|
+
// Using package name
|
|
1467
|
+
'@nuxtjs/axios',
|
|
1468
|
+
// Relative to your project srcDir
|
|
1469
|
+
'~/modules/awesome.js',
|
|
1470
|
+
// Providing options
|
|
1471
|
+
['@nuxtjs/google-analytics', { ua: 'X1234567' }],
|
|
1472
|
+
// Inline definition
|
|
1473
|
+
function () {}
|
|
1474
|
+
]
|
|
1475
|
+
```
|
|
1476
|
+
|
|
1477
|
+
## modulesDir
|
|
1478
|
+
|
|
1479
|
+
Used to set the modules directories for path resolving (for example, webpack's `resolveLoading`, `nodeExternals` and `postcss`).
|
|
1480
|
+
|
|
1481
|
+
The configuration path is relative to `options.rootDir` (default is current working directory).
|
|
1482
|
+
Setting this field may be necessary if your project is organized as a yarn workspace-styled mono-repository.
|
|
1483
|
+
|
|
1484
|
+
- **Type**: `array`
|
|
1485
|
+
- **Default**
|
|
1486
|
+
```json
|
|
1487
|
+
[
|
|
1488
|
+
"/<rootDir>/node_modules"
|
|
1489
|
+
]
|
|
1490
|
+
```
|
|
1491
|
+
|
|
1492
|
+
**Example**:
|
|
1493
|
+
```js
|
|
1494
|
+
export default {
|
|
1495
|
+
modulesDir: ['../../node_modules']
|
|
1496
|
+
}
|
|
1497
|
+
```
|
|
1498
|
+
|
|
1499
|
+
## nitro
|
|
1500
|
+
|
|
1501
|
+
Configuration for Nitro.
|
|
1502
|
+
|
|
1503
|
+
**See**: [Nitro configuration docs](https://nitro.build/config/)
|
|
1504
|
+
|
|
1505
|
+
### `routeRules`
|
|
1506
|
+
|
|
1507
|
+
- **Type**: `object`
|
|
1508
|
+
|
|
1509
|
+
### `runtimeConfig`
|
|
1510
|
+
|
|
1511
|
+
- **Type**: `object`
|
|
1512
|
+
- **Default**
|
|
1513
|
+
```json
|
|
1514
|
+
{
|
|
1515
|
+
"public": {},
|
|
1516
|
+
"app": {
|
|
1517
|
+
"buildId": "4a2e2d30-418f-41df-8e58-ed5df06de7fd",
|
|
1518
|
+
"baseURL": "/",
|
|
1519
|
+
"buildAssetsDir": "/_nuxt/",
|
|
1520
|
+
"cdnURL": ""
|
|
1521
|
+
},
|
|
1522
|
+
"nitro": {
|
|
1523
|
+
"envPrefix": "NUXT_"
|
|
1524
|
+
}
|
|
1525
|
+
}
|
|
1526
|
+
```
|
|
1527
|
+
|
|
1528
|
+
## optimization
|
|
1529
|
+
|
|
1530
|
+
Build time optimization configuration.
|
|
1531
|
+
|
|
1532
|
+
### `asyncTransforms`
|
|
1533
|
+
|
|
1534
|
+
Options passed directly to the transformer from `unctx` that preserves async context after `await`.
|
|
1535
|
+
|
|
1536
|
+
#### `asyncFunctions`
|
|
1537
|
+
|
|
1538
|
+
- **Type**: `array`
|
|
1539
|
+
- **Default**
|
|
1540
|
+
```json
|
|
1541
|
+
[
|
|
1542
|
+
"defineNuxtPlugin",
|
|
1543
|
+
"defineNuxtRouteMiddleware"
|
|
1544
|
+
]
|
|
1545
|
+
```
|
|
1546
|
+
|
|
1547
|
+
#### `objectDefinitions`
|
|
1548
|
+
|
|
1549
|
+
##### `defineNuxtComponent`
|
|
1550
|
+
|
|
1551
|
+
- **Type**: `array`
|
|
1552
|
+
- **Default**
|
|
1553
|
+
```json
|
|
1554
|
+
[
|
|
1555
|
+
"asyncData",
|
|
1556
|
+
"setup"
|
|
1557
|
+
]
|
|
1558
|
+
```
|
|
1559
|
+
|
|
1560
|
+
##### `defineNuxtPlugin`
|
|
1561
|
+
|
|
1562
|
+
- **Type**: `array`
|
|
1563
|
+
- **Default**
|
|
1564
|
+
```json
|
|
1565
|
+
[
|
|
1566
|
+
"setup"
|
|
1567
|
+
]
|
|
1568
|
+
```
|
|
1569
|
+
|
|
1570
|
+
##### `definePageMeta`
|
|
1571
|
+
|
|
1572
|
+
- **Type**: `array`
|
|
1573
|
+
- **Default**
|
|
1574
|
+
```json
|
|
1575
|
+
[
|
|
1576
|
+
"middleware",
|
|
1577
|
+
"validate"
|
|
1578
|
+
]
|
|
1579
|
+
```
|
|
1580
|
+
|
|
1581
|
+
### `keyedComposables`
|
|
1582
|
+
|
|
1583
|
+
Functions to inject a key for.
|
|
1584
|
+
|
|
1585
|
+
As long as the number of arguments passed to the function is less than `argumentLength`, an additional magic string will be injected that can be used to deduplicate requests between server and client. You will need to take steps to handle this additional key.
|
|
1586
|
+
The key will be unique based on the location of the function being invoked within the file.
|
|
1587
|
+
|
|
1588
|
+
- **Type**: `array`
|
|
1589
|
+
- **Default**
|
|
1590
|
+
```json
|
|
1591
|
+
[
|
|
1592
|
+
{
|
|
1593
|
+
"name": "callOnce",
|
|
1594
|
+
"argumentLength": 3
|
|
1595
|
+
},
|
|
1596
|
+
{
|
|
1597
|
+
"name": "defineNuxtComponent",
|
|
1598
|
+
"argumentLength": 2
|
|
1599
|
+
},
|
|
1600
|
+
{
|
|
1601
|
+
"name": "useState",
|
|
1602
|
+
"argumentLength": 2
|
|
1603
|
+
},
|
|
1604
|
+
{
|
|
1605
|
+
"name": "useFetch",
|
|
1606
|
+
"argumentLength": 3
|
|
1607
|
+
},
|
|
1608
|
+
{
|
|
1609
|
+
"name": "useAsyncData",
|
|
1610
|
+
"argumentLength": 3
|
|
1611
|
+
},
|
|
1612
|
+
{
|
|
1613
|
+
"name": "useLazyAsyncData",
|
|
1614
|
+
"argumentLength": 3
|
|
1615
|
+
},
|
|
1616
|
+
{
|
|
1617
|
+
"name": "useLazyFetch",
|
|
1618
|
+
"argumentLength": 3
|
|
1619
|
+
}
|
|
1620
|
+
]
|
|
1621
|
+
```
|
|
1622
|
+
|
|
1623
|
+
### `treeShake`
|
|
1624
|
+
|
|
1625
|
+
Tree shake code from specific builds.
|
|
1626
|
+
|
|
1627
|
+
#### `composables`
|
|
1628
|
+
|
|
1629
|
+
Tree shake composables from the server or client builds.
|
|
1630
|
+
|
|
1631
|
+
**Example**:
|
|
1632
|
+
```js
|
|
1633
|
+
treeShake: { client: { myPackage: ['useServerOnlyComposable'] } }
|
|
1634
|
+
```
|
|
1635
|
+
|
|
1636
|
+
##### `client`
|
|
1637
|
+
|
|
1638
|
+
- **Type**: `object`
|
|
1639
|
+
- **Default**
|
|
1640
|
+
```json
|
|
1641
|
+
{
|
|
1642
|
+
"vue": [
|
|
1643
|
+
"onRenderTracked",
|
|
1644
|
+
"onRenderTriggered",
|
|
1645
|
+
"onServerPrefetch"
|
|
1646
|
+
],
|
|
1647
|
+
"#app": [
|
|
1648
|
+
"definePayloadReducer",
|
|
1649
|
+
"definePageMeta",
|
|
1650
|
+
"onPrehydrate"
|
|
1651
|
+
]
|
|
1652
|
+
}
|
|
1653
|
+
```
|
|
1654
|
+
|
|
1655
|
+
##### `server`
|
|
1656
|
+
|
|
1657
|
+
- **Type**: `object`
|
|
1658
|
+
- **Default**
|
|
1659
|
+
```json
|
|
1660
|
+
{
|
|
1661
|
+
"vue": [
|
|
1662
|
+
"onMounted",
|
|
1663
|
+
"onUpdated",
|
|
1664
|
+
"onUnmounted",
|
|
1665
|
+
"onBeforeMount",
|
|
1666
|
+
"onBeforeUpdate",
|
|
1667
|
+
"onBeforeUnmount",
|
|
1668
|
+
"onRenderTracked",
|
|
1669
|
+
"onRenderTriggered",
|
|
1670
|
+
"onActivated",
|
|
1671
|
+
"onDeactivated"
|
|
1672
|
+
],
|
|
1673
|
+
"#app": [
|
|
1674
|
+
"definePayloadReviver",
|
|
1675
|
+
"definePageMeta"
|
|
1676
|
+
]
|
|
1677
|
+
}
|
|
1678
|
+
```
|
|
1679
|
+
|
|
1680
|
+
## pages
|
|
1681
|
+
|
|
1682
|
+
Whether to use the vue-router integration in Nuxt 3. If you do not provide a value it will be enabled if you have a `pages/` directory in your source folder.
|
|
1683
|
+
|
|
1684
|
+
Additionally, you can provide a glob pattern or an array of patterns to scan only certain files for pages.
|
|
1685
|
+
|
|
1686
|
+
**Example**:
|
|
1687
|
+
```js
|
|
1688
|
+
pages: {
|
|
1689
|
+
pattern: ['**\/*\/*.vue', '!**\/*.spec.*'],
|
|
1690
|
+
}
|
|
1691
|
+
```
|
|
1692
|
+
|
|
1693
|
+
## plugins
|
|
1694
|
+
|
|
1695
|
+
An array of nuxt app plugins.
|
|
1696
|
+
|
|
1697
|
+
Each plugin can be a string (which can be an absolute or relative path to a file). If it ends with `.client` or `.server` then it will be automatically loaded only in the appropriate context.
|
|
1698
|
+
It can also be an object with `src` and `mode` keys.
|
|
1699
|
+
|
|
1700
|
+
- **Type**: `array`
|
|
1701
|
+
|
|
1702
|
+
::callout
|
|
1703
|
+
**Note**: Plugins are also auto-registered from the `~/plugins` directory
|
|
1704
|
+
and these plugins do not need to be listed in `nuxt.config` unless you
|
|
1705
|
+
need to customize their order. All plugins are deduplicated by their src path.
|
|
1706
|
+
::
|
|
1707
|
+
|
|
1708
|
+
**See**: [`plugins/` directory documentation](https://nuxt.com/docs/guide/directory-structure/plugins)
|
|
1709
|
+
|
|
1710
|
+
**Example**:
|
|
1711
|
+
```js
|
|
1712
|
+
plugins: [
|
|
1713
|
+
'~/plugins/foo.client.js', // only in client side
|
|
1714
|
+
'~/plugins/bar.server.js', // only in server side
|
|
1715
|
+
'~/plugins/baz.js', // both client & server
|
|
1716
|
+
{ src: '~/plugins/both-sides.js' },
|
|
1717
|
+
{ src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
|
|
1718
|
+
{ src: '~/plugins/server-only.js', mode: 'server' } // only on server side
|
|
1719
|
+
]
|
|
1720
|
+
```
|
|
1721
|
+
|
|
1722
|
+
## postcss
|
|
1723
|
+
|
|
1724
|
+
### `order`
|
|
1725
|
+
|
|
1726
|
+
A strategy for ordering PostCSS plugins.
|
|
1727
|
+
|
|
1728
|
+
- **Type**: `function`
|
|
1729
|
+
|
|
1730
|
+
### `plugins`
|
|
1731
|
+
|
|
1732
|
+
Options for configuring PostCSS plugins.
|
|
1733
|
+
|
|
1734
|
+
**See**: [PostCSS docs](https://postcss.org/)
|
|
1735
|
+
|
|
1736
|
+
#### `autoprefixer`
|
|
1737
|
+
|
|
1738
|
+
Plugin to parse CSS and add vendor prefixes to CSS rules.
|
|
1739
|
+
|
|
1740
|
+
**See**: [`autoprefixer`](https://github.com/postcss/autoprefixer)
|
|
1741
|
+
|
|
1742
|
+
#### `cssnano`
|
|
1743
|
+
|
|
1744
|
+
- **Type**: `object`
|
|
1745
|
+
|
|
1746
|
+
**See**: [`cssnano` configuration options](https://cssnano.github.io/cssnano/docs/config-file/#configuration-options)
|
|
1747
|
+
|
|
1748
|
+
## rootDir
|
|
1749
|
+
|
|
1750
|
+
Define the root directory of your application.
|
|
1751
|
+
|
|
1752
|
+
This property can be overwritten (for example, running `nuxt ./my-app/` will set the `rootDir` to the absolute path of `./my-app/` from the current/working directory.
|
|
1753
|
+
It is normally not needed to configure this option.
|
|
1754
|
+
|
|
1755
|
+
- **Type**: `string`
|
|
1756
|
+
- **Default:** `"/<rootDir>"`
|
|
1757
|
+
|
|
1758
|
+
## routeRules
|
|
1759
|
+
|
|
1760
|
+
Global route options applied to matching server routes.
|
|
1761
|
+
|
|
1762
|
+
**Experimental**: This is an experimental feature and API may change in the future.
|
|
1763
|
+
|
|
1764
|
+
**See**: [Nitro route rules documentation](https://nitro.build/config/#routerules)
|
|
1765
|
+
|
|
1766
|
+
## router
|
|
1767
|
+
|
|
1768
|
+
### `options`
|
|
1769
|
+
|
|
1770
|
+
Additional router options passed to `vue-router`. On top of the options for `vue-router`, Nuxt offers additional options to customize the router (see below).
|
|
1771
|
+
|
|
1772
|
+
::callout
|
|
1773
|
+
**Note**: Only JSON serializable options should be passed by Nuxt config.
|
|
1774
|
+
For more control, you can use an `router.options.ts` file.
|
|
1775
|
+
::
|
|
1776
|
+
|
|
1777
|
+
**See**: [Vue Router documentation](https://router.vuejs.org/api/interfaces/routeroptions.html).
|
|
1778
|
+
|
|
1779
|
+
#### `hashMode`
|
|
1780
|
+
|
|
1781
|
+
You can enable hash history in SPA mode. In this mode, router uses a hash character (#) before the actual URL that is internally passed. When enabled, the **URL is never sent to the server** and **SSR is not supported**.
|
|
1782
|
+
|
|
1783
|
+
- **Type**: `boolean`
|
|
1784
|
+
- **Default:** `false`
|
|
1785
|
+
|
|
1786
|
+
**Default**: false
|
|
1787
|
+
|
|
1788
|
+
#### `scrollBehaviorType`
|
|
1789
|
+
|
|
1790
|
+
Customize the scroll behavior for hash links.
|
|
1791
|
+
|
|
1792
|
+
- **Type**: `string`
|
|
1793
|
+
- **Default:** `"auto"`
|
|
1794
|
+
|
|
1795
|
+
**Default**: 'auto'
|
|
1796
|
+
|
|
1797
|
+
## runtimeConfig
|
|
1798
|
+
|
|
1799
|
+
Runtime config allows passing dynamic config and environment variables to the Nuxt app context.
|
|
1800
|
+
|
|
1801
|
+
The value of this object is accessible from server only using `useRuntimeConfig`.
|
|
1802
|
+
It mainly should hold _private_ configuration which is not exposed on the frontend. This could include a reference to your API secret tokens.
|
|
1803
|
+
Anything under `public` and `app` will be exposed to the frontend as well.
|
|
1804
|
+
Values are automatically replaced by matching env variables at runtime, e.g. setting an environment variable `NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/` would overwrite the two values in the example below.
|
|
1805
|
+
|
|
1806
|
+
- **Type**: `object`
|
|
1807
|
+
- **Default**
|
|
1808
|
+
```json
|
|
1809
|
+
{
|
|
1810
|
+
"public": {},
|
|
1811
|
+
"app": {
|
|
1812
|
+
"buildId": "4a2e2d30-418f-41df-8e58-ed5df06de7fd",
|
|
1813
|
+
"baseURL": "/",
|
|
1814
|
+
"buildAssetsDir": "/_nuxt/",
|
|
1815
|
+
"cdnURL": ""
|
|
1816
|
+
}
|
|
1817
|
+
}
|
|
1818
|
+
```
|
|
1819
|
+
|
|
1820
|
+
**Example**:
|
|
1821
|
+
```js
|
|
1822
|
+
export default {
|
|
1823
|
+
runtimeConfig: {
|
|
1824
|
+
apiKey: '', // Default to an empty string, automatically set at runtime using process.env.NUXT_API_KEY
|
|
1825
|
+
public: {
|
|
1826
|
+
baseURL: '' // Exposed to the frontend as well.
|
|
1827
|
+
}
|
|
1828
|
+
}
|
|
1829
|
+
}
|
|
1830
|
+
```
|
|
1831
|
+
|
|
1832
|
+
## serverDir
|
|
1833
|
+
|
|
1834
|
+
Define the server directory of your Nuxt application, where Nitro routes, middleware and plugins are kept.
|
|
1835
|
+
|
|
1836
|
+
If a relative path is specified, it will be relative to your `rootDir`.
|
|
1837
|
+
|
|
1838
|
+
- **Type**: `string`
|
|
1839
|
+
- **Default:** `"/<srcDir>/server"`
|
|
1840
|
+
|
|
1841
|
+
## serverHandlers
|
|
1842
|
+
|
|
1843
|
+
Nitro server handlers.
|
|
1844
|
+
|
|
1845
|
+
Each handler accepts the following options:
|
|
1846
|
+
- handler: The path to the file defining the handler. - route: The route under which the handler is available. This follows the conventions of [rou3](https://github.com/unjs/rou3). - method: The HTTP method of requests that should be handled. - middleware: Specifies whether it is a middleware handler. - lazy: Specifies whether to use lazy loading to import the handler.
|
|
1847
|
+
|
|
1848
|
+
- **Type**: `array`
|
|
1849
|
+
|
|
1850
|
+
**See**: [`server/` directory documentation](https://nuxt.com/docs/guide/directory-structure/server)
|
|
1851
|
+
|
|
1852
|
+
::callout
|
|
1853
|
+
**Note**: Files from `server/api`, `server/middleware` and `server/routes` will be automatically registered by Nuxt.
|
|
1854
|
+
::
|
|
1855
|
+
|
|
1856
|
+
**Example**:
|
|
1857
|
+
```js
|
|
1858
|
+
serverHandlers: [
|
|
1859
|
+
{ route: '/path/foo/**:name', handler: '~/server/foohandler.ts' }
|
|
1860
|
+
]
|
|
1861
|
+
```
|
|
1862
|
+
|
|
1863
|
+
## sourcemap
|
|
1864
|
+
|
|
1865
|
+
Configures whether and how sourcemaps are generated for server and/or client bundles.
|
|
1866
|
+
|
|
1867
|
+
If set to a single boolean, that value applies to both server and client. Additionally, the `'hidden'` option is also available for both server and client.
|
|
1868
|
+
Available options for both client and server: - `true`: Generates sourcemaps and includes source references in the final bundle. - `false`: Does not generate any sourcemaps. - `'hidden'`: Generates sourcemaps but does not include references in the final bundle.
|
|
1869
|
+
|
|
1870
|
+
- **Type**: `object`
|
|
1871
|
+
- **Default**
|
|
1872
|
+
```json
|
|
1873
|
+
{
|
|
1874
|
+
"server": true,
|
|
1875
|
+
"client": false
|
|
1876
|
+
}
|
|
1877
|
+
```
|
|
1878
|
+
|
|
1879
|
+
## spaLoadingTemplate
|
|
1880
|
+
|
|
1881
|
+
Boolean or a path to an HTML file with the contents of which will be inserted into any HTML page rendered with `ssr: false`.
|
|
1882
|
+
|
|
1883
|
+
- If it is unset, it will use `~/spa-loading-template.html` file in one of your layers, if it exists. - If it is false, no SPA loading indicator will be loaded. - If true, Nuxt will look for `~/spa-loading-template.html` file in one of your layers, or a
|
|
1884
|
+
default Nuxt image will be used.
|
|
1885
|
+
Some good sources for spinners are [SpinKit](https://github.com/tobiasahlin/SpinKit) or [SVG Spinners](https://icones.js.org/collection/svg-spinners).
|
|
1886
|
+
|
|
1887
|
+
- **Default:** `null`
|
|
1888
|
+
|
|
1889
|
+
**Example**: ~/spa-loading-template.html
|
|
1890
|
+
```html
|
|
1891
|
+
<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
|
|
1892
|
+
<div class="loader"></div>
|
|
1893
|
+
<style>
|
|
1894
|
+
.loader {
|
|
1895
|
+
display: block;
|
|
1896
|
+
position: fixed;
|
|
1897
|
+
z-index: 1031;
|
|
1898
|
+
top: 50%;
|
|
1899
|
+
left: 50%;
|
|
1900
|
+
transform: translate(-50%, -50%);
|
|
1901
|
+
width: 18px;
|
|
1902
|
+
height: 18px;
|
|
1903
|
+
box-sizing: border-box;
|
|
1904
|
+
border: solid 2px transparent;
|
|
1905
|
+
border-top-color: #000;
|
|
1906
|
+
border-left-color: #000;
|
|
1907
|
+
border-bottom-color: #efefef;
|
|
1908
|
+
border-right-color: #efefef;
|
|
1909
|
+
border-radius: 50%;
|
|
1910
|
+
-webkit-animation: loader 400ms linear infinite;
|
|
1911
|
+
animation: loader 400ms linear infinite;
|
|
1912
|
+
}
|
|
1913
|
+
|
|
1914
|
+
@-webkit-keyframes loader {
|
|
1915
|
+
0% {
|
|
1916
|
+
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
|
1917
|
+
}
|
|
1918
|
+
100% {
|
|
1919
|
+
-webkit-transform: translate(-50%, -50%) rotate(360deg);
|
|
1920
|
+
}
|
|
1921
|
+
}
|
|
1922
|
+
@keyframes loader {
|
|
1923
|
+
0% {
|
|
1924
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
1925
|
+
}
|
|
1926
|
+
100% {
|
|
1927
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
1928
|
+
}
|
|
1929
|
+
}
|
|
1930
|
+
</style>
|
|
1931
|
+
```
|
|
1932
|
+
|
|
1933
|
+
## srcDir
|
|
1934
|
+
|
|
1935
|
+
Define the source directory of your Nuxt application.
|
|
1936
|
+
|
|
1937
|
+
If a relative path is specified, it will be relative to the `rootDir`.
|
|
1938
|
+
|
|
1939
|
+
- **Type**: `string`
|
|
1940
|
+
- **Default:** `"app"` (Nuxt 4), `"."` (Nuxt 3 with `compatibilityMode: 3`)
|
|
1941
|
+
|
|
1942
|
+
**Example**:
|
|
1943
|
+
```js
|
|
1944
|
+
export default {
|
|
1945
|
+
srcDir: 'app/'
|
|
1946
|
+
}
|
|
1947
|
+
```
|
|
1948
|
+
This expects the following folder structure:
|
|
1949
|
+
```bash
|
|
1950
|
+
-| app/
|
|
1951
|
+
---| assets/
|
|
1952
|
+
---| components/
|
|
1953
|
+
---| layouts/
|
|
1954
|
+
---| middleware/
|
|
1955
|
+
---| pages/
|
|
1956
|
+
---| plugins/
|
|
1957
|
+
---| app.config.ts
|
|
1958
|
+
---| app.vue
|
|
1959
|
+
---| error.vue
|
|
1960
|
+
-| server/
|
|
1961
|
+
-| public/
|
|
1962
|
+
-| modules/
|
|
1963
|
+
-| nuxt.config.js
|
|
1964
|
+
-| package.json
|
|
1965
|
+
```
|
|
1966
|
+
|
|
1967
|
+
## ssr
|
|
1968
|
+
|
|
1969
|
+
Whether to enable rendering of HTML - either dynamically (in server mode) or at generate time. If set to `false` generated pages will have no content.
|
|
1970
|
+
|
|
1971
|
+
- **Type**: `boolean`
|
|
1972
|
+
- **Default:** `true`
|
|
1973
|
+
|
|
1974
|
+
## telemetry
|
|
1975
|
+
|
|
1976
|
+
Manually disable nuxt telemetry.
|
|
1977
|
+
|
|
1978
|
+
**See**: [Nuxt Telemetry](https://github.com/nuxt/telemetry) for more information.
|
|
1979
|
+
|
|
1980
|
+
## test
|
|
1981
|
+
|
|
1982
|
+
Whether your app is being unit tested.
|
|
1983
|
+
|
|
1984
|
+
- **Type**: `boolean`
|
|
1985
|
+
- **Default:** `false`
|
|
1986
|
+
|
|
1987
|
+
## theme
|
|
1988
|
+
|
|
1989
|
+
Extend project from a local or remote source.
|
|
1990
|
+
|
|
1991
|
+
Value should be a string pointing to source directory or config path relative to current config.
|
|
1992
|
+
You can use `github:`, `gitlab:`, `bitbucket:` or `https://` to extend from a remote git repository.
|
|
1993
|
+
|
|
1994
|
+
- **Type**: `string`
|
|
1995
|
+
|
|
1996
|
+
## typescript
|
|
1997
|
+
|
|
1998
|
+
Configuration for Nuxt's TypeScript integration.
|
|
1999
|
+
|
|
2000
|
+
### `builder`
|
|
2001
|
+
|
|
2002
|
+
Which builder types to include for your project.
|
|
2003
|
+
|
|
2004
|
+
By default Nuxt infers this based on your `builder` option (defaulting to 'vite') but you can either turn off builder environment types (with `false`) to handle this fully yourself, or opt for a 'shared' option.
|
|
2005
|
+
The 'shared' option is advised for module authors, who will want to support multiple possible builders.
|
|
2006
|
+
|
|
2007
|
+
- **Default:** `null`
|
|
2008
|
+
|
|
2009
|
+
### `hoist`
|
|
2010
|
+
|
|
2011
|
+
Modules to generate deep aliases for within `compilerOptions.paths`. This does not yet support subpaths. It may be necessary when using Nuxt within a pnpm monorepo with `shamefully-hoist=false`.
|
|
2012
|
+
|
|
2013
|
+
- **Type**: `array`
|
|
2014
|
+
- **Default**
|
|
2015
|
+
```json
|
|
2016
|
+
[
|
|
2017
|
+
"nitropack/types",
|
|
2018
|
+
"nitropack/runtime",
|
|
2019
|
+
"nitropack",
|
|
2020
|
+
"defu",
|
|
2021
|
+
"h3",
|
|
2022
|
+
"consola",
|
|
2023
|
+
"ofetch",
|
|
2024
|
+
"@unhead/vue",
|
|
2025
|
+
"@nuxt/devtools",
|
|
2026
|
+
"vue",
|
|
2027
|
+
"@vue/runtime-core",
|
|
2028
|
+
"@vue/compiler-sfc",
|
|
2029
|
+
"vue-router",
|
|
2030
|
+
"vue-router/auto-routes",
|
|
2031
|
+
"unplugin-vue-router/client",
|
|
2032
|
+
"@nuxt/schema",
|
|
2033
|
+
"nuxt"
|
|
2034
|
+
]
|
|
2035
|
+
```
|
|
2036
|
+
|
|
2037
|
+
### `includeWorkspace`
|
|
2038
|
+
|
|
2039
|
+
Include parent workspace in the Nuxt project. Mostly useful for themes and module authors.
|
|
2040
|
+
|
|
2041
|
+
- **Type**: `boolean`
|
|
2042
|
+
- **Default:** `false`
|
|
2043
|
+
|
|
2044
|
+
### `shim`
|
|
2045
|
+
|
|
2046
|
+
Generate a `*.vue` shim.
|
|
2047
|
+
|
|
2048
|
+
We recommend instead letting the [official Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) generate accurate types for your components.
|
|
2049
|
+
Note that you may wish to set this to `true` if you are using other libraries, such as ESLint, that are unable to understand the type of `.vue` files.
|
|
2050
|
+
|
|
2051
|
+
- **Type**: `boolean`
|
|
2052
|
+
- **Default:** `false`
|
|
2053
|
+
|
|
2054
|
+
### `strict`
|
|
2055
|
+
|
|
2056
|
+
TypeScript comes with certain checks to give you more safety and analysis of your program. Once you’ve converted your codebase to TypeScript, you can start enabling these checks for greater safety. [Read More](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#getting-stricter-checks)
|
|
2057
|
+
|
|
2058
|
+
- **Type**: `boolean`
|
|
2059
|
+
- **Default:** `true`
|
|
2060
|
+
|
|
2061
|
+
### `TSConfig`
|
|
2062
|
+
|
|
2063
|
+
You can extend generated `.nuxt/tsconfig.json` using this option.
|
|
2064
|
+
|
|
2065
|
+
### `typeCheck`
|
|
2066
|
+
|
|
2067
|
+
Enable build-time type checking.
|
|
2068
|
+
|
|
2069
|
+
If set to true, this will type check in development. You can restrict this to build-time type checking by setting it to `build`. Requires to install `typescript` and `vue-tsc` as dev dependencies.
|
|
2070
|
+
|
|
2071
|
+
- **Type**: `boolean`
|
|
2072
|
+
- **Default:** `false`
|
|
2073
|
+
|
|
2074
|
+
**See**: [Nuxt TypeScript docs](https://nuxt.com/docs/guide/concepts/typescript)
|
|
2075
|
+
|
|
2076
|
+
## unhead
|
|
2077
|
+
|
|
2078
|
+
An object that allows us to configure the `unhead` nuxt module.
|
|
2079
|
+
|
|
2080
|
+
### `legacy`
|
|
2081
|
+
|
|
2082
|
+
Enable the legacy compatibility mode for `unhead` module. This applies the following changes: - Disables Capo.js sorting - Adds the `DeprecationsPlugin`: supports `hid`, `vmid`, `children`, `body` - Adds the `PromisesPlugin`: supports promises as input
|
|
2083
|
+
|
|
2084
|
+
- **Type**: `boolean`
|
|
2085
|
+
- **Default:** `false`
|
|
2086
|
+
|
|
2087
|
+
**See**: [`unhead` migration documentation](https://unhead.unjs.io/docs/typescript/head/guides/get-started/migration)
|
|
2088
|
+
|
|
2089
|
+
**Example**:
|
|
2090
|
+
```ts
|
|
2091
|
+
export default defineNuxtConfig({
|
|
2092
|
+
unhead: {
|
|
2093
|
+
legacy: true
|
|
2094
|
+
})
|
|
2095
|
+
```
|
|
2096
|
+
|
|
2097
|
+
### `renderSSRHeadOptions`
|
|
2098
|
+
|
|
2099
|
+
An object that will be passed to `renderSSRHead` to customize the output.
|
|
2100
|
+
|
|
2101
|
+
- **Type**: `object`
|
|
2102
|
+
- **Default**
|
|
2103
|
+
```json
|
|
2104
|
+
{
|
|
2105
|
+
"omitLineBreaks": false
|
|
2106
|
+
}
|
|
2107
|
+
```
|
|
2108
|
+
|
|
2109
|
+
**Example**:
|
|
2110
|
+
```ts
|
|
2111
|
+
export default defineNuxtConfig({
|
|
2112
|
+
unhead: {
|
|
2113
|
+
renderSSRHeadOptions: {
|
|
2114
|
+
omitLineBreaks: true
|
|
2115
|
+
}
|
|
2116
|
+
})
|
|
2117
|
+
```
|
|
2118
|
+
|
|
2119
|
+
## vite
|
|
2120
|
+
|
|
2121
|
+
Configuration that will be passed directly to Vite.
|
|
2122
|
+
|
|
2123
|
+
**See**: [Vite configuration docs](https://vite.dev/config) for more information.
|
|
2124
|
+
Please note that not all vite options are supported in Nuxt.
|
|
2125
|
+
|
|
2126
|
+
### `build`
|
|
2127
|
+
|
|
2128
|
+
#### `assetsDir`
|
|
2129
|
+
|
|
2130
|
+
- **Type**: `string`
|
|
2131
|
+
- **Default:** `"_nuxt/"`
|
|
2132
|
+
|
|
2133
|
+
#### `emptyOutDir`
|
|
2134
|
+
|
|
2135
|
+
- **Type**: `boolean`
|
|
2136
|
+
- **Default:** `false`
|
|
2137
|
+
|
|
2138
|
+
### `cacheDir`
|
|
2139
|
+
|
|
2140
|
+
- **Type**: `string`
|
|
2141
|
+
- **Default:** `"/<rootDir>/node_modules/.cache/vite"`
|
|
2142
|
+
|
|
2143
|
+
### `clearScreen`
|
|
2144
|
+
|
|
2145
|
+
- **Type**: `boolean`
|
|
2146
|
+
- **Default:** `true`
|
|
2147
|
+
|
|
2148
|
+
### `define`
|
|
2149
|
+
|
|
2150
|
+
- **Type**: `object`
|
|
2151
|
+
- **Default**
|
|
2152
|
+
```json
|
|
2153
|
+
{
|
|
2154
|
+
"__VUE_PROD_HYDRATION_MISMATCH_DETAILS__": false,
|
|
2155
|
+
"process.dev": false,
|
|
2156
|
+
"import.meta.dev": false,
|
|
2157
|
+
"process.test": false,
|
|
2158
|
+
"import.meta.test": false
|
|
2159
|
+
}
|
|
2160
|
+
```
|
|
2161
|
+
|
|
2162
|
+
### `esbuild`
|
|
2163
|
+
|
|
2164
|
+
- **Type**: `object`
|
|
2165
|
+
- **Default**
|
|
2166
|
+
```json
|
|
2167
|
+
{
|
|
2168
|
+
"target": "esnext",
|
|
2169
|
+
"jsxFactory": "h",
|
|
2170
|
+
"jsxFragment": "Fragment",
|
|
2171
|
+
"tsconfigRaw": {}
|
|
2172
|
+
}
|
|
2173
|
+
```
|
|
2174
|
+
|
|
2175
|
+
### `mode`
|
|
2176
|
+
|
|
2177
|
+
- **Type**: `string`
|
|
2178
|
+
- **Default:** `"production"`
|
|
2179
|
+
|
|
2180
|
+
### `optimizeDeps`
|
|
2181
|
+
|
|
2182
|
+
#### `esbuildOptions`
|
|
2183
|
+
|
|
2184
|
+
- **Type**: `object`
|
|
2185
|
+
- **Default**
|
|
2186
|
+
```json
|
|
2187
|
+
{
|
|
2188
|
+
"target": "esnext",
|
|
2189
|
+
"jsxFactory": "h",
|
|
2190
|
+
"jsxFragment": "Fragment",
|
|
2191
|
+
"tsconfigRaw": {}
|
|
2192
|
+
}
|
|
2193
|
+
```
|
|
2194
|
+
|
|
2195
|
+
#### `exclude`
|
|
2196
|
+
|
|
2197
|
+
- **Type**: `array`
|
|
2198
|
+
- **Default**
|
|
2199
|
+
```json
|
|
2200
|
+
[
|
|
2201
|
+
"vue-demi"
|
|
2202
|
+
]
|
|
2203
|
+
```
|
|
2204
|
+
|
|
2205
|
+
### `publicDir`
|
|
2206
|
+
|
|
2207
|
+
### `resolve`
|
|
2208
|
+
|
|
2209
|
+
#### `extensions`
|
|
2210
|
+
|
|
2211
|
+
- **Type**: `array`
|
|
2212
|
+
- **Default**
|
|
2213
|
+
```json
|
|
2214
|
+
[
|
|
2215
|
+
".mjs",
|
|
2216
|
+
".js",
|
|
2217
|
+
".ts",
|
|
2218
|
+
".jsx",
|
|
2219
|
+
".tsx",
|
|
2220
|
+
".json",
|
|
2221
|
+
".vue"
|
|
2222
|
+
]
|
|
2223
|
+
```
|
|
2224
|
+
|
|
2225
|
+
### `root`
|
|
2226
|
+
|
|
2227
|
+
- **Type**: `string`
|
|
2228
|
+
- **Default:** `"/<srcDir>"`
|
|
2229
|
+
|
|
2230
|
+
### `server`
|
|
2231
|
+
|
|
2232
|
+
#### `fs`
|
|
2233
|
+
|
|
2234
|
+
##### `allow`
|
|
2235
|
+
|
|
2236
|
+
- **Type**: `array`
|
|
2237
|
+
- **Default**
|
|
2238
|
+
```json
|
|
2239
|
+
[
|
|
2240
|
+
"/<rootDir>/.nuxt",
|
|
2241
|
+
"/<srcDir>",
|
|
2242
|
+
"/<rootDir>",
|
|
2243
|
+
"/<workspaceDir>"
|
|
2244
|
+
]
|
|
2245
|
+
```
|
|
2246
|
+
|
|
2247
|
+
### `vue`
|
|
2248
|
+
|
|
2249
|
+
#### `features`
|
|
2250
|
+
|
|
2251
|
+
##### `propsDestructure`
|
|
2252
|
+
|
|
2253
|
+
- **Type**: `boolean`
|
|
2254
|
+
- **Default:** `true`
|
|
2255
|
+
|
|
2256
|
+
#### `isProduction`
|
|
2257
|
+
|
|
2258
|
+
- **Type**: `boolean`
|
|
2259
|
+
- **Default:** `true`
|
|
2260
|
+
|
|
2261
|
+
#### `script`
|
|
2262
|
+
|
|
2263
|
+
##### `hoistStatic`
|
|
2264
|
+
|
|
2265
|
+
#### `template`
|
|
2266
|
+
|
|
2267
|
+
##### `compilerOptions`
|
|
2268
|
+
|
|
2269
|
+
- **Type**: `object`
|
|
2270
|
+
|
|
2271
|
+
##### `transformAssetUrls`
|
|
2272
|
+
|
|
2273
|
+
- **Type**: `object`
|
|
2274
|
+
- **Default**
|
|
2275
|
+
```json
|
|
2276
|
+
{
|
|
2277
|
+
"video": [
|
|
2278
|
+
"src",
|
|
2279
|
+
"poster"
|
|
2280
|
+
],
|
|
2281
|
+
"source": [
|
|
2282
|
+
"src"
|
|
2283
|
+
],
|
|
2284
|
+
"img": [
|
|
2285
|
+
"src"
|
|
2286
|
+
],
|
|
2287
|
+
"image": [
|
|
2288
|
+
"xlink:href",
|
|
2289
|
+
"href"
|
|
2290
|
+
],
|
|
2291
|
+
"use": [
|
|
2292
|
+
"xlink:href",
|
|
2293
|
+
"href"
|
|
2294
|
+
]
|
|
2295
|
+
}
|
|
2296
|
+
```
|
|
2297
|
+
|
|
2298
|
+
### `vueJsx`
|
|
2299
|
+
|
|
2300
|
+
- **Type**: `object`
|
|
2301
|
+
- **Default**
|
|
2302
|
+
```json
|
|
2303
|
+
{
|
|
2304
|
+
"isCustomElement": {
|
|
2305
|
+
"$schema": {
|
|
2306
|
+
"title": "",
|
|
2307
|
+
"description": "",
|
|
2308
|
+
"tags": []
|
|
2309
|
+
}
|
|
2310
|
+
}
|
|
2311
|
+
}
|
|
2312
|
+
```
|
|
2313
|
+
|
|
2314
|
+
## vue
|
|
2315
|
+
|
|
2316
|
+
Vue.js config
|
|
2317
|
+
|
|
2318
|
+
### `compilerOptions`
|
|
2319
|
+
|
|
2320
|
+
Options for the Vue compiler that will be passed at build time.
|
|
2321
|
+
|
|
2322
|
+
**See**: [Vue documentation](https://vuejs.org/api/application.html#app-config-compileroptions)
|
|
2323
|
+
|
|
2324
|
+
### `config`
|
|
2325
|
+
|
|
2326
|
+
It is possible to pass configure the Vue app globally. Only serializable options may be set in your `nuxt.config`. All other options should be set at runtime in a Nuxt plugin..
|
|
2327
|
+
|
|
2328
|
+
**See**: [Vue app config documentation](https://vuejs.org/api/application.html#app-config)
|
|
2329
|
+
|
|
2330
|
+
### `propsDestructure`
|
|
2331
|
+
|
|
2332
|
+
Enable reactive destructure for `defineProps`
|
|
2333
|
+
|
|
2334
|
+
- **Type**: `boolean`
|
|
2335
|
+
- **Default:** `true`
|
|
2336
|
+
|
|
2337
|
+
### `runtimeCompiler`
|
|
2338
|
+
|
|
2339
|
+
Include Vue compiler in runtime bundle.
|
|
2340
|
+
|
|
2341
|
+
- **Type**: `boolean`
|
|
2342
|
+
- **Default:** `false`
|
|
2343
|
+
|
|
2344
|
+
### `transformAssetUrls`
|
|
2345
|
+
|
|
2346
|
+
#### `image`
|
|
2347
|
+
|
|
2348
|
+
- **Type**: `array`
|
|
2349
|
+
- **Default**
|
|
2350
|
+
```json
|
|
2351
|
+
[
|
|
2352
|
+
"xlink:href",
|
|
2353
|
+
"href"
|
|
2354
|
+
]
|
|
2355
|
+
```
|
|
2356
|
+
|
|
2357
|
+
#### `img`
|
|
2358
|
+
|
|
2359
|
+
- **Type**: `array`
|
|
2360
|
+
- **Default**
|
|
2361
|
+
```json
|
|
2362
|
+
[
|
|
2363
|
+
"src"
|
|
2364
|
+
]
|
|
2365
|
+
```
|
|
2366
|
+
|
|
2367
|
+
#### `source`
|
|
2368
|
+
|
|
2369
|
+
- **Type**: `array`
|
|
2370
|
+
- **Default**
|
|
2371
|
+
```json
|
|
2372
|
+
[
|
|
2373
|
+
"src"
|
|
2374
|
+
]
|
|
2375
|
+
```
|
|
2376
|
+
|
|
2377
|
+
#### `use`
|
|
2378
|
+
|
|
2379
|
+
- **Type**: `array`
|
|
2380
|
+
- **Default**
|
|
2381
|
+
```json
|
|
2382
|
+
[
|
|
2383
|
+
"xlink:href",
|
|
2384
|
+
"href"
|
|
2385
|
+
]
|
|
2386
|
+
```
|
|
2387
|
+
|
|
2388
|
+
#### `video`
|
|
2389
|
+
|
|
2390
|
+
- **Type**: `array`
|
|
2391
|
+
- **Default**
|
|
2392
|
+
```json
|
|
2393
|
+
[
|
|
2394
|
+
"src",
|
|
2395
|
+
"poster"
|
|
2396
|
+
]
|
|
2397
|
+
```
|
|
2398
|
+
|
|
2399
|
+
## watch
|
|
2400
|
+
|
|
2401
|
+
The watch property lets you define patterns that will restart the Nuxt dev server when changed.
|
|
2402
|
+
|
|
2403
|
+
It is an array of strings or regular expressions. Strings should be either absolute paths or relative to the `srcDir` (and the `srcDir` of any layers). Regular expressions will be matched against the path relative to the project `srcDir` (and the `srcDir` of any layers).
|
|
2404
|
+
|
|
2405
|
+
- **Type**: `array`
|
|
2406
|
+
|
|
2407
|
+
## watchers
|
|
2408
|
+
|
|
2409
|
+
The watchers property lets you overwrite watchers configuration in your `nuxt.config`.
|
|
2410
|
+
|
|
2411
|
+
### `chokidar`
|
|
2412
|
+
|
|
2413
|
+
Options to pass directly to `chokidar`.
|
|
2414
|
+
|
|
2415
|
+
**See**: [chokidar](https://github.com/paulmillr/chokidar#api)
|
|
2416
|
+
|
|
2417
|
+
#### `ignoreInitial`
|
|
2418
|
+
|
|
2419
|
+
- **Type**: `boolean`
|
|
2420
|
+
- **Default:** `true`
|
|
2421
|
+
|
|
2422
|
+
#### `ignorePermissionErrors`
|
|
2423
|
+
|
|
2424
|
+
- **Type**: `boolean`
|
|
2425
|
+
- **Default:** `true`
|
|
2426
|
+
|
|
2427
|
+
### `rewatchOnRawEvents`
|
|
2428
|
+
|
|
2429
|
+
An array of event types, which, when received, will cause the watcher to restart.
|
|
2430
|
+
|
|
2431
|
+
### `webpack`
|
|
2432
|
+
|
|
2433
|
+
`watchOptions` to pass directly to webpack.
|
|
2434
|
+
|
|
2435
|
+
**See**: [webpack@4 watch options](https://v4.webpack.js.org/configuration/watch/#watchoptions).
|
|
2436
|
+
|
|
2437
|
+
#### `aggregateTimeout`
|
|
2438
|
+
|
|
2439
|
+
- **Type**: `number`
|
|
2440
|
+
- **Default:** `1000`
|
|
2441
|
+
|
|
2442
|
+
## webpack
|
|
2443
|
+
|
|
2444
|
+
### `aggressiveCodeRemoval`
|
|
2445
|
+
|
|
2446
|
+
Hard-replaces `typeof process`, `typeof window` and `typeof document` to tree-shake bundle.
|
|
2447
|
+
|
|
2448
|
+
- **Type**: `boolean`
|
|
2449
|
+
- **Default:** `false`
|
|
2450
|
+
|
|
2451
|
+
### `analyze`
|
|
2452
|
+
|
|
2453
|
+
Nuxt uses `webpack-bundle-analyzer` to visualize your bundles and how to optimize them.
|
|
2454
|
+
|
|
2455
|
+
Set to `true` to enable bundle analysis, or pass an object with options: [for webpack](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin) or [for vite](https://github.com/btd/rollup-plugin-visualizer#options).
|
|
2456
|
+
|
|
2457
|
+
- **Type**: `object`
|
|
2458
|
+
- **Default**
|
|
2459
|
+
```json
|
|
2460
|
+
{
|
|
2461
|
+
"template": "treemap",
|
|
2462
|
+
"projectRoot": "/<rootDir>",
|
|
2463
|
+
"filename": "/<rootDir>/.nuxt/analyze/{name}.html"
|
|
2464
|
+
}
|
|
2465
|
+
```
|
|
2466
|
+
|
|
2467
|
+
**Example**:
|
|
2468
|
+
```js
|
|
2469
|
+
analyze: {
|
|
2470
|
+
analyzerMode: 'static'
|
|
2471
|
+
}
|
|
2472
|
+
```
|
|
2473
|
+
|
|
2474
|
+
### `cssSourceMap`
|
|
2475
|
+
|
|
2476
|
+
Enables CSS source map support (defaults to `true` in development).
|
|
2477
|
+
|
|
2478
|
+
- **Type**: `boolean`
|
|
2479
|
+
- **Default:** `false`
|
|
2480
|
+
|
|
2481
|
+
### `devMiddleware`
|
|
2482
|
+
|
|
2483
|
+
See [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) for available options.
|
|
2484
|
+
|
|
2485
|
+
#### `stats`
|
|
2486
|
+
|
|
2487
|
+
- **Type**: `string`
|
|
2488
|
+
- **Default:** `"none"`
|
|
2489
|
+
|
|
2490
|
+
### `experiments`
|
|
2491
|
+
|
|
2492
|
+
Configure [webpack experiments](https://webpack.js.org/configuration/experiments/)
|
|
2493
|
+
|
|
2494
|
+
### `extractCSS`
|
|
2495
|
+
|
|
2496
|
+
Enables Common CSS Extraction.
|
|
2497
|
+
|
|
2498
|
+
Using [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) under the hood, your CSS will be extracted into separate files, usually one per component. This allows caching your CSS and JavaScript separately.
|
|
2499
|
+
|
|
2500
|
+
- **Type**: `boolean`
|
|
2501
|
+
- **Default:** `true`
|
|
2502
|
+
|
|
2503
|
+
**Example**:
|
|
2504
|
+
```js
|
|
2505
|
+
export default {
|
|
2506
|
+
webpack: {
|
|
2507
|
+
extractCSS: true,
|
|
2508
|
+
// or
|
|
2509
|
+
extractCSS: {
|
|
2510
|
+
ignoreOrder: true
|
|
2511
|
+
}
|
|
2512
|
+
}
|
|
2513
|
+
}
|
|
2514
|
+
```
|
|
2515
|
+
|
|
2516
|
+
If you want to extract all your CSS to a single file, there is a workaround for this.
|
|
2517
|
+
However, note that it is not recommended to extract everything into a single file.
|
|
2518
|
+
Extracting into multiple CSS files is better for caching and preload isolation. It
|
|
2519
|
+
can also improve page performance by downloading and resolving only those resources
|
|
2520
|
+
that are needed.
|
|
2521
|
+
|
|
2522
|
+
**Example**:
|
|
2523
|
+
```js
|
|
2524
|
+
export default {
|
|
2525
|
+
webpack: {
|
|
2526
|
+
extractCSS: true,
|
|
2527
|
+
optimization: {
|
|
2528
|
+
splitChunks: {
|
|
2529
|
+
cacheGroups: {
|
|
2530
|
+
styles: {
|
|
2531
|
+
name: 'styles',
|
|
2532
|
+
test: /\.(css|vue)$/,
|
|
2533
|
+
chunks: 'all',
|
|
2534
|
+
enforce: true
|
|
2535
|
+
}
|
|
2536
|
+
}
|
|
2537
|
+
}
|
|
2538
|
+
}
|
|
2539
|
+
}
|
|
2540
|
+
}
|
|
2541
|
+
```
|
|
2542
|
+
|
|
2543
|
+
### `filenames`
|
|
2544
|
+
|
|
2545
|
+
Customize bundle filenames.
|
|
2546
|
+
|
|
2547
|
+
To understand a bit more about the use of manifests, take a look at [webpack documentation](https://webpack.js.org/guides/code-splitting/).
|
|
2548
|
+
|
|
2549
|
+
::callout
|
|
2550
|
+
**Note**: Be careful when using non-hashed based filenames in production
|
|
2551
|
+
as most browsers will cache the asset and not detect the changes on first load.
|
|
10
2552
|
::
|
|
11
2553
|
|
|
12
|
-
|
|
2554
|
+
This example changes fancy chunk names to numerical ids:
|
|
2555
|
+
|
|
2556
|
+
**Example**:
|
|
2557
|
+
```js
|
|
2558
|
+
filenames: {
|
|
2559
|
+
chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js')
|
|
2560
|
+
}
|
|
2561
|
+
```
|
|
2562
|
+
|
|
2563
|
+
#### `app`
|
|
2564
|
+
|
|
2565
|
+
- **Type**: `function`
|
|
2566
|
+
|
|
2567
|
+
#### `chunk`
|
|
2568
|
+
|
|
2569
|
+
- **Type**: `function`
|
|
2570
|
+
|
|
2571
|
+
#### `css`
|
|
2572
|
+
|
|
2573
|
+
- **Type**: `function`
|
|
2574
|
+
|
|
2575
|
+
#### `font`
|
|
2576
|
+
|
|
2577
|
+
- **Type**: `function`
|
|
2578
|
+
|
|
2579
|
+
#### `img`
|
|
2580
|
+
|
|
2581
|
+
- **Type**: `function`
|
|
2582
|
+
|
|
2583
|
+
#### `video`
|
|
2584
|
+
|
|
2585
|
+
- **Type**: `function`
|
|
2586
|
+
|
|
2587
|
+
### `friendlyErrors`
|
|
2588
|
+
|
|
2589
|
+
Set to `false` to disable the overlay provided by [FriendlyErrorsWebpackPlugin](https://github.com/nuxt/friendly-errors-webpack-plugin).
|
|
2590
|
+
|
|
2591
|
+
- **Type**: `boolean`
|
|
2592
|
+
- **Default:** `true`
|
|
2593
|
+
|
|
2594
|
+
### `hotMiddleware`
|
|
2595
|
+
|
|
2596
|
+
See [webpack-hot-middleware](https://github.com/webpack-contrib/webpack-hot-middleware) for available options.
|
|
2597
|
+
|
|
2598
|
+
### `loaders`
|
|
2599
|
+
|
|
2600
|
+
Customize the options of Nuxt's integrated webpack loaders.
|
|
2601
|
+
|
|
2602
|
+
#### `css`
|
|
2603
|
+
|
|
2604
|
+
See [css-loader](https://github.com/webpack-contrib/css-loader) for available options.
|
|
2605
|
+
|
|
2606
|
+
##### `esModule`
|
|
2607
|
+
|
|
2608
|
+
- **Type**: `boolean`
|
|
2609
|
+
- **Default:** `false`
|
|
2610
|
+
|
|
2611
|
+
##### `importLoaders`
|
|
2612
|
+
|
|
2613
|
+
- **Type**: `number`
|
|
2614
|
+
- **Default:** `0`
|
|
2615
|
+
|
|
2616
|
+
##### `url`
|
|
2617
|
+
|
|
2618
|
+
###### `filter`
|
|
2619
|
+
|
|
2620
|
+
- **Type**: `function`
|
|
2621
|
+
|
|
2622
|
+
#### `cssModules`
|
|
2623
|
+
|
|
2624
|
+
See [css-loader](https://github.com/webpack-contrib/css-loader) for available options.
|
|
2625
|
+
|
|
2626
|
+
##### `esModule`
|
|
2627
|
+
|
|
2628
|
+
- **Type**: `boolean`
|
|
2629
|
+
- **Default:** `false`
|
|
2630
|
+
|
|
2631
|
+
##### `importLoaders`
|
|
2632
|
+
|
|
2633
|
+
- **Type**: `number`
|
|
2634
|
+
- **Default:** `0`
|
|
2635
|
+
|
|
2636
|
+
##### `modules`
|
|
2637
|
+
|
|
2638
|
+
###### `localIdentName`
|
|
2639
|
+
|
|
2640
|
+
- **Type**: `string`
|
|
2641
|
+
- **Default:** `"[local]_[hash:base64:5]"`
|
|
2642
|
+
|
|
2643
|
+
##### `url`
|
|
2644
|
+
|
|
2645
|
+
###### `filter`
|
|
2646
|
+
|
|
2647
|
+
- **Type**: `function`
|
|
2648
|
+
|
|
2649
|
+
#### `esbuild`
|
|
2650
|
+
|
|
2651
|
+
- **Type**: `object`
|
|
2652
|
+
- **Default**
|
|
2653
|
+
```json
|
|
2654
|
+
{
|
|
2655
|
+
"target": "esnext",
|
|
2656
|
+
"jsxFactory": "h",
|
|
2657
|
+
"jsxFragment": "Fragment",
|
|
2658
|
+
"tsconfigRaw": {}
|
|
2659
|
+
}
|
|
2660
|
+
```
|
|
2661
|
+
|
|
2662
|
+
**See**: [esbuild loader](https://github.com/esbuild-kit/esbuild-loader)
|
|
2663
|
+
|
|
2664
|
+
#### `file`
|
|
2665
|
+
|
|
2666
|
+
**See**: [`file-loader` Options](https://github.com/webpack-contrib/file-loader#options)
|
|
2667
|
+
|
|
2668
|
+
**Default**:
|
|
2669
|
+
```ts
|
|
2670
|
+
{ esModule: false }
|
|
2671
|
+
```
|
|
2672
|
+
|
|
2673
|
+
##### `esModule`
|
|
2674
|
+
|
|
2675
|
+
- **Type**: `boolean`
|
|
2676
|
+
- **Default:** `false`
|
|
2677
|
+
|
|
2678
|
+
##### `limit`
|
|
2679
|
+
|
|
2680
|
+
- **Type**: `number`
|
|
2681
|
+
- **Default:** `1000`
|
|
2682
|
+
|
|
2683
|
+
#### `fontUrl`
|
|
2684
|
+
|
|
2685
|
+
**See**: [`file-loader` Options](https://github.com/webpack-contrib/file-loader#options)
|
|
2686
|
+
|
|
2687
|
+
**Default**:
|
|
2688
|
+
```ts
|
|
2689
|
+
{ esModule: false }
|
|
2690
|
+
```
|
|
2691
|
+
|
|
2692
|
+
##### `esModule`
|
|
2693
|
+
|
|
2694
|
+
- **Type**: `boolean`
|
|
2695
|
+
- **Default:** `false`
|
|
2696
|
+
|
|
2697
|
+
##### `limit`
|
|
2698
|
+
|
|
2699
|
+
- **Type**: `number`
|
|
2700
|
+
- **Default:** `1000`
|
|
2701
|
+
|
|
2702
|
+
#### `imgUrl`
|
|
2703
|
+
|
|
2704
|
+
**See**: [`file-loader` Options](https://github.com/webpack-contrib/file-loader#options)
|
|
2705
|
+
|
|
2706
|
+
**Default**:
|
|
2707
|
+
```ts
|
|
2708
|
+
{ esModule: false }
|
|
2709
|
+
```
|
|
2710
|
+
|
|
2711
|
+
##### `esModule`
|
|
2712
|
+
|
|
2713
|
+
- **Type**: `boolean`
|
|
2714
|
+
- **Default:** `false`
|
|
2715
|
+
|
|
2716
|
+
##### `limit`
|
|
2717
|
+
|
|
2718
|
+
- **Type**: `number`
|
|
2719
|
+
- **Default:** `1000`
|
|
2720
|
+
|
|
2721
|
+
#### `less`
|
|
2722
|
+
|
|
2723
|
+
- **Default**
|
|
2724
|
+
```json
|
|
2725
|
+
{
|
|
2726
|
+
"sourceMap": false
|
|
2727
|
+
}
|
|
2728
|
+
```
|
|
2729
|
+
|
|
2730
|
+
**See**: [`less-loader` Options](https://github.com/webpack-contrib/less-loader#options)
|
|
2731
|
+
|
|
2732
|
+
#### `pugPlain`
|
|
2733
|
+
|
|
2734
|
+
**See**: [`pug` options](https://pugjs.org/api/reference.html#options)
|
|
2735
|
+
|
|
2736
|
+
#### `sass`
|
|
2737
|
+
|
|
2738
|
+
**See**: [`sass-loader` Options](https://github.com/webpack-contrib/sass-loader#options)
|
|
2739
|
+
|
|
2740
|
+
**Default**:
|
|
2741
|
+
```ts
|
|
2742
|
+
{
|
|
2743
|
+
sassOptions: {
|
|
2744
|
+
indentedSyntax: true
|
|
2745
|
+
}
|
|
2746
|
+
}
|
|
2747
|
+
```
|
|
2748
|
+
|
|
2749
|
+
##### `sassOptions`
|
|
2750
|
+
|
|
2751
|
+
###### `indentedSyntax`
|
|
2752
|
+
|
|
2753
|
+
- **Type**: `boolean`
|
|
2754
|
+
- **Default:** `true`
|
|
2755
|
+
|
|
2756
|
+
#### `scss`
|
|
2757
|
+
|
|
2758
|
+
- **Default**
|
|
2759
|
+
```json
|
|
2760
|
+
{
|
|
2761
|
+
"sourceMap": false
|
|
2762
|
+
}
|
|
2763
|
+
```
|
|
2764
|
+
|
|
2765
|
+
**See**: [`sass-loader` Options](https://github.com/webpack-contrib/sass-loader#options)
|
|
2766
|
+
|
|
2767
|
+
#### `stylus`
|
|
2768
|
+
|
|
2769
|
+
- **Default**
|
|
2770
|
+
```json
|
|
2771
|
+
{
|
|
2772
|
+
"sourceMap": false
|
|
2773
|
+
}
|
|
2774
|
+
```
|
|
2775
|
+
|
|
2776
|
+
**See**: [`stylus-loader` Options](https://github.com/webpack-contrib/stylus-loader#options)
|
|
2777
|
+
|
|
2778
|
+
#### `vue`
|
|
2779
|
+
|
|
2780
|
+
See [vue-loader](https://github.com/vuejs/vue-loader) for available options.
|
|
2781
|
+
|
|
2782
|
+
##### `compilerOptions`
|
|
2783
|
+
|
|
2784
|
+
- **Type**: `object`
|
|
2785
|
+
|
|
2786
|
+
##### `propsDestructure`
|
|
2787
|
+
|
|
2788
|
+
- **Type**: `boolean`
|
|
2789
|
+
- **Default:** `true`
|
|
2790
|
+
|
|
2791
|
+
##### `transformAssetUrls`
|
|
2792
|
+
|
|
2793
|
+
- **Type**: `object`
|
|
2794
|
+
- **Default**
|
|
2795
|
+
```json
|
|
2796
|
+
{
|
|
2797
|
+
"video": [
|
|
2798
|
+
"src",
|
|
2799
|
+
"poster"
|
|
2800
|
+
],
|
|
2801
|
+
"source": [
|
|
2802
|
+
"src"
|
|
2803
|
+
],
|
|
2804
|
+
"img": [
|
|
2805
|
+
"src"
|
|
2806
|
+
],
|
|
2807
|
+
"image": [
|
|
2808
|
+
"xlink:href",
|
|
2809
|
+
"href"
|
|
2810
|
+
],
|
|
2811
|
+
"use": [
|
|
2812
|
+
"xlink:href",
|
|
2813
|
+
"href"
|
|
2814
|
+
]
|
|
2815
|
+
}
|
|
2816
|
+
```
|
|
2817
|
+
|
|
2818
|
+
#### `vueStyle`
|
|
2819
|
+
|
|
2820
|
+
- **Default**
|
|
2821
|
+
```json
|
|
2822
|
+
{
|
|
2823
|
+
"sourceMap": false
|
|
2824
|
+
}
|
|
2825
|
+
```
|
|
2826
|
+
|
|
2827
|
+
### `optimization`
|
|
2828
|
+
|
|
2829
|
+
Configure [webpack optimization](https://webpack.js.org/configuration/optimization/).
|
|
2830
|
+
|
|
2831
|
+
#### `minimize`
|
|
2832
|
+
|
|
2833
|
+
Set minimize to `false` to disable all minimizers. (It is disabled in development by default).
|
|
2834
|
+
|
|
2835
|
+
- **Type**: `boolean`
|
|
2836
|
+
- **Default:** `true`
|
|
2837
|
+
|
|
2838
|
+
#### `minimizer`
|
|
2839
|
+
|
|
2840
|
+
You can set minimizer to a customized array of plugins.
|
|
2841
|
+
|
|
2842
|
+
#### `runtimeChunk`
|
|
2843
|
+
|
|
2844
|
+
- **Type**: `string`
|
|
2845
|
+
- **Default:** `"single"`
|
|
2846
|
+
|
|
2847
|
+
#### `splitChunks`
|
|
2848
|
+
|
|
2849
|
+
##### `automaticNameDelimiter`
|
|
2850
|
+
|
|
2851
|
+
- **Type**: `string`
|
|
2852
|
+
- **Default:** `"/"`
|
|
2853
|
+
|
|
2854
|
+
##### `cacheGroups`
|
|
2855
|
+
|
|
2856
|
+
##### `chunks`
|
|
2857
|
+
|
|
2858
|
+
- **Type**: `string`
|
|
2859
|
+
- **Default:** `"all"`
|
|
2860
|
+
|
|
2861
|
+
### `optimizeCSS`
|
|
2862
|
+
|
|
2863
|
+
OptimizeCSSAssets plugin options.
|
|
2864
|
+
|
|
2865
|
+
Defaults to true when `extractCSS` is enabled.
|
|
2866
|
+
|
|
2867
|
+
- **Type**: `boolean`
|
|
2868
|
+
- **Default:** `false`
|
|
2869
|
+
|
|
2870
|
+
**See**: [css-minimizer-webpack-plugin documentation](https://github.com/webpack-contrib/css-minimizer-webpack-plugin).
|
|
2871
|
+
|
|
2872
|
+
### `plugins`
|
|
2873
|
+
|
|
2874
|
+
Add webpack plugins.
|
|
2875
|
+
|
|
2876
|
+
- **Type**: `array`
|
|
2877
|
+
|
|
2878
|
+
**Example**:
|
|
2879
|
+
```js
|
|
2880
|
+
import webpack from 'webpack'
|
|
2881
|
+
import { version } from './package.json'
|
|
2882
|
+
// ...
|
|
2883
|
+
plugins: [
|
|
2884
|
+
new webpack.DefinePlugin({
|
|
2885
|
+
'process.VERSION': version
|
|
2886
|
+
})
|
|
2887
|
+
]
|
|
2888
|
+
```
|
|
2889
|
+
|
|
2890
|
+
### `postcss`
|
|
2891
|
+
|
|
2892
|
+
Customize PostCSS Loader. same options as [`postcss-loader` options](https://github.com/webpack-contrib/postcss-loader#options)
|
|
2893
|
+
|
|
2894
|
+
#### `postcssOptions`
|
|
2895
|
+
|
|
2896
|
+
##### `plugins`
|
|
2897
|
+
|
|
2898
|
+
- **Type**: `object`
|
|
2899
|
+
- **Default**
|
|
2900
|
+
```json
|
|
2901
|
+
{
|
|
2902
|
+
"autoprefixer": {},
|
|
2903
|
+
"cssnano": {}
|
|
2904
|
+
}
|
|
2905
|
+
```
|
|
2906
|
+
|
|
2907
|
+
### `profile`
|
|
2908
|
+
|
|
2909
|
+
Enable the profiler in webpackbar.
|
|
2910
|
+
|
|
2911
|
+
It is normally enabled by CLI argument `--profile`.
|
|
2912
|
+
|
|
2913
|
+
- **Type**: `boolean`
|
|
2914
|
+
- **Default:** `false`
|
|
2915
|
+
|
|
2916
|
+
**See**: [webpackbar](https://github.com/unjs/webpackbar#profile).
|
|
2917
|
+
|
|
2918
|
+
### `serverURLPolyfill`
|
|
2919
|
+
|
|
2920
|
+
The polyfill library to load to provide URL and URLSearchParams.
|
|
2921
|
+
|
|
2922
|
+
Defaults to `'url'` ([see package](https://www.npmjs.com/package/url)).
|
|
2923
|
+
|
|
2924
|
+
- **Type**: `string`
|
|
2925
|
+
- **Default:** `"url"`
|
|
2926
|
+
|
|
2927
|
+
### `warningIgnoreFilters`
|
|
2928
|
+
|
|
2929
|
+
Filters to hide build warnings.
|
|
2930
|
+
|
|
2931
|
+
- **Type**: `array`
|
|
2932
|
+
|
|
2933
|
+
## workspaceDir
|
|
2934
|
+
|
|
2935
|
+
Define the workspace directory of your application.
|
|
2936
|
+
|
|
2937
|
+
Often this is used when in a monorepo setup. Nuxt will attempt to detect your workspace directory automatically, but you can override it here.
|
|
2938
|
+
It is normally not needed to configure this option.
|
|
2939
|
+
|
|
2940
|
+
- **Type**: `string`
|
|
2941
|
+
- **Default:** `"/<workspaceDir>"`
|