@nuxt/docs 3.20.2 → 3.21.0
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 +4 -4
- package/1.getting-started/02.installation.md +4 -7
- package/1.getting-started/03.configuration.md +29 -29
- package/1.getting-started/04.views.md +6 -4
- package/1.getting-started/05.assets.md +2 -2
- package/1.getting-started/06.styling.md +22 -16
- package/1.getting-started/07.routing.md +6 -6
- package/1.getting-started/08.seo-meta.md +8 -4
- package/1.getting-started/09.transitions.md +6 -6
- package/1.getting-started/10.data-fetching.md +18 -18
- package/1.getting-started/11.state-management.md +5 -5
- package/1.getting-started/12.error-handling.md +25 -19
- package/1.getting-started/13.server.md +9 -9
- package/1.getting-started/14.layers.md +49 -15
- package/1.getting-started/15.prerendering.md +10 -4
- package/1.getting-started/16.deployment.md +2 -1
- package/1.getting-started/17.testing.md +17 -7
- package/1.getting-started/18.upgrade.md +111 -60
- package/2.directory-structure/0.output.md +1 -1
- package/2.directory-structure/1.assets.md +1 -1
- package/2.directory-structure/1.components.md +12 -8
- package/2.directory-structure/1.composables.md +2 -2
- package/2.directory-structure/1.content.md +1 -1
- package/2.directory-structure/1.layers.md +87 -0
- package/2.directory-structure/1.layouts.md +35 -3
- package/2.directory-structure/1.middleware.md +7 -7
- package/2.directory-structure/1.modules.md +8 -2
- package/2.directory-structure/1.node_modules.md +1 -1
- package/2.directory-structure/1.pages.md +39 -18
- package/2.directory-structure/1.plugins.md +4 -1
- package/2.directory-structure/1.public.md +1 -1
- package/2.directory-structure/1.server.md +28 -8
- package/2.directory-structure/1.shared.md +3 -3
- package/2.directory-structure/1.utils.md +2 -2
- package/2.directory-structure/2.env.md +3 -3
- package/2.directory-structure/2.nuxtignore.md +1 -0
- package/2.directory-structure/2.nuxtrc.md +5 -2
- package/2.directory-structure/3.app-config.md +2 -2
- package/2.directory-structure/3.app.md +3 -3
- package/2.directory-structure/3.error.md +9 -5
- package/2.directory-structure/3.nuxt-config.md +1 -1
- package/2.directory-structure/3.package.md +1 -1
- package/2.directory-structure/3.tsconfig.md +3 -2
- package/2.directory-structure/index.md +12 -8
- package/3.guide/0.index.md +8 -2
- package/3.guide/1.concepts/{3.rendering.md → 1.rendering.md} +7 -32
- package/3.guide/1.concepts/{2.vuejs-development.md → 10.vuejs-development.md} +9 -8
- package/3.guide/1.concepts/{10.nuxt-lifecycle.md → 2.nuxt-lifecycle.md} +31 -24
- package/3.guide/1.concepts/{1.auto-imports.md → 3.auto-imports.md} +6 -6
- package/3.guide/1.concepts/4.server-engine.md +2 -2
- package/3.guide/1.concepts/5.modules.md +14 -1
- package/3.guide/1.concepts/7.esm.md +5 -4
- package/3.guide/1.concepts/8.typescript.md +9 -15
- package/3.guide/1.concepts/9.code-style.md +1 -1
- package/3.guide/2.best-practices/hydration.md +1 -1
- package/3.guide/2.best-practices/performance.md +5 -5
- package/3.guide/3.ai/.navigation.yml +3 -0
- package/3.guide/3.ai/1.mcp.md +277 -0
- package/3.guide/3.ai/2.llms-txt.md +65 -0
- package/3.guide/4.modules/.navigation.yml +3 -0
- package/3.guide/4.modules/1.getting-started.md +103 -0
- package/3.guide/4.modules/2.module-anatomy.md +138 -0
- package/3.guide/4.modules/3.recipes-basics.md +330 -0
- package/3.guide/4.modules/4.recipes-advanced.md +243 -0
- package/3.guide/4.modules/5.testing.md +76 -0
- package/3.guide/4.modules/6.best-practices.md +104 -0
- package/3.guide/4.modules/7.ecosystem.md +32 -0
- package/3.guide/4.modules/index.md +36 -0
- package/3.guide/{3.recipes → 5.recipes}/1.custom-routing.md +3 -3
- package/3.guide/{3.recipes → 5.recipes}/2.vite-plugin.md +4 -0
- package/3.guide/{3.recipes → 5.recipes}/3.custom-usefetch.md +2 -2
- package/3.guide/{3.recipes → 5.recipes}/4.sessions-and-authentication.md +2 -2
- package/3.guide/{4.going-further → 6.going-further}/1.events.md +3 -4
- package/3.guide/{4.going-further → 6.going-further}/1.experimental-features.md +211 -86
- package/3.guide/6.going-further/1.features.md +108 -0
- package/3.guide/{4.going-further → 6.going-further}/1.internals.md +4 -3
- package/3.guide/{4.going-further → 6.going-further}/10.runtime-config.md +2 -2
- package/3.guide/{4.going-further → 6.going-further}/11.nightly-release-channel.md +1 -1
- package/3.guide/{4.going-further → 6.going-further}/2.hooks.md +5 -5
- package/3.guide/{4.going-further → 6.going-further}/4.kit.md +3 -3
- package/3.guide/{4.going-further → 6.going-further}/6.nuxt-app.md +6 -6
- package/3.guide/{4.going-further → 6.going-further}/7.layers.md +31 -5
- package/3.guide/{4.going-further → 6.going-further}/9.debugging.md +3 -2
- package/4.api/1.components/1.nuxt-client-fallback.md +5 -1
- package/4.api/1.components/10.nuxt-picture.md +1 -1
- package/4.api/1.components/11.teleports.md +2 -2
- package/4.api/1.components/12.nuxt-route-announcer.md +0 -2
- package/4.api/1.components/13.nuxt-time.md +0 -2
- package/4.api/1.components/2.nuxt-page.md +3 -3
- package/4.api/1.components/3.nuxt-layout.md +6 -6
- package/4.api/1.components/4.nuxt-link.md +13 -13
- package/4.api/1.components/5.nuxt-loading-indicator.md +1 -1
- package/4.api/1.components/6.nuxt-error-boundary.md +2 -2
- package/4.api/1.components/7.nuxt-welcome.md +2 -2
- package/4.api/1.components/8.nuxt-island.md +9 -2
- package/4.api/2.composables/use-app-config.md +1 -1
- package/4.api/2.composables/use-async-data.md +5 -5
- package/4.api/2.composables/use-cookie.md +16 -16
- package/4.api/2.composables/use-error.md +3 -3
- package/4.api/2.composables/use-fetch.md +37 -37
- package/4.api/2.composables/use-head-safe.md +1 -1
- package/4.api/2.composables/use-head.md +22 -7
- package/4.api/2.composables/use-lazy-async-data.md +1 -1
- package/4.api/2.composables/use-lazy-fetch.md +9 -9
- package/4.api/2.composables/use-nuxt-app.md +9 -7
- package/4.api/2.composables/use-route-announcer.md +0 -2
- package/4.api/2.composables/use-route.md +2 -2
- package/4.api/2.composables/use-router.md +15 -15
- package/4.api/2.composables/use-runtime-config.md +5 -5
- package/4.api/2.composables/use-seo-meta.md +2 -2
- package/4.api/2.composables/use-server-seo-meta.md +2 -2
- package/4.api/2.composables/use-state.md +12 -2
- package/4.api/3.utils/$fetch.md +1 -1
- package/4.api/3.utils/abort-navigation.md +2 -2
- package/4.api/3.utils/call-once.md +2 -4
- package/4.api/3.utils/clear-error.md +1 -1
- package/4.api/3.utils/create-error.md +7 -7
- package/4.api/3.utils/define-lazy-hydration-component.md +5 -5
- package/4.api/3.utils/define-nuxt-component.md +1 -1
- package/4.api/3.utils/define-nuxt-plugin.md +12 -12
- package/4.api/3.utils/define-nuxt-route-middleware.md +2 -2
- package/4.api/3.utils/define-page-meta.md +18 -11
- package/4.api/3.utils/define-route-rules.md +2 -2
- package/4.api/3.utils/navigate-to.md +14 -14
- package/4.api/3.utils/on-before-route-leave.md +1 -1
- package/4.api/3.utils/on-before-route-update.md +1 -1
- package/4.api/3.utils/preload-route-components.md +2 -2
- package/4.api/3.utils/refresh-cookie.md +0 -2
- package/4.api/3.utils/refresh-nuxt-data.md +1 -1
- package/4.api/3.utils/reload-nuxt-app.md +1 -1
- package/4.api/3.utils/set-page-layout.md +36 -0
- package/4.api/3.utils/set-response-status.md +3 -3
- package/4.api/3.utils/show-error.md +4 -4
- package/4.api/3.utils/update-app-config.md +1 -1
- package/4.api/4.commands/add.md +11 -11
- package/4.api/4.commands/analyze.md +11 -11
- package/4.api/4.commands/build-module.md +11 -11
- package/4.api/4.commands/build.md +12 -12
- package/4.api/4.commands/cleanup.md +6 -6
- package/4.api/4.commands/dev.md +23 -23
- package/4.api/4.commands/devtools.md +7 -7
- package/4.api/4.commands/generate.md +12 -12
- package/4.api/4.commands/info.md +6 -6
- package/4.api/4.commands/init.md +18 -18
- package/4.api/4.commands/module.md +18 -18
- package/4.api/4.commands/prepare.md +10 -10
- package/4.api/4.commands/preview.md +11 -11
- package/4.api/4.commands/test.md +9 -9
- package/4.api/4.commands/typecheck.md +10 -10
- package/4.api/4.commands/upgrade.md +10 -10
- package/4.api/5.kit/1.modules.md +31 -18
- package/4.api/5.kit/10.templates.md +23 -23
- package/4.api/5.kit/11.nitro.md +36 -36
- package/4.api/5.kit/12.resolving.md +2 -2
- package/4.api/5.kit/14.builder.md +35 -23
- package/4.api/5.kit/16.layers.md +16 -16
- package/4.api/5.kit/2.programmatic.md +2 -2
- package/4.api/5.kit/3.compatibility.md +2 -2
- package/4.api/5.kit/4.autoimports.md +18 -18
- package/4.api/5.kit/5.components.md +35 -35
- package/4.api/5.kit/6.context.md +1 -1
- package/4.api/5.kit/8.layout.md +1 -1
- package/4.api/6.advanced/1.hooks.md +85 -85
- package/4.api/index.md +7 -7
- package/5.community/4.contribution.md +10 -10
- package/5.community/5.framework-contribution.md +9 -9
- package/5.community/6.roadmap.md +25 -25
- package/5.community/7.changelog.md +10 -0
- package/6.bridge/1.overview.md +8 -0
- package/6.bridge/3.bridge-composition-api.md +2 -2
- package/6.bridge/4.plugins-and-middleware.md +2 -2
- package/6.bridge/5.nuxt3-compatible-api.md +1 -1
- package/6.bridge/8.nitro.md +4 -0
- package/7.migration/10.bundling.md +1 -1
- package/7.migration/11.server.md +3 -3
- package/7.migration/2.configuration.md +5 -5
- package/7.migration/20.module-authors.md +3 -3
- package/7.migration/4.meta.md +1 -1
- package/7.migration/5.plugins-and-middleware.md +3 -3
- package/7.migration/6.pages-and-layouts.md +5 -5
- package/7.migration/7.component-options.md +6 -6
- package/7.migration/8.runtime-config.md +1 -1
- package/package.json +1 -1
- package/3.guide/4.going-further/1.features.md +0 -103
- package/3.guide/4.going-further/3.modules.md +0 -901
- /package/3.guide/{3.recipes → 5.recipes}/.navigation.yml +0 -0
- /package/3.guide/{4.going-further → 6.going-further}/.navigation.yml +0 -0
- /package/3.guide/{4.going-further → 6.going-further}/index.md +0 -0
package/5.community/6.roadmap.md
CHANGED
|
@@ -28,22 +28,22 @@ In roadmap below are some features we are planning or working on at the moment.
|
|
|
28
28
|
Check [Discussions](https://github.com/nuxt/nuxt/discussions) and [RFCs](https://github.com/nuxt/nuxt/discussions/categories/rfcs) for more upcoming features and ideas.
|
|
29
29
|
::
|
|
30
30
|
|
|
31
|
-
Milestone | Expected date | Notes
|
|
32
|
-
|
|
33
|
-
SEO & PWA | 2025 | [nuxt/nuxt#18395](https://github.com/nuxt/nuxt/discussions/18395)
|
|
34
|
-
Assets | 2025 | [nuxt/nuxt#22012](https://github.com/nuxt/nuxt/discussions/22012)
|
|
35
|
-
Translations | - | [nuxt/
|
|
31
|
+
| Milestone | Expected date | Notes | Description |
|
|
32
|
+
|--------------|---------------|--------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|
|
|
33
|
+
| SEO & PWA | 2025 | [nuxt/nuxt#18395](https://github.com/nuxt/nuxt/discussions/18395) | Migrating from [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) for built-in SEO utils and service worker support |
|
|
34
|
+
| Assets | 2025 | [nuxt/nuxt#22012](https://github.com/nuxt/nuxt/discussions/22012) | Allow developers and modules to handle loading third-party assets. |
|
|
35
|
+
| 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
|
|
|
39
39
|
In addition to the Nuxt framework, there are modules that are vital for the ecosystem. Their status will be updated below.
|
|
40
40
|
|
|
41
|
-
Module | Status
|
|
42
|
-
|
|
43
|
-
[Scripts](https://scripts.nuxt.com) | Public Beta
|
|
44
|
-
Auth Utils | Planned
|
|
45
|
-
|
|
46
|
-
[Hints](https://github.com/nuxt/hints) | Public Alpha
|
|
41
|
+
| Module | Status | Nuxt Support | Repository | Description |
|
|
42
|
+
|----------------------------------------|--------------|--------------|-------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
43
|
+
| [Scripts](https://scripts.nuxt.com) | Public Beta | 3.x, 4.x | [nuxt/scripts](https://github.com/nuxt/scripts) | Easy 3rd party script management. |
|
|
44
|
+
| Auth Utils | Planned | 4.x, 5.x | `nuxt/auth-utils` to be announced | The temporary repository [atinux/nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils) is available while awaiting its official integration into Nuxt via RFC. |
|
|
45
|
+
| [a11y](https://github.com/nuxt/a11y) | Public Alpha | 3.x, 4.x | [nuxt/a11y](https://github.com/nuxt/a11y). | Real-time accessibility feedback and automated testing in your browser during development (see [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255)). |
|
|
46
|
+
| [Hints](https://github.com/nuxt/hints) | Public Alpha | 4.x, 5.x | [nuxt/hints](https://github.com/nuxt/hints) | Guidance and suggestions for enhancing development practices. |
|
|
47
47
|
|
|
48
48
|
## Release Cycle
|
|
49
49
|
|
|
@@ -65,20 +65,20 @@ Nuxt 3 will continue to receive maintenance updates (both bug fixes and backport
|
|
|
65
65
|
|
|
66
66
|
Each active version has its own nightly releases which are generated automatically. For more about enabling the Nuxt nightly release channel, see [the nightly release channel docs](/docs/3.x/guide/going-further/nightly-release-channel).
|
|
67
67
|
|
|
68
|
-
Release
|
|
69
|
-
|
|
70
|
-
**5.x** (scheduled)
|
|
71
|
-
**4.x** (stable)
|
|
72
|
-
**3.x** (maintenance)
|
|
73
|
-
**2.x** (unsupported)
|
|
74
|
-
**1.x** (unsupported)
|
|
68
|
+
| Release | | Initial release | End Of Life | Docs |
|
|
69
|
+
|-----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------|----------------------------|-------------------------------------------------------------------|
|
|
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://img.shields.io/npm/v/nuxt.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2025-07-16 | 6 months after 5.x release | [nuxt.com](/docs/3.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://img.shields.io/npm/v/nuxt/3x.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></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://img.shields.io/npm/v/nuxt/2x.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2018-09-21 | 2024-06-30 | [v2.nuxt.com](https://v2.nuxt.com/docs/get-started/installation/) |
|
|
74
|
+
| **1.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 1.x version" src="https://img.shields.io/npm/v/nuxt/1x.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2018-01-08 | 2019-09-21 | |
|
|
75
75
|
|
|
76
76
|
### Support Status
|
|
77
77
|
|
|
78
|
-
Status | Description
|
|
79
|
-
|
|
80
|
-
Unsupported | This version is not maintained any more and will not receive security patches
|
|
81
|
-
Maintenance | This version will only receive security patches
|
|
82
|
-
Stable | This version is being developed for and will receive security patches
|
|
83
|
-
Development | This version could be unstable
|
|
84
|
-
Scheduled | This version does not exist yet but is planned
|
|
78
|
+
| Status | Description |
|
|
79
|
+
|-------------|-------------------------------------------------------------------------------|
|
|
80
|
+
| Unsupported | This version is not maintained any more and will not receive security patches |
|
|
81
|
+
| Maintenance | This version will only receive security patches |
|
|
82
|
+
| Stable | This version is being developed for and will receive security patches |
|
|
83
|
+
| Development | This version could be unstable |
|
|
84
|
+
| Scheduled | This version does not exist yet but is planned |
|
|
@@ -28,6 +28,16 @@ navigation.icon: i-lucide-bell-dot
|
|
|
28
28
|
::card
|
|
29
29
|
---
|
|
30
30
|
icon: i-simple-icons-github
|
|
31
|
+
title: nuxt/a11y
|
|
32
|
+
to: https://github.com/nuxt/a11y/releases
|
|
33
|
+
target: _blank
|
|
34
|
+
ui.icon.base: text-black dark:text-white
|
|
35
|
+
---
|
|
36
|
+
Nuxt A11y releases.
|
|
37
|
+
::
|
|
38
|
+
::card
|
|
39
|
+
---
|
|
40
|
+
icon: i-simple-icons-github
|
|
31
41
|
title: nuxt/content
|
|
32
42
|
to: https://github.com/nuxt/content/releases
|
|
33
43
|
target: _blank
|
package/6.bridge/1.overview.md
CHANGED
|
@@ -46,6 +46,10 @@ pnpm install
|
|
|
46
46
|
bun install
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
+
```bash [deno]
|
|
50
|
+
deno install
|
|
51
|
+
```
|
|
52
|
+
|
|
49
53
|
::
|
|
50
54
|
|
|
51
55
|
::note
|
|
@@ -74,6 +78,10 @@ pnpm add -D @nuxt/bridge nuxi
|
|
|
74
78
|
bun add -D @nuxt/bridge nuxi
|
|
75
79
|
```
|
|
76
80
|
|
|
81
|
+
```bash [deno]
|
|
82
|
+
deno add -D npm:@nuxt/bridge npm:nuxi
|
|
83
|
+
```
|
|
84
|
+
|
|
77
85
|
::
|
|
78
86
|
|
|
79
87
|
### Update `nuxt.config`
|
|
@@ -91,7 +91,7 @@ export default <Middleware> function (ctx) { }
|
|
|
91
91
|
|
|
92
92
|
This was a type-helper stub function that is now removed.
|
|
93
93
|
|
|
94
|
-
You may also keep using Nuxt 2-style plugins, by removing the function (as with [defineNuxtMiddleware](#definenuxtmiddleware)).
|
|
94
|
+
You may also keep using Nuxt 2-style plugins, by removing the function (as with [defineNuxtMiddleware](/docs/3.x/bridge/bridge-composition-api#definenuxtmiddleware)).
|
|
95
95
|
|
|
96
96
|
Remove the `defineNuxtPlugin` wrapper:
|
|
97
97
|
|
|
@@ -113,7 +113,7 @@ export default <Plugin> function (ctx, inject) {}
|
|
|
113
113
|
While this example is valid, Nuxt 3 introduces a new defineNuxtPlugin function that has a slightly different signature.
|
|
114
114
|
::
|
|
115
115
|
|
|
116
|
-
:ReadMore{link="/docs/
|
|
116
|
+
:ReadMore{link="/docs/3.x/directory-structure/plugins#creating-plugins"}
|
|
117
117
|
|
|
118
118
|
### `useRouter` and `useRoute`
|
|
119
119
|
|
|
@@ -39,14 +39,14 @@ export default defineNuxtRouteMiddleware((to) => {
|
|
|
39
39
|
```
|
|
40
40
|
|
|
41
41
|
::important
|
|
42
|
-
Use of `defineNuxtRouteMiddleware` is not supported outside of the middleware directory.
|
|
42
|
+
Use of `defineNuxtRouteMiddleware` is not supported outside of the `middleware` directory.
|
|
43
43
|
::
|
|
44
44
|
|
|
45
45
|
## definePageMeta
|
|
46
46
|
|
|
47
47
|
You can also use [`definePageMeta`](/docs/3.x/api/utils/define-page-meta) in Nuxt Bridge.
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
It can be enabled with the `macros.pageMeta` option in your configuration file
|
|
50
50
|
|
|
51
51
|
```ts [nuxt.config.ts]
|
|
52
52
|
import { defineNuxtConfig } from '@nuxt/bridge'
|
|
@@ -204,4 +204,4 @@ export default defineNuxtConfig({
|
|
|
204
204
|
})
|
|
205
205
|
```
|
|
206
206
|
|
|
207
|
-
This will disable auto-imports completely but it's still possible to use [explicit imports](#explicit-imports) from `#imports`.
|
|
207
|
+
This will disable auto-imports completely but it's still possible to use [explicit imports](/docs/3.x/bridge/nuxt3-compatible-api#explicit-imports) from `#imports`.
|
package/6.bridge/8.nitro.md
CHANGED
|
@@ -16,7 +16,7 @@ If you need to configure any of Nuxt's build tools, you can do so in your `nuxt.
|
|
|
16
16
|
|
|
17
17
|
In addition, Nuxt ships with TypeScript support.
|
|
18
18
|
|
|
19
|
-
:read-more{to="/docs/guide/concepts/typescript"}
|
|
19
|
+
:read-more{to="/docs/3.x/guide/concepts/typescript"}
|
|
20
20
|
|
|
21
21
|
## Steps
|
|
22
22
|
|
package/7.migration/11.server.md
CHANGED
|
@@ -5,7 +5,7 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 server.'
|
|
|
5
5
|
|
|
6
6
|
In a built Nuxt 3 application, there is no runtime Nuxt dependency. That means your site will be highly performant, and ultra-slim. But it also means you can no longer hook into runtime Nuxt server hooks.
|
|
7
7
|
|
|
8
|
-
:read-more{to="/docs/guide/concepts/server-engine"}
|
|
8
|
+
:read-more{to="/docs/3.x/guide/concepts/server-engine"}
|
|
9
9
|
|
|
10
10
|
## Steps
|
|
11
11
|
|
|
@@ -13,5 +13,5 @@ In a built Nuxt 3 application, there is no runtime Nuxt dependency. That means y
|
|
|
13
13
|
2. Any files in `~/server/api` and `~/server/middleware` will be automatically registered; you can remove them from your `serverMiddleware` array.
|
|
14
14
|
3. Update any other items in your `serverMiddleware` array to point to files or npm packages directly, rather than using inline functions.
|
|
15
15
|
|
|
16
|
-
:read-more{to="/docs/
|
|
17
|
-
:read-more{to="/docs/guide/going-further/hooks#server-hooks-runtime"}
|
|
16
|
+
:read-more{to="/docs/3.x/directory-structure/server"}
|
|
17
|
+
:read-more{to="/docs/3.x/guide/going-further/hooks#server-hooks-runtime"}
|
|
@@ -115,7 +115,7 @@ Nuxt has built-in support for loading `.env` files. Avoid directly importing it
|
|
|
115
115
|
|
|
116
116
|
## Modules
|
|
117
117
|
|
|
118
|
-
Nuxt and Nuxt
|
|
118
|
+
Nuxt and Nuxt modules are now build-time-only.
|
|
119
119
|
|
|
120
120
|
### Migration
|
|
121
121
|
|
|
@@ -133,14 +133,14 @@ Nuxt and Nuxt Modules are now build-time-only.
|
|
|
133
133
|
```
|
|
134
134
|
|
|
135
135
|
::tip
|
|
136
|
-
If you are a module author, you can check out [more information about module compatibility](/docs/3.x/migration/module-authors) and [our module author guide](/docs/3.x/guide/
|
|
136
|
+
If you are a module author, you can check out [more information about module compatibility](/docs/3.x/migration/module-authors) and [our module author guide](/docs/3.x/guide/modules).
|
|
137
137
|
::
|
|
138
138
|
|
|
139
139
|
## Directory Changes
|
|
140
140
|
|
|
141
141
|
The `static/` (for storing static assets) has been renamed to `public/`. You can either rename your `static` directory to `public`, or keep the name by setting `dir.public` in your `nuxt.config`.
|
|
142
142
|
|
|
143
|
-
:read-more{to="/docs/
|
|
143
|
+
:read-more{to="/docs/3.x/directory-structure/public"}
|
|
144
144
|
|
|
145
145
|
## TypeScript
|
|
146
146
|
|
|
@@ -163,13 +163,13 @@ Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language
|
|
|
163
163
|
```
|
|
164
164
|
|
|
165
165
|
1. Run `npx nuxt prepare` to generate `.nuxt/tsconfig.json`.
|
|
166
|
-
1. Install Volar following the instructions in the [docs](/docs/3.x/getting-started/
|
|
166
|
+
1. Install Volar following the instructions in the [docs](/docs/3.x/getting-started/installation#prerequisites).
|
|
167
167
|
|
|
168
168
|
## Vue Changes
|
|
169
169
|
|
|
170
170
|
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.
|
|
171
171
|
|
|
172
|
-
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).
|
|
172
|
+
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/).
|
|
173
173
|
|
|
174
174
|
It is not currently possible to use the [Vue 3 migration build](https://v3-migration.vuejs.org/migration-build.html) with Nuxt 3.
|
|
175
175
|
|
|
@@ -7,7 +7,7 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 modules.'
|
|
|
7
7
|
|
|
8
8
|
Nuxt 3 has a basic backward compatibility layer for Nuxt 2 modules using `@nuxt/kit` auto wrappers. But there are usually steps to follow to make modules compatible with Nuxt 3 and sometimes, using Nuxt Bridge is required for cross-version compatibility.
|
|
9
9
|
|
|
10
|
-
We have prepared a [Dedicated Guide](/docs/3.x/guide/
|
|
10
|
+
We have prepared a [Dedicated Guide](/docs/3.x/guide/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatible with Nuxt 3.
|
|
11
11
|
|
|
12
12
|
::tip{icon="i-lucide-puzzle" to="/modules"}
|
|
13
13
|
Explore Nuxt 3 compatible modules.
|
|
@@ -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/
|
|
20
|
+
:read-more{to="/docs/3.x/directory-structure/plugins"}
|
|
21
21
|
|
|
22
22
|
### Vue Compatibility
|
|
23
23
|
|
|
@@ -78,7 +78,7 @@ Your module should work even if it's only added to [`buildModules`](/docs/3.x/ap
|
|
|
78
78
|
(*) Unless it is for `nuxt dev` purpose only and guarded with `if (nuxt.options.dev) { }`.
|
|
79
79
|
|
|
80
80
|
::tip
|
|
81
|
-
Continue reading about Nuxt 3 modules in the [Modules Author Guide](/docs/3.x/guide/
|
|
81
|
+
Continue reading about Nuxt 3 modules in the [Modules Author Guide](/docs/3.x/guide/modules).
|
|
82
82
|
::
|
|
83
83
|
|
|
84
84
|
### Use TypeScript (Optional)
|
package/7.migration/4.meta.md
CHANGED
|
@@ -14,7 +14,7 @@ You can customize `title`, `titleTemplate`, `base`, `script`, `noscript`, `style
|
|
|
14
14
|
Nuxt currently uses [`Unhead`](https://github.com/unjs/unhead) to manage your meta tags, but implementation details may change.
|
|
15
15
|
::
|
|
16
16
|
|
|
17
|
-
:read-more{to="/docs/getting-started/seo-meta"}
|
|
17
|
+
:read-more{to="/docs/3.x/getting-started/seo-meta"}
|
|
18
18
|
|
|
19
19
|
## Migration
|
|
20
20
|
|
|
@@ -31,9 +31,9 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|
|
31
31
|
|
|
32
32
|
::
|
|
33
33
|
|
|
34
|
-
:read-more{to="/docs/
|
|
34
|
+
:read-more{to="/docs/3.x/directory-structure/plugins"}
|
|
35
35
|
|
|
36
|
-
::read-more{to="/docs/api/composables/use-nuxt-app"}
|
|
36
|
+
::read-more{to="/docs/3.x/api/composables/use-nuxt-app"}
|
|
37
37
|
Read more about the format of `nuxtApp`.
|
|
38
38
|
::
|
|
39
39
|
|
|
@@ -72,7 +72,7 @@ Much like Nuxt 2, route middleware placed in your `~/middleware` folder is autom
|
|
|
72
72
|
|
|
73
73
|
`navigateTo` is one of a number of route helper functions.
|
|
74
74
|
|
|
75
|
-
:read-more{to="/docs/
|
|
75
|
+
:read-more{to="/docs/3.x/directory-structure/middleware"}
|
|
76
76
|
|
|
77
77
|
### Migration
|
|
78
78
|
|
|
@@ -13,9 +13,9 @@ 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/
|
|
16
|
+
:read-more{to="/docs/3.x/directory-structure/app"}
|
|
17
17
|
|
|
18
|
-
:link-example{to="/docs/examples/hello-world"}
|
|
18
|
+
:link-example{to="/docs/3.x/examples/hello-world"}
|
|
19
19
|
|
|
20
20
|
### Migration
|
|
21
21
|
|
|
@@ -84,13 +84,13 @@ In Nuxt 2, you will have defined any nested routes (with parent and child compon
|
|
|
84
84
|
|
|
85
85
|
If you were passing a custom page key or keep-alive props to `<Nuxt>`, you will now use `definePageMeta` to set these options.
|
|
86
86
|
|
|
87
|
-
:read-more{to="/docs/
|
|
87
|
+
:read-more{to="/docs/3.x/directory-structure/pages#special-metadata"}
|
|
88
88
|
|
|
89
89
|
### Page and Layout Transitions
|
|
90
90
|
|
|
91
91
|
If you have been defining transitions for your page or layout directly in your component options, you will now need to use `definePageMeta` to set the transition. Since Vue 3, [-enter and -leave CSS classes have been renamed](https://v3-migration.vuejs.org/breaking-changes/transition.html). The `style` prop from `<Nuxt>` no longer applies to transition when used on `<slot>`, so move the styles to your `-active` class.
|
|
92
92
|
|
|
93
|
-
:read-more{to="/docs/getting-started/transitions"}
|
|
93
|
+
:read-more{to="/docs/3.x/getting-started/transitions"}
|
|
94
94
|
|
|
95
95
|
### Migration
|
|
96
96
|
|
|
@@ -190,7 +190,7 @@ Most of the syntax and functionality are the same for the global [NuxtLink](/doc
|
|
|
190
190
|
|
|
191
191
|
`<NuxtLink>` is now a drop-in replacement for _all_ links, even external ones. You can read more about it, and how to extend it to provide your own link component.
|
|
192
192
|
|
|
193
|
-
:read-more{to="/docs/api/components/nuxt-link"}
|
|
193
|
+
:read-more{to="/docs/3.x/api/components/nuxt-link"}
|
|
194
194
|
|
|
195
195
|
## Programmatic Navigation
|
|
196
196
|
|
|
@@ -67,7 +67,7 @@ Despite the names, [`useFetch`](/docs/3.x/api/composables/use-fetch) is not a di
|
|
|
67
67
|
|
|
68
68
|
## `head`
|
|
69
69
|
|
|
70
|
-
:read-more{to="/docs/migration/meta"}
|
|
70
|
+
:read-more{to="/docs/3.x/migration/meta"}
|
|
71
71
|
|
|
72
72
|
## `key`
|
|
73
73
|
|
|
@@ -91,7 +91,7 @@ You can now define a key within the [`definePageMeta`](/docs/3.x/api/utils/defin
|
|
|
91
91
|
|
|
92
92
|
## `layout`
|
|
93
93
|
|
|
94
|
-
:read-more{to="/docs/migration/pages-and-layouts"}
|
|
94
|
+
:read-more{to="/docs/3.x/migration/pages-and-layouts"}
|
|
95
95
|
|
|
96
96
|
## `loading`
|
|
97
97
|
|
|
@@ -99,11 +99,11 @@ This feature is not yet supported in Nuxt 3.
|
|
|
99
99
|
|
|
100
100
|
## `middleware`
|
|
101
101
|
|
|
102
|
-
:read-more{to="/docs/migration/plugins-and-middleware"}
|
|
102
|
+
:read-more{to="/docs/3.x/migration/plugins-and-middleware"}
|
|
103
103
|
|
|
104
104
|
## `scrollToTop`
|
|
105
105
|
|
|
106
|
-
This feature is not yet supported in Nuxt 3. If you want to overwrite the default scroll behavior of `vue-router`, you can do so in `~/app/router.options.ts` (see [docs](/docs/3.x/guide/recipes/custom-routing#router-options)) for more info.
|
|
106
|
+
This feature is not yet supported in Nuxt 3. If you want to overwrite the default scroll behavior of `vue-router`, you can do so in an `~/app/router.options.ts` (see [docs](/docs/3.x/guide/recipes/custom-routing#router-options)) for more info.
|
|
107
107
|
Similar to `key`, specify it within the [`definePageMeta`](/docs/3.x/api/utils/define-page-meta) compiler macro.
|
|
108
108
|
|
|
109
109
|
```diff [pages/index.vue]
|
|
@@ -120,11 +120,11 @@ Similar to `key`, specify it within the [`definePageMeta`](/docs/3.x/api/utils/d
|
|
|
120
120
|
|
|
121
121
|
## `transition`
|
|
122
122
|
|
|
123
|
-
:read-more{to="/docs/getting-started/transitions"}
|
|
123
|
+
:read-more{to="/docs/3.x/getting-started/transitions"}
|
|
124
124
|
|
|
125
125
|
## `validate`
|
|
126
126
|
|
|
127
|
-
The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as in Nuxt 2, you can return a boolean value. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `
|
|
127
|
+
The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as in Nuxt 2, you can return a boolean value. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `status`/`statusText` to respond immediately with an error (other matches will not be checked).
|
|
128
128
|
|
|
129
129
|
```diff [pages/users/[id\\].vue]
|
|
130
130
|
- <script>
|
|
@@ -9,7 +9,7 @@ When referencing these variables within your components, you will have to use th
|
|
|
9
9
|
|
|
10
10
|
In the `server/` portion of your app, you can use [`useRuntimeConfig`](/docs/3.x/api/composables/use-runtime-config) without any import.
|
|
11
11
|
|
|
12
|
-
:read-more{to="/docs/guide/going-further/runtime-config"}
|
|
12
|
+
:read-more{to="/docs/3.x/guide/going-further/runtime-config"}
|
|
13
13
|
|
|
14
14
|
## Migration
|
|
15
15
|
|
package/package.json
CHANGED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: "Features"
|
|
3
|
-
description: "Enable or disable optional Nuxt features to unlock new possibilities."
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Some features of Nuxt are available on an opt-in basis, or can be disabled based on your needs.
|
|
7
|
-
|
|
8
|
-
## `features`
|
|
9
|
-
|
|
10
|
-
### inlineStyles
|
|
11
|
-
|
|
12
|
-
Inlines styles when rendering HTML. This is currently available only when using Vite.
|
|
13
|
-
|
|
14
|
-
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.
|
|
15
|
-
|
|
16
|
-
```ts [nuxt.config.ts]
|
|
17
|
-
export default defineNuxtConfig({
|
|
18
|
-
features: {
|
|
19
|
-
inlineStyles: false, // or a function to determine inlining
|
|
20
|
-
},
|
|
21
|
-
})
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
### noScripts
|
|
25
|
-
|
|
26
|
-
Disables rendering of Nuxt scripts and JS resource hints. Can also be configured granularly within `routeRules`.
|
|
27
|
-
|
|
28
|
-
```ts [nuxt.config.ts]
|
|
29
|
-
export default defineNuxtConfig({
|
|
30
|
-
features: {
|
|
31
|
-
noScripts: true,
|
|
32
|
-
},
|
|
33
|
-
})
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
## `future`
|
|
37
|
-
|
|
38
|
-
There is also a `future` namespace for early opting-in to new features that will become default in a future (possibly major) version of the framework.
|
|
39
|
-
|
|
40
|
-
### compatibilityVersion
|
|
41
|
-
|
|
42
|
-
::important
|
|
43
|
-
This configuration option is available in Nuxt v3.12+. Please note, that for now, you need to define the compatibility version in each layer that opts into Nuxt 4 behavior. This will not be required after Nuxt 4 is released.
|
|
44
|
-
::
|
|
45
|
-
|
|
46
|
-
This enables early access to Nuxt features or flags.
|
|
47
|
-
|
|
48
|
-
Setting `compatibilityVersion` to `4` changes defaults throughout your
|
|
49
|
-
Nuxt configuration to opt-in to Nuxt v4 behaviour, but you can granularly re-enable Nuxt v3 behaviour
|
|
50
|
-
when testing (see example). Please file issues if so, so that we can
|
|
51
|
-
address in Nuxt or in the ecosystem.
|
|
52
|
-
|
|
53
|
-
```ts
|
|
54
|
-
export default defineNuxtConfig({
|
|
55
|
-
future: {
|
|
56
|
-
compatibilityVersion: 4,
|
|
57
|
-
},
|
|
58
|
-
// To re-enable _all_ Nuxt v3 behaviour, set the following options:
|
|
59
|
-
srcDir: '.',
|
|
60
|
-
dir: {
|
|
61
|
-
app: 'app',
|
|
62
|
-
},
|
|
63
|
-
experimental: {
|
|
64
|
-
scanPageMeta: 'after-resolve',
|
|
65
|
-
sharedPrerenderData: false,
|
|
66
|
-
compileTemplate: true,
|
|
67
|
-
resetAsyncDataToUndefined: true,
|
|
68
|
-
templateUtils: true,
|
|
69
|
-
relativeWatchPaths: true,
|
|
70
|
-
normalizeComponentNames: false,
|
|
71
|
-
defaults: {
|
|
72
|
-
useAsyncData: {
|
|
73
|
-
deep: true,
|
|
74
|
-
},
|
|
75
|
-
},
|
|
76
|
-
},
|
|
77
|
-
features: {
|
|
78
|
-
inlineStyles: true,
|
|
79
|
-
},
|
|
80
|
-
unhead: {
|
|
81
|
-
renderSSRHeadOptions: {
|
|
82
|
-
omitLineBreaks: false,
|
|
83
|
-
},
|
|
84
|
-
},
|
|
85
|
-
})
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
### typescriptBundlerResolution
|
|
89
|
-
|
|
90
|
-
This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting
|
|
91
|
-
for frameworks like Nuxt and [Vite](https://vite.dev/guide/performance.html#reduce-resolve-operations).
|
|
92
|
-
|
|
93
|
-
It improves type support when using modern libraries with `exports`.
|
|
94
|
-
|
|
95
|
-
See [the original TypeScript pull request](https://github.com/microsoft/TypeScript/pull/51669).
|
|
96
|
-
|
|
97
|
-
```ts [nuxt.config.ts]
|
|
98
|
-
export default defineNuxtConfig({
|
|
99
|
-
future: {
|
|
100
|
-
typescriptBundlerResolution: true,
|
|
101
|
-
},
|
|
102
|
-
})
|
|
103
|
-
```
|