@nuxt/docs 4.1.3 → 4.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/1.getting-started/02.installation.md +4 -4
- package/1.getting-started/03.configuration.md +4 -4
- package/1.getting-started/04.views.md +2 -2
- package/1.getting-started/05.assets.md +1 -1
- package/1.getting-started/06.styling.md +11 -11
- package/1.getting-started/07.routing.md +4 -0
- package/1.getting-started/09.transitions.md +6 -6
- package/1.getting-started/10.data-fetching.md +14 -14
- package/1.getting-started/11.state-management.md +2 -2
- package/1.getting-started/12.error-handling.md +4 -4
- package/1.getting-started/13.server.md +4 -4
- package/1.getting-started/14.layers.md +29 -10
- package/1.getting-started/17.testing.md +3 -3
- package/1.getting-started/18.upgrade.md +205 -48
- package/2.guide/1.directory-structure/1.app/1.components.md +4 -4
- package/2.guide/1.directory-structure/1.app/1.composables.md +1 -1
- package/2.guide/1.directory-structure/1.app/1.layouts.md +2 -2
- package/2.guide/1.directory-structure/1.app/1.middleware.md +4 -4
- package/2.guide/1.directory-structure/1.app/1.pages.md +13 -13
- package/2.guide/1.directory-structure/1.app/1.plugins.md +1 -5
- package/2.guide/1.directory-structure/1.node_modules.md +1 -1
- package/2.guide/1.directory-structure/1.public.md +1 -1
- package/2.guide/1.directory-structure/1.server.md +5 -5
- package/2.guide/1.directory-structure/2.env.md +1 -1
- package/2.guide/1.directory-structure/3.tsconfig.md +38 -7
- package/2.guide/2.concepts/1.auto-imports.md +2 -2
- package/2.guide/2.concepts/10.nuxt-lifecycle.md +3 -3
- package/2.guide/2.concepts/2.vuejs-development.md +3 -3
- package/2.guide/2.concepts/3.rendering.md +4 -4
- package/2.guide/2.concepts/7.esm.md +7 -3
- package/2.guide/2.concepts/8.typescript.md +15 -38
- package/2.guide/2.concepts/9.code-style.md +1 -1
- package/2.guide/3.going-further/1.experimental-features.md +94 -6
- package/2.guide/3.going-further/1.features.md +15 -3
- package/2.guide/3.going-further/1.internals.md +2 -2
- package/2.guide/3.going-further/2.hooks.md +1 -1
- package/2.guide/3.going-further/3.modules.md +112 -29
- package/2.guide/3.going-further/6.nuxt-app.md +5 -5
- package/2.guide/3.going-further/7.layers.md +46 -21
- package/2.guide/3.going-further/9.debugging.md +1 -1
- package/2.guide/4.recipes/1.custom-routing.md +4 -4
- package/2.guide/4.recipes/2.vite-plugin.md +41 -0
- package/2.guide/4.recipes/3.custom-usefetch.md +1 -1
- package/2.guide/5.best-practices/hydration.md +1 -1
- package/3.api/1.components/10.nuxt-picture.md +1 -1
- package/3.api/1.components/11.teleports.md +1 -1
- package/3.api/1.components/12.nuxt-route-announcer.md +1 -1
- package/3.api/1.components/13.nuxt-time.md +5 -1
- package/3.api/1.components/2.nuxt-page.md +1 -1
- package/3.api/1.components/4.nuxt-link.md +11 -11
- package/3.api/1.components/5.nuxt-loading-indicator.md +1 -1
- package/3.api/1.components/6.nuxt-error-boundary.md +1 -1
- package/3.api/2.composables/use-app-config.md +1 -1
- package/3.api/2.composables/use-async-data.md +80 -13
- package/3.api/2.composables/use-cookie.md +7 -7
- package/3.api/2.composables/use-fetch.md +6 -2
- package/3.api/2.composables/use-head-safe.md +37 -20
- package/3.api/2.composables/use-head.md +136 -36
- package/3.api/2.composables/use-hydration.md +24 -18
- package/3.api/2.composables/use-lazy-async-data.md +58 -9
- package/3.api/2.composables/use-lazy-fetch.md +65 -9
- package/3.api/2.composables/use-nuxt-app.md +7 -7
- package/3.api/2.composables/use-nuxt-data.md +1 -1
- package/3.api/2.composables/use-request-fetch.md +1 -1
- package/3.api/2.composables/use-route.md +1 -1
- package/3.api/2.composables/use-router.md +15 -15
- package/3.api/2.composables/use-runtime-hook.md +1 -1
- package/3.api/2.composables/use-state.md +1 -1
- package/3.api/3.utils/abort-navigation.md +2 -2
- package/3.api/3.utils/define-lazy-hydration-component.md +4 -4
- package/3.api/3.utils/define-nuxt-component.md +1 -1
- package/3.api/3.utils/define-nuxt-plugin.md +1 -1
- package/3.api/3.utils/define-nuxt-route-middleware.md +1 -1
- package/3.api/3.utils/define-page-meta.md +8 -8
- package/3.api/3.utils/navigate-to.md +5 -5
- package/3.api/3.utils/on-before-route-leave.md +1 -1
- package/3.api/3.utils/on-before-route-update.md +1 -1
- package/3.api/3.utils/refresh-cookie.md +1 -1
- package/3.api/3.utils/update-app-config.md +2 -2
- package/3.api/5.kit/1.modules.md +88 -2
- package/3.api/5.kit/11.nitro.md +4 -0
- package/3.api/5.kit/14.builder.md +66 -10
- package/3.api/5.kit/15.examples.md +3 -5
- package/3.api/5.kit/2.programmatic.md +2 -2
- package/3.api/5.kit/5.components.md +1 -0
- package/3.api/5.kit/9.head.md +132 -0
- package/3.api/6.advanced/1.hooks.md +7 -7
- package/3.api/6.nuxt-config.md +100 -29
- package/5.community/3.reporting-bugs.md +3 -3
- package/5.community/4.contribution.md +1 -1
- package/5.community/5.framework-contribution.md +8 -8
- package/5.community/6.roadmap.md +4 -4
- package/6.bridge/4.plugins-and-middleware.md +1 -1
- package/7.migration/2.configuration.md +2 -2
- package/7.migration/20.module-authors.md +1 -1
- package/7.migration/5.plugins-and-middleware.md +1 -1
- package/7.migration/6.pages-and-layouts.md +2 -2
- package/README.md +1 -1
- package/package.json +1 -1
package/3.api/6.nuxt-config.md
CHANGED
|
@@ -202,7 +202,7 @@ This can be overridden with `definePageMeta` on an individual page. Only JSON-se
|
|
|
202
202
|
- **Type**: `boolean`
|
|
203
203
|
- **Default:** `false`
|
|
204
204
|
|
|
205
|
-
**See**: [Vue KeepAlive](https://vuejs.org/api/built-in-components
|
|
205
|
+
**See**: [Vue KeepAlive](https://vuejs.org/api/built-in-components#keepalive)
|
|
206
206
|
|
|
207
207
|
### `layoutTransition`
|
|
208
208
|
|
|
@@ -213,7 +213,7 @@ This can be overridden with `definePageMeta` on an individual page. Only JSON-se
|
|
|
213
213
|
- **Type**: `boolean`
|
|
214
214
|
- **Default:** `false`
|
|
215
215
|
|
|
216
|
-
**See**: [Vue Transition docs](https://vuejs.org/api/built-in-components
|
|
216
|
+
**See**: [Vue Transition docs](https://vuejs.org/api/built-in-components#transition)
|
|
217
217
|
|
|
218
218
|
### `pageTransition`
|
|
219
219
|
|
|
@@ -224,7 +224,7 @@ This can be overridden with `definePageMeta` on an individual page. Only JSON-se
|
|
|
224
224
|
- **Type**: `boolean`
|
|
225
225
|
- **Default:** `false`
|
|
226
226
|
|
|
227
|
-
**See**: [Vue Transition docs](https://vuejs.org/api/built-in-components
|
|
227
|
+
**See**: [Vue Transition docs](https://vuejs.org/api/built-in-components#transition)
|
|
228
228
|
|
|
229
229
|
### `rootAttrs`
|
|
230
230
|
|
|
@@ -339,7 +339,7 @@ Shared build configuration.
|
|
|
339
339
|
|
|
340
340
|
Nuxt allows visualizing your bundles and how to optimize them.
|
|
341
341
|
|
|
342
|
-
Set to `true` to enable bundle analysis, or pass an object with options: [for webpack](https://github.com/webpack
|
|
342
|
+
Set to `true` to enable bundle analysis, or pass an object with options: [for webpack](https://github.com/webpack/webpack-bundle-analyzer#options-for-plugin) or [for vite](https://github.com/btd/rollup-plugin-visualizer#options).
|
|
343
343
|
|
|
344
344
|
- **Type**: `object`
|
|
345
345
|
- **Default**
|
|
@@ -424,9 +424,60 @@ A unique identifier matching the build. This may contain the hash of the current
|
|
|
424
424
|
|
|
425
425
|
The builder to use for bundling the Vue part of your application.
|
|
426
426
|
|
|
427
|
-
-
|
|
427
|
+
Nuxt supports multiple builders for the client-side application. By default, Vite is used, but you can switch to webpack, Rspack, or even provide a custom builder implementation.
|
|
428
|
+
|
|
429
|
+
- **Type**: `'vite' | 'webpack' | 'rspack' | string | { bundle: (nuxt: Nuxt) => Promise<void> }`
|
|
428
430
|
- **Default:** `"@nuxt/vite-builder"`
|
|
429
431
|
|
|
432
|
+
**Using supported builders:**
|
|
433
|
+
|
|
434
|
+
```ts
|
|
435
|
+
export default defineNuxtConfig({
|
|
436
|
+
// default - uses @nuxt/vite-builder
|
|
437
|
+
// builder: 'vite',
|
|
438
|
+
|
|
439
|
+
// uses @nuxt/webpack-builder
|
|
440
|
+
// builder: 'webpack',
|
|
441
|
+
|
|
442
|
+
// uses @nuxt/rspack-builder
|
|
443
|
+
builder: 'rspack',
|
|
444
|
+
})
|
|
445
|
+
```
|
|
446
|
+
|
|
447
|
+
If you are using `webpack` or `rspack` you will need to make sure `@nuxt/webpack-builder` or `@nuxt/rspack-builder` is explicitly installed in your project.
|
|
448
|
+
|
|
449
|
+
**Using a custom builder object:**
|
|
450
|
+
|
|
451
|
+
You can provide a custom builder by passing an object with a `bundle` function:
|
|
452
|
+
|
|
453
|
+
```ts
|
|
454
|
+
export default defineNuxtConfig({
|
|
455
|
+
builder: {
|
|
456
|
+
async bundle (nuxt) {
|
|
457
|
+
const entry = await resolvePath(resolve(nuxt.options.appDir, 'entry'))
|
|
458
|
+
|
|
459
|
+
// Build client and server bundles
|
|
460
|
+
await buildClient(nuxt, entry)
|
|
461
|
+
if (nuxt.options.ssr) {
|
|
462
|
+
await buildServer(nuxt, entry)
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
// ... it's a bit more complicated than that, of course!
|
|
466
|
+
},
|
|
467
|
+
},
|
|
468
|
+
})
|
|
469
|
+
```
|
|
470
|
+
|
|
471
|
+
**Creating a custom builder package:**
|
|
472
|
+
|
|
473
|
+
To create a custom builder as a separate package, it should export a `bundle` function. You can then specify the package name in your `nuxt.config.ts`:
|
|
474
|
+
|
|
475
|
+
```ts
|
|
476
|
+
export default defineNuxtConfig({
|
|
477
|
+
builder: 'my-custom-builder',
|
|
478
|
+
})
|
|
479
|
+
```
|
|
480
|
+
|
|
430
481
|
## compatibilityDate
|
|
431
482
|
|
|
432
483
|
Specify a compatibility date for your app.
|
|
@@ -668,7 +719,8 @@ Configure shared esbuild options used within Nuxt and passed to other builders,
|
|
|
668
719
|
|
|
669
720
|
## experimental
|
|
670
721
|
|
|
671
|
-
::read-more{to="/docs/4.x/guide/going-further/experimental-features"}
|
|
722
|
+
::read-more{to="/docs/4.x/guide/going-further/experimental-features"}
|
|
723
|
+
Learn more about Nuxt's experimental features.
|
|
672
724
|
::
|
|
673
725
|
|
|
674
726
|
## extends
|
|
@@ -701,12 +753,14 @@ The extensions that should be resolved by the Nuxt resolver.
|
|
|
701
753
|
|
|
702
754
|
## features
|
|
703
755
|
|
|
704
|
-
::read-more{to="/docs/4.x/guide/going-further/features#features"}
|
|
756
|
+
::read-more{to="/docs/4.x/guide/going-further/features#features"}
|
|
757
|
+
Learn more about Nuxt's opt-in features.
|
|
705
758
|
::
|
|
706
759
|
|
|
707
760
|
## future
|
|
708
761
|
|
|
709
|
-
::read-more{to="/docs/4.x/guide/going-further/features#features"}
|
|
762
|
+
::read-more{to="/docs/4.x/guide/going-further/features#features"}
|
|
763
|
+
Learn more about opting-in to new features that will become default in a future (possibly major) version of the framework.
|
|
710
764
|
::
|
|
711
765
|
|
|
712
766
|
## hooks
|
|
@@ -1092,7 +1146,7 @@ and these plugins do not need to be listed in `nuxt.config` unless you
|
|
|
1092
1146
|
need to customize their order. All plugins are deduplicated by their src path.
|
|
1093
1147
|
::
|
|
1094
1148
|
|
|
1095
|
-
**See**: [`app/plugins/` directory documentation](https://nuxt.com/docs/4.x/guide/directory-structure/plugins)
|
|
1149
|
+
**See**: [`app/plugins/` directory documentation](https://nuxt.com/docs/4.x/guide/directory-structure/app/plugins)
|
|
1096
1150
|
|
|
1097
1151
|
**Example**:
|
|
1098
1152
|
```ts
|
|
@@ -1163,7 +1217,7 @@ Additional router options passed to `vue-router`. On top of the options for `vue
|
|
|
1163
1217
|
For more control, you can use an `router.options.ts` file.
|
|
1164
1218
|
::
|
|
1165
1219
|
|
|
1166
|
-
**See**: [Vue Router documentation](https://router.vuejs.org/api/interfaces/routeroptions
|
|
1220
|
+
**See**: [Vue Router documentation](https://router.vuejs.org/api/interfaces/routeroptions)
|
|
1167
1221
|
|
|
1168
1222
|
#### `hashMode`
|
|
1169
1223
|
|
|
@@ -1218,6 +1272,23 @@ export default defineNuxtConfig({
|
|
|
1218
1272
|
})
|
|
1219
1273
|
```
|
|
1220
1274
|
|
|
1275
|
+
## server
|
|
1276
|
+
|
|
1277
|
+
Configuration for Nuxt's server builder.
|
|
1278
|
+
|
|
1279
|
+
### `builder`
|
|
1280
|
+
|
|
1281
|
+
Specify the server builder to use for bundling the server part of your application.
|
|
1282
|
+
|
|
1283
|
+
By default, Nuxt uses `@nuxt/nitro-server`, which provides standalone Nitro integration. This architecture allows for different Nitro integration patterns, such as using Nitro as a Vite plugin (with the Vite Environment API).
|
|
1284
|
+
|
|
1285
|
+
- **Type**: `string | { bundle: (nuxt: Nuxt) => Promise<void> }`
|
|
1286
|
+
- **Default:** `"@nuxt/nitro-server"`
|
|
1287
|
+
|
|
1288
|
+
::callout{type="warning"}
|
|
1289
|
+
This option is intended for internal use and the API is not finalized. Please open an issue before relying on the current implementation.
|
|
1290
|
+
::
|
|
1291
|
+
|
|
1221
1292
|
## serverDir
|
|
1222
1293
|
|
|
1223
1294
|
Define the server directory of your Nuxt application, where Nitro routes, middleware and plugins are kept.
|
|
@@ -1515,7 +1586,7 @@ export default defineNuxtConfig({
|
|
|
1515
1586
|
|
|
1516
1587
|
Configuration that will be passed directly to Vite.
|
|
1517
1588
|
|
|
1518
|
-
**See**: [Vite configuration docs](https://vite.dev/config) for more information.
|
|
1589
|
+
**See**: [Vite configuration docs](https://vite.dev/config/) for more information.
|
|
1519
1590
|
Please note that not all vite options are supported in Nuxt.
|
|
1520
1591
|
|
|
1521
1592
|
### `build`
|
|
@@ -1714,13 +1785,13 @@ Vue.js config
|
|
|
1714
1785
|
|
|
1715
1786
|
Options for the Vue compiler that will be passed at build time.
|
|
1716
1787
|
|
|
1717
|
-
**See**: [Vue documentation](https://vuejs.org/api/application
|
|
1788
|
+
**See**: [Vue documentation](https://vuejs.org/api/application#app-config-compileroptions)
|
|
1718
1789
|
|
|
1719
1790
|
### `config`
|
|
1720
1791
|
|
|
1721
|
-
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
|
|
1792
|
+
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.
|
|
1722
1793
|
|
|
1723
|
-
**See**: [Vue app config documentation](https://vuejs.org/api/application
|
|
1794
|
+
**See**: [Vue app config documentation](https://vuejs.org/api/application#app-config)
|
|
1724
1795
|
|
|
1725
1796
|
### `propsDestructure`
|
|
1726
1797
|
|
|
@@ -1847,7 +1918,7 @@ Hard-replaces `typeof process`, `typeof window` and `typeof document` to tree-sh
|
|
|
1847
1918
|
|
|
1848
1919
|
If you are using webpack, Nuxt uses `webpack-bundle-analyzer` to visualize your bundles and how to optimize them.
|
|
1849
1920
|
|
|
1850
|
-
Set to `true` to enable bundle analysis, or pass an object with options: [for webpack](https://github.com/webpack
|
|
1921
|
+
Set to `true` to enable bundle analysis, or pass an object with options: [for webpack](https://github.com/webpack/webpack-bundle-analyzer#options-for-plugin) or [for vite](https://github.com/btd/rollup-plugin-visualizer#options).
|
|
1851
1922
|
|
|
1852
1923
|
- **Type**: `object`
|
|
1853
1924
|
- **Default**
|
|
@@ -1894,7 +1965,7 @@ Configure [webpack experiments](https://webpack.js.org/configuration/experiments
|
|
|
1894
1965
|
|
|
1895
1966
|
Enables Common CSS Extraction.
|
|
1896
1967
|
|
|
1897
|
-
Using [mini-css-extract-plugin](https://github.com/webpack
|
|
1968
|
+
Using [mini-css-extract-plugin](https://github.com/webpack/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.
|
|
1898
1969
|
|
|
1899
1970
|
- **Type**: `boolean`
|
|
1900
1971
|
- **Default:** `true`
|
|
@@ -1996,7 +2067,7 @@ Set to `false` to disable the overlay provided by [FriendlyErrorsWebpackPlugin](
|
|
|
1996
2067
|
|
|
1997
2068
|
### `hotMiddleware`
|
|
1998
2069
|
|
|
1999
|
-
See [webpack-hot-middleware](https://github.com/webpack
|
|
2070
|
+
See [webpack-hot-middleware](https://github.com/webpack/webpack-hot-middleware) for available options.
|
|
2000
2071
|
|
|
2001
2072
|
### `loaders`
|
|
2002
2073
|
|
|
@@ -2004,7 +2075,7 @@ Customize the options of Nuxt's integrated webpack loaders.
|
|
|
2004
2075
|
|
|
2005
2076
|
#### `css`
|
|
2006
2077
|
|
|
2007
|
-
See [css-loader](https://github.com/webpack
|
|
2078
|
+
See [css-loader](https://github.com/webpack/css-loader) for available options.
|
|
2008
2079
|
|
|
2009
2080
|
##### `esModule`
|
|
2010
2081
|
|
|
@@ -2024,7 +2095,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2024
2095
|
|
|
2025
2096
|
#### `cssModules`
|
|
2026
2097
|
|
|
2027
|
-
See [css-loader](https://github.com/webpack
|
|
2098
|
+
See [css-loader](https://github.com/webpack/css-loader) for available options.
|
|
2028
2099
|
|
|
2029
2100
|
##### `esModule`
|
|
2030
2101
|
|
|
@@ -2062,11 +2133,11 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2062
2133
|
}
|
|
2063
2134
|
```
|
|
2064
2135
|
|
|
2065
|
-
**See**: [esbuild loader](https://github.com/
|
|
2136
|
+
**See**: [esbuild loader](https://github.com/privatenumber/esbuild-loader)
|
|
2066
2137
|
|
|
2067
2138
|
#### `file`
|
|
2068
2139
|
|
|
2069
|
-
**See**: [`file-loader` Options](https://github.com/webpack
|
|
2140
|
+
**See**: [`file-loader` Options](https://github.com/webpack/file-loader#options)
|
|
2070
2141
|
|
|
2071
2142
|
**Default**:
|
|
2072
2143
|
```json
|
|
@@ -2085,7 +2156,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2085
2156
|
|
|
2086
2157
|
#### `fontUrl`
|
|
2087
2158
|
|
|
2088
|
-
**See**: [`file-loader` Options](https://github.com/webpack
|
|
2159
|
+
**See**: [`file-loader` Options](https://github.com/webpack/file-loader#options)
|
|
2089
2160
|
|
|
2090
2161
|
**Default**:
|
|
2091
2162
|
```json
|
|
@@ -2104,7 +2175,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2104
2175
|
|
|
2105
2176
|
#### `imgUrl`
|
|
2106
2177
|
|
|
2107
|
-
**See**: [`file-loader` Options](https://github.com/webpack
|
|
2178
|
+
**See**: [`file-loader` Options](https://github.com/webpack/file-loader#options)
|
|
2108
2179
|
|
|
2109
2180
|
**Default**:
|
|
2110
2181
|
```json
|
|
@@ -2130,7 +2201,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2130
2201
|
}
|
|
2131
2202
|
```
|
|
2132
2203
|
|
|
2133
|
-
**See**: [`less-loader` Options](https://github.com/webpack
|
|
2204
|
+
**See**: [`less-loader` Options](https://github.com/webpack/less-loader#options)
|
|
2134
2205
|
|
|
2135
2206
|
#### `pugPlain`
|
|
2136
2207
|
|
|
@@ -2138,7 +2209,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2138
2209
|
|
|
2139
2210
|
#### `sass`
|
|
2140
2211
|
|
|
2141
|
-
**See**: [`sass-loader` Options](https://github.com/webpack
|
|
2212
|
+
**See**: [`sass-loader` Options](https://github.com/webpack/sass-loader#options)
|
|
2142
2213
|
|
|
2143
2214
|
**Default**:
|
|
2144
2215
|
```json
|
|
@@ -2165,7 +2236,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2165
2236
|
}
|
|
2166
2237
|
```
|
|
2167
2238
|
|
|
2168
|
-
**See**: [`sass-loader` Options](https://github.com/webpack
|
|
2239
|
+
**See**: [`sass-loader` Options](https://github.com/webpack/sass-loader#options)
|
|
2169
2240
|
|
|
2170
2241
|
#### `stylus`
|
|
2171
2242
|
|
|
@@ -2176,7 +2247,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2176
2247
|
}
|
|
2177
2248
|
```
|
|
2178
2249
|
|
|
2179
|
-
**See**: [`stylus-loader` Options](https://github.com/webpack
|
|
2250
|
+
**See**: [`stylus-loader` Options](https://github.com/webpack/stylus-loader#options)
|
|
2180
2251
|
|
|
2181
2252
|
#### `vue`
|
|
2182
2253
|
|
|
@@ -2270,7 +2341,7 @@ Defaults to true when `extractCSS` is enabled.
|
|
|
2270
2341
|
- **Type**: `boolean`
|
|
2271
2342
|
- **Default:** `false`
|
|
2272
2343
|
|
|
2273
|
-
**See**: [css-minimizer-webpack-plugin documentation](https://github.com/webpack
|
|
2344
|
+
**See**: [css-minimizer-webpack-plugin documentation](https://github.com/webpack/css-minimizer-webpack-plugin).
|
|
2274
2345
|
|
|
2275
2346
|
### `plugins`
|
|
2276
2347
|
|
|
@@ -2297,7 +2368,7 @@ export default defineNuxtConfig({
|
|
|
2297
2368
|
|
|
2298
2369
|
### `postcss`
|
|
2299
2370
|
|
|
2300
|
-
Customize PostCSS Loader. same options as [`postcss-loader` options](https://github.com/webpack
|
|
2371
|
+
Customize PostCSS Loader. same options as [`postcss-loader` options](https://github.com/webpack/postcss-loader#options)
|
|
2301
2372
|
|
|
2302
2373
|
#### `postcssOptions`
|
|
2303
2374
|
|
|
@@ -31,15 +31,15 @@ If your issue concerns Vue or Vite, please try to reproduce it first with the Vu
|
|
|
31
31
|
**Nuxt**:
|
|
32
32
|
|
|
33
33
|
::card-group
|
|
34
|
-
:card{title="Nuxt on StackBlitz" icon="i-simple-icons-stackblitz" to="https://nuxt.new/s/
|
|
35
|
-
:card{title="Nuxt on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://nuxt.new/c/
|
|
34
|
+
:card{title="Nuxt on StackBlitz" icon="i-simple-icons-stackblitz" to="https://nuxt.new/s/v4" target="_blank"}
|
|
35
|
+
:card{title="Nuxt on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://nuxt.new/c/v4" target="_blank"}
|
|
36
36
|
::
|
|
37
37
|
|
|
38
38
|
**Vue**:
|
|
39
39
|
|
|
40
40
|
::card-group
|
|
41
41
|
:card{title="Vue SSR on StackBlitz" icon="i-simple-icons-stackblitz" to="https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main?terminal=dev" target="_blank"}
|
|
42
|
-
:card{title="Vue SSR on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://codesandbox.io/
|
|
42
|
+
:card{title="Vue SSR on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://codesandbox.io/p/sandbox/github/nuxt-contrib/vue3-ssr-starter/main" target="_blank"}
|
|
43
43
|
:card{title="Vue SSR Template on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt-contrib/vue3-ssr-starter/generate" target="_blank"}
|
|
44
44
|
::
|
|
45
45
|
|
|
@@ -143,7 +143,7 @@ Most of the Nuxt ecosystem can consume ESM directly. In general we advocate that
|
|
|
143
143
|
|
|
144
144
|
#### What's Corepack
|
|
145
145
|
|
|
146
|
-
[Corepack](https://
|
|
146
|
+
[Corepack](https://github.com/nodejs/corepack) makes sure you are using the correct version for package manager when you run corresponding commands. Projects might have `packageManager` field in their `package.json`.
|
|
147
147
|
|
|
148
148
|
Under projects with configuration as shown below, Corepack will install `v7.5.0` of `pnpm` (if you don't have it already) and use it to run your commands.
|
|
149
149
|
|
|
@@ -8,19 +8,19 @@ Once you've read the [general contribution guide](/docs/4.x/community/contributi
|
|
|
8
8
|
|
|
9
9
|
## Monorepo Guide
|
|
10
10
|
|
|
11
|
-
- `packages/kit`: Toolkit for authoring Nuxt Modules, published as [`@nuxt/kit`](https://npmjs.com/package/@nuxt/kit).
|
|
12
|
-
- `packages/nuxt`: The core of Nuxt, published as [`nuxt`](https://npmjs.com/package/nuxt).
|
|
13
|
-
- `packages/schema`: Cross-version Nuxt typedefs and defaults, published as [`@nuxt/schema`](https://npmjs.com/package/@nuxt/schema).
|
|
14
|
-
- `packages/rspack`: The [Rspack](https://rspack.
|
|
15
|
-
- `packages/vite`: The [Vite](https://vite.dev) bundler for Nuxt, published as [`@nuxt/vite-builder`](https://npmjs.com/package/@nuxt/vite-builder).
|
|
16
|
-
- `packages/webpack`: The [webpack](https://webpack.js.org) bundler for Nuxt, published as [`@nuxt/webpack-builder`](https://npmjs.com/package/@nuxt/webpack-builder).
|
|
11
|
+
- `packages/kit`: Toolkit for authoring Nuxt Modules, published as [`@nuxt/kit`](https://www.npmjs.com/package/@nuxt/kit).
|
|
12
|
+
- `packages/nuxt`: The core of Nuxt, published as [`nuxt`](https://www.npmjs.com/package/nuxt).
|
|
13
|
+
- `packages/schema`: Cross-version Nuxt typedefs and defaults, published as [`@nuxt/schema`](https://www.npmjs.com/package/@nuxt/schema).
|
|
14
|
+
- `packages/rspack`: The [Rspack](https://rspack.rs) bundler for Nuxt, published as [`@nuxt/rspack-builder`](https://www.npmjs.com/package/@nuxt/rspack-builder).
|
|
15
|
+
- `packages/vite`: The [Vite](https://vite.dev) bundler for Nuxt, published as [`@nuxt/vite-builder`](https://www.npmjs.com/package/@nuxt/vite-builder).
|
|
16
|
+
- `packages/webpack`: The [webpack](https://webpack.js.org) bundler for Nuxt, published as [`@nuxt/webpack-builder`](https://www.npmjs.com/package/@nuxt/webpack-builder).
|
|
17
17
|
|
|
18
18
|
## Setup
|
|
19
19
|
|
|
20
20
|
To contribute to Nuxt, you need to set up a local environment.
|
|
21
21
|
|
|
22
|
-
1. [Fork](https://
|
|
23
|
-
2. Ensure using the latest [Node.js](https://nodejs.org/en)
|
|
22
|
+
1. [Fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo) the [`nuxt/nuxt`](https://github.com/nuxt/nuxt) repository to your own GitHub account and then [clone](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) it to your local device.
|
|
23
|
+
2. Ensure using the latest [Node.js](https://nodejs.org/en)
|
|
24
24
|
3. Enable [Corepack](https://github.com/nodejs/corepack) to have `pnpm` and `yarn`
|
|
25
25
|
```bash [Terminal]
|
|
26
26
|
corepack enable
|
package/5.community/6.roadmap.md
CHANGED
|
@@ -32,7 +32,7 @@ Milestone | Expected date | Notes
|
|
|
32
32
|
-------------|---------------|------------------------------------------------------------------------|-----------------------
|
|
33
33
|
SEO & PWA | 2025 | [nuxt/nuxt#18395](https://github.com/nuxt/nuxt/discussions/18395) | Migrating from [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) for built-in SEO utils and service worker support
|
|
34
34
|
Assets | 2025 | [nuxt/nuxt#22012](https://github.com/nuxt/nuxt/discussions/22012) | Allow developers and modules to handle loading third-party assets.
|
|
35
|
-
Translations | - | [nuxt/
|
|
35
|
+
Translations | - | [nuxt/nuxt.com#1711](https://github.com/nuxt/nuxt.com/issues/1711) | A collaborative project for a stable translation process for Nuxt docs. Currently pending for ideas and documentation tooling support.
|
|
36
36
|
|
|
37
37
|
## Core Modules Roadmap
|
|
38
38
|
|
|
@@ -68,9 +68,9 @@ Each active version has its own nightly releases which are generated automatical
|
|
|
68
68
|
Release | | Initial release | End Of Life | Docs
|
|
69
69
|
-------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ---------------------------- | ---------------------------------------
|
|
70
70
|
**5.x** (scheduled) | | Q4 2025 (estimated) | TBA |
|
|
71
|
-
**4.x** (stable) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt latest version" src="https://flat.badgen.net/npm/v/nuxt?label=" class="not-prose"></a> | 2025-07-16 | 6 months after 5.x release | [nuxt.com](/docs/4.x)
|
|
72
|
-
**3.x** (maintenance) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 3.x version" src="https://flat.badgen.net/npm/v/nuxt/3x?label=" class="not-prose"></a> | 2022-11-16 | 2026-01-31 | [nuxt.com](/docs/3.x)
|
|
73
|
-
**2.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 2.x version" src="https://flat.badgen.net/npm/v/nuxt/2x?label=" class="not-prose"></a> | 2018-09-21 | 2024-06-30 | [v2.nuxt.com](https://v2.nuxt.com/docs)
|
|
71
|
+
**4.x** (stable) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt latest version" src="https://flat.badgen.net/npm/v/nuxt?label=" class="not-prose"></a> | 2025-07-16 | 6 months after 5.x release | [nuxt.com](/docs/4.x/getting-started/introduction)
|
|
72
|
+
**3.x** (maintenance) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 3.x version" src="https://flat.badgen.net/npm/v/nuxt/3x?label=" class="not-prose"></a> | 2022-11-16 | 2026-01-31 | [nuxt.com](/docs/3.x/getting-started/introduction)
|
|
73
|
+
**2.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 2.x version" src="https://flat.badgen.net/npm/v/nuxt/2x?label=" class="not-prose"></a> | 2018-09-21 | 2024-06-30 | [v2.nuxt.com](https://v2.nuxt.com/docs/get-started/installation/)
|
|
74
74
|
**1.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 1.x version" src="https://flat.badgen.net/npm/v/nuxt/1x?label=" class="not-prose"></a> | 2018-01-08 | 2019-09-21 |
|
|
75
75
|
|
|
76
76
|
### Support Status
|
|
@@ -7,7 +7,7 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt Bridge new plugins and mi
|
|
|
7
7
|
|
|
8
8
|
You can now migrate to the Nuxt 3 plugins API, which is slightly different in format from Nuxt 2.
|
|
9
9
|
|
|
10
|
-
Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/4.x/guide/directory-structure/plugins).
|
|
10
|
+
Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/4.x/guide/directory-structure/app/plugins).
|
|
11
11
|
|
|
12
12
|
```ts [app/plugins/hello.ts]
|
|
13
13
|
export default defineNuxtPlugin((nuxtApp) => {
|
|
@@ -183,7 +183,7 @@ Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language
|
|
|
183
183
|
|
|
184
184
|
There are a number of changes to what is recommended Vue best practice, as well as a number of breaking changes between Vue 2 and 3.
|
|
185
185
|
|
|
186
|
-
It is recommended to read the [Vue 3 migration guide](https://v3-migration.vuejs.org) and in particular the [breaking changes list](https://v3-migration.vuejs.org/breaking-changes).
|
|
186
|
+
It is recommended to read the [Vue 3 migration guide](https://v3-migration.vuejs.org) and in particular the [breaking changes list](https://v3-migration.vuejs.org/breaking-changes/).
|
|
187
187
|
|
|
188
188
|
It is not currently possible to use the [Vue 3 migration build](https://v3-migration.vuejs.org/migration-build.html) with Nuxt 3.
|
|
189
189
|
|
|
@@ -227,7 +227,7 @@ export const useMainStore = defineStore('main', {
|
|
|
227
227
|
})
|
|
228
228
|
```
|
|
229
229
|
|
|
230
|
-
Create a [plugin](/docs/4.x/guide/directory-structure/plugins) file to globalize your store:
|
|
230
|
+
Create a [plugin](/docs/4.x/guide/directory-structure/app/plugins) file to globalize your store:
|
|
231
231
|
|
|
232
232
|
```ts [app/plugins/pinia.ts]
|
|
233
233
|
import { useMainStore } from '~/store'
|
|
@@ -17,7 +17,7 @@ Explore Nuxt 3 compatible modules.
|
|
|
17
17
|
|
|
18
18
|
Nuxt 3 plugins are **not** fully backward compatible with Nuxt 2.
|
|
19
19
|
|
|
20
|
-
:read-more{to="/docs/4.x/guide/directory-structure/plugins"}
|
|
20
|
+
:read-more{to="/docs/4.x/guide/directory-structure/app/plugins"}
|
|
21
21
|
|
|
22
22
|
### Vue Compatibility
|
|
23
23
|
|
|
@@ -31,7 +31,7 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|
|
31
31
|
|
|
32
32
|
::
|
|
33
33
|
|
|
34
|
-
:read-more{to="/docs/4.x/guide/directory-structure/plugins"}
|
|
34
|
+
:read-more{to="/docs/4.x/guide/directory-structure/app/plugins"}
|
|
35
35
|
|
|
36
36
|
::read-more{to="/docs/4.x/api/composables/use-nuxt-app"}
|
|
37
37
|
Read more about the format of `nuxtApp`.
|
|
@@ -13,13 +13,13 @@ If you don't have an `app.vue` file in your source directory, Nuxt will use its
|
|
|
13
13
|
|
|
14
14
|
This file is a great place to put any custom code that needs to be run once when your app starts up, as well as any components that are present on every page of your app. For example, if you only have one layout, you can move this to `app.vue` instead.
|
|
15
15
|
|
|
16
|
-
:read-more{to="/docs/4.x/guide/directory-structure/app"}
|
|
16
|
+
:read-more{to="/docs/4.x/guide/directory-structure/app/app"}
|
|
17
17
|
|
|
18
18
|
:link-example{to="/docs/4.x/examples/hello-world"}
|
|
19
19
|
|
|
20
20
|
### Migration
|
|
21
21
|
|
|
22
|
-
Consider creating an `app.vue` file and including any logic that needs to run once at the top-level of your app. You can check out [an example here](/docs/4.x/guide/directory-structure/app).
|
|
22
|
+
Consider creating an `app.vue` file and including any logic that needs to run once at the top-level of your app. You can check out [an example here](/docs/4.x/guide/directory-structure/app/app).
|
|
23
23
|
|
|
24
24
|
## Layouts
|
|
25
25
|
|
package/README.md
CHANGED