@nuxt/docs-nightly 4.5.1-29752449.30d24817 → 4.5.2-2610052030-052d82e
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 +8 -8
- package/1.getting-started/02.installation.md +2 -4
- package/1.getting-started/03.configuration.md +16 -16
- package/1.getting-started/04.views.md +8 -8
- package/1.getting-started/05.assets.md +10 -10
- package/1.getting-started/06.styling.md +10 -10
- package/1.getting-started/07.routing.md +15 -15
- package/1.getting-started/08.seo-meta.md +15 -15
- package/1.getting-started/09.transitions.md +10 -10
- package/1.getting-started/10.data-fetching.md +61 -47
- package/1.getting-started/11.state-management.md +11 -11
- package/1.getting-started/12.error-handling.md +20 -18
- package/1.getting-started/13.server.md +7 -7
- package/1.getting-started/14.layers.md +6 -6
- package/1.getting-started/15.prerendering.md +22 -28
- package/1.getting-started/16.deployment.md +22 -6
- package/1.getting-started/17.testing.md +200 -21
- package/1.getting-started/18.upgrade.md +78 -278
- package/2.directory-structure/0.nuxt.md +2 -2
- package/2.directory-structure/0.output.md +3 -3
- package/2.directory-structure/1.app/1.assets.md +3 -3
- package/2.directory-structure/1.app/1.components.md +26 -109
- package/2.directory-structure/1.app/1.composables.md +5 -5
- package/2.directory-structure/1.app/1.layouts.md +10 -10
- package/2.directory-structure/1.app/1.middleware.md +14 -10
- package/2.directory-structure/1.app/1.pages.md +25 -20
- package/2.directory-structure/1.app/1.plugins.md +7 -7
- package/2.directory-structure/1.app/1.utils.md +9 -5
- package/2.directory-structure/1.app/3.app-config.md +7 -7
- package/2.directory-structure/1.app/3.app.md +6 -6
- package/2.directory-structure/1.app/3.error.md +1 -1
- package/2.directory-structure/1.content.md +1 -1
- package/2.directory-structure/1.layers.md +13 -13
- package/2.directory-structure/1.modules.md +3 -3
- package/2.directory-structure/1.node_modules.md +1 -1
- package/2.directory-structure/1.server.md +33 -14
- package/2.directory-structure/1.shared.md +7 -5
- package/2.directory-structure/1.test.md +25 -0
- package/2.directory-structure/2.env.md +7 -7
- package/2.directory-structure/2.nuxtignore.md +3 -3
- package/2.directory-structure/2.nuxtrc.md +3 -3
- package/2.directory-structure/3.nuxt-config.md +2 -2
- package/2.directory-structure/3.tsconfig.md +21 -11
- package/2.directory-structure/index.md +29 -25
- package/3.guide/0.index.md +6 -6
- package/3.guide/1.concepts/1.rendering.md +76 -12
- package/3.guide/1.concepts/10.vuejs-development.md +73 -8
- package/3.guide/1.concepts/2.nuxt-lifecycle.md +18 -18
- package/3.guide/1.concepts/3.auto-imports.md +11 -11
- package/3.guide/1.concepts/4.server-engine.md +6 -6
- package/3.guide/1.concepts/5.modules.md +4 -4
- package/3.guide/1.concepts/6.server-components.md +198 -0
- package/3.guide/1.concepts/7.esm.md +5 -5
- package/3.guide/1.concepts/8.typescript.md +9 -9
- package/3.guide/2.best-practices/accessibility.md +155 -0
- package/3.guide/2.best-practices/hydration.md +5 -5
- package/3.guide/2.best-practices/performance.md +13 -9
- package/3.guide/3.ai/1.mcp.md +104 -19
- package/3.guide/4.modules/2.module-anatomy.md +5 -5
- package/3.guide/4.modules/3.recipes-basics.md +8 -8
- package/3.guide/4.modules/4.module-dependencies.md +1 -1
- package/3.guide/4.modules/5.recipes-advanced.md +6 -8
- package/3.guide/4.modules/6.testing.md +2 -2
- package/3.guide/4.modules/7.best-practices.md +2 -2
- package/3.guide/4.modules/9.server-compatibility.md +215 -0
- package/3.guide/4.modules/index.md +9 -9
- package/3.guide/5.recipes/1.custom-routing.md +15 -11
- package/3.guide/5.recipes/2.vite-plugin.md +3 -3
- package/3.guide/5.recipes/3.custom-usefetch.md +5 -5
- package/3.guide/5.recipes/4.sessions-and-authentication.md +2 -2
- package/3.guide/5.recipes/5.mostly-static-sites.md +127 -0
- package/3.guide/6.going-further/1.events.md +1 -1
- package/3.guide/6.going-further/1.experimental-features.md +254 -22
- package/3.guide/6.going-further/1.features.md +42 -6
- package/3.guide/6.going-further/1.internals.md +10 -10
- package/3.guide/6.going-further/10.runtime-config.md +28 -6
- package/3.guide/6.going-further/11.nightly-release-channel.md +1 -1
- package/3.guide/6.going-further/2.hooks.md +6 -6
- package/3.guide/6.going-further/4.kit.md +4 -4
- package/3.guide/6.going-further/5.server-imports.md +221 -0
- package/3.guide/6.going-further/6.nuxt-app.md +7 -7
- package/3.guide/6.going-further/7.layers.md +13 -13
- package/3.guide/6.going-further/8.builders.md +38 -14
- package/4.api/1.components/1.nuxt-client-fallback.md +1 -1
- package/4.api/1.components/10.nuxt-picture.md +1 -1
- package/4.api/1.components/11.teleports.md +1 -1
- package/4.api/1.components/12.nuxt-route-announcer.md +5 -3
- package/4.api/1.components/14.nuxt-announcer.md +3 -3
- package/4.api/1.components/2.nuxt-page.md +5 -5
- package/4.api/1.components/3.nuxt-layout.md +8 -8
- package/4.api/1.components/4.nuxt-link.md +6 -4
- package/4.api/1.components/5.nuxt-loading-indicator.md +3 -3
- package/4.api/1.components/6.nuxt-error-boundary.md +1 -1
- package/4.api/1.components/8.nuxt-island.md +5 -5
- package/4.api/2.composables/create-use-async-data.md +51 -8
- package/4.api/2.composables/create-use-fetch.md +126 -9
- package/4.api/2.composables/use-announcer.md +3 -3
- package/4.api/2.composables/use-app-config.md +1 -1
- package/4.api/2.composables/use-async-data.md +19 -11
- package/4.api/2.composables/use-cookie.md +22 -6
- package/4.api/2.composables/use-error.md +1 -1
- package/4.api/2.composables/use-fetch.md +14 -10
- package/4.api/2.composables/use-head-safe.md +2 -2
- package/4.api/2.composables/use-head.md +2 -2
- package/4.api/2.composables/use-hydration.md +1 -1
- package/4.api/2.composables/use-layout.md +1 -1
- package/4.api/2.composables/use-lazy-async-data.md +8 -8
- package/4.api/2.composables/use-lazy-fetch.md +11 -11
- package/4.api/2.composables/use-loading-indicator.md +2 -2
- package/4.api/2.composables/use-nuxt-app.md +13 -13
- package/4.api/2.composables/use-nuxt-data.md +1 -1
- package/4.api/2.composables/use-preview-mode.md +3 -3
- package/4.api/2.composables/use-request-event.md +29 -3
- package/4.api/2.composables/use-request-fetch.md +2 -2
- package/4.api/2.composables/use-request-header.md +1 -1
- package/4.api/2.composables/use-request-headers.md +1 -1
- package/4.api/2.composables/use-request-url.md +1 -1
- package/4.api/2.composables/use-response-header.md +2 -2
- package/4.api/2.composables/use-route-announcer.md +4 -2
- package/4.api/2.composables/use-route.md +2 -2
- package/4.api/2.composables/use-router.md +5 -5
- package/4.api/2.composables/use-runtime-config.md +5 -5
- package/4.api/2.composables/use-runtime-hook.md +1 -1
- package/4.api/2.composables/use-seo-meta.md +3 -3
- package/4.api/2.composables/use-server-seo-meta.md +5 -5
- package/4.api/2.composables/use-state.md +4 -4
- package/4.api/3.utils/$fetch.md +5 -5
- package/4.api/3.utils/abort-navigation.md +1 -1
- package/4.api/3.utils/add-route-middleware.md +2 -2
- package/4.api/3.utils/call-once.md +3 -3
- package/4.api/3.utils/clear-error.md +2 -2
- package/4.api/3.utils/clear-nuxt-data.md +1 -1
- package/4.api/3.utils/clear-nuxt-state.md +2 -2
- package/4.api/3.utils/create-error.md +19 -1
- package/4.api/3.utils/define-nuxt-plugin.md +2 -2
- package/4.api/3.utils/define-nuxt-route-middleware.md +3 -3
- package/4.api/3.utils/define-page-meta.md +12 -12
- package/4.api/3.utils/define-route-rules.md +4 -4
- package/4.api/3.utils/define-use-async-data-addon.md +57 -0
- package/4.api/3.utils/define-use-fetch-addon.md +168 -0
- package/4.api/3.utils/navigate-to.md +6 -2
- package/4.api/3.utils/prefetch-components.md +1 -1
- package/4.api/3.utils/preload-route-components.md +2 -2
- package/4.api/3.utils/prerender-routes.md +3 -3
- package/4.api/3.utils/refresh-cookie.md +1 -1
- package/4.api/3.utils/refresh-nuxt-data.md +3 -3
- package/4.api/3.utils/reload-nuxt-app.md +1 -1
- package/4.api/3.utils/set-page-layout.md +1 -1
- package/4.api/3.utils/set-response-status.md +2 -2
- package/4.api/3.utils/show-error.md +3 -3
- package/4.api/3.utils/update-app-config.md +2 -2
- package/4.api/4.commands/README.md +9 -0
- package/4.api/5.kit/1.modules.md +3 -3
- package/4.api/5.kit/10.runtime-config.md +1 -1
- package/4.api/5.kit/10.templates.md +42 -0
- package/4.api/5.kit/12.nitro.md +59 -18
- package/4.api/5.kit/14.logging.md +56 -2
- package/4.api/5.kit/15.builder.md +1 -1
- package/4.api/5.kit/18.dependencies.md +90 -0
- package/4.api/5.kit/2.programmatic.md +78 -1
- package/4.api/5.kit/3.compatibility.md +2 -2
- package/4.api/5.kit/4.autoimports.md +13 -13
- package/4.api/5.kit/5.components.md +3 -3
- package/4.api/5.kit/6.context.md +2 -2
- package/4.api/5.kit/7.pages.md +35 -4
- package/4.api/5.kit/8.layout.md +1 -1
- package/4.api/6.advanced/1.hooks.md +6 -3
- package/4.api/6.nuxt-config.md +44 -21
- package/4.api/index.md +7 -7
- package/5.community/2.getting-help.md +1 -1
- package/5.community/3.reporting-bugs.md +1 -1
- package/5.community/4.contribution.md +14 -12
- package/5.community/5.framework-contribution.md +4 -4
- package/5.community/6.roadmap.md +6 -6
- package/6.bridge/1.overview.md +12 -12
- package/6.bridge/2.typescript.md +1 -1
- package/6.bridge/3.bridge-composition-api.md +6 -6
- package/6.bridge/4.plugins-and-middleware.md +4 -4
- package/6.bridge/5.nuxt3-compatible-api.md +9 -9
- package/6.bridge/6.meta.md +5 -5
- package/6.bridge/7.runtime-config.md +1 -1
- package/6.bridge/8.nitro.md +1 -1
- package/6.bridge/9.vite.md +1 -1
- package/7.migration/1.overview.md +2 -2
- package/7.migration/10.bundling.md +1 -1
- package/7.migration/11.server.md +3 -3
- package/7.migration/2.configuration.md +6 -6
- package/7.migration/20.module-authors.md +7 -7
- package/7.migration/3.auto-imports.md +3 -3
- package/7.migration/4.meta.md +4 -4
- package/7.migration/5.plugins-and-middleware.md +3 -3
- package/7.migration/6.pages-and-layouts.md +13 -13
- package/7.migration/7.component-options.md +15 -15
- package/7.migration/8.runtime-config.md +4 -4
- package/README.md +1 -1
- package/errors/e8007.md +28 -0
- package/package.json +2 -2
- package/4.api/4.commands/.navigation.yml +0 -3
- package/4.api/4.commands/add.md +0 -112
- package/4.api/4.commands/analyze.md +0 -42
- package/4.api/4.commands/build-module.md +0 -42
- package/4.api/4.commands/build.md +0 -48
- package/4.api/4.commands/cleanup.md +0 -38
- package/4.api/4.commands/dev.md +0 -61
- package/4.api/4.commands/devtools.md +0 -38
- package/4.api/4.commands/generate.md +0 -43
- package/4.api/4.commands/info.md +0 -33
- package/4.api/4.commands/init.md +0 -50
- package/4.api/4.commands/module.md +0 -84
- package/4.api/4.commands/prepare.md +0 -41
- package/4.api/4.commands/preview.md +0 -44
- package/4.api/4.commands/test.md +0 -40
- package/4.api/4.commands/typecheck.md +0 -44
- package/4.api/4.commands/upgrade.md +0 -37
|
@@ -9,7 +9,7 @@ By migrating from `@nuxtjs/composition-api` to the Nuxt 3 compatible API, there
|
|
|
9
9
|
|
|
10
10
|
These two functions have been replaced with a new composable that works very similarly under the hood: `useState`.
|
|
11
11
|
|
|
12
|
-
The key differences are that you must provide a _key_ for this state (which Nuxt generated automatically for `ssrRef` and `shallowSsrRef`), and that it can only be called within a Nuxt 3 plugin (which is defined by `defineNuxtPlugin`) or a component instance. (In other words, you cannot use [`useState`](/docs/
|
|
12
|
+
The key differences are that you must provide a _key_ for this state (which Nuxt generated automatically for `ssrRef` and `shallowSsrRef`), and that it can only be called within a Nuxt 3 plugin (which is defined by `defineNuxtPlugin`) or a component instance. (In other words, you cannot use [`useState`](/docs/api/composables/use-state) with a global/ambient context, because of the danger of shared state across requests.)
|
|
13
13
|
|
|
14
14
|
```diff
|
|
15
15
|
- import { ssrRef } from '@nuxtjs/composition-api'
|
|
@@ -24,7 +24,7 @@ The key differences are that you must provide a _key_ for this state (which Nuxt
|
|
|
24
24
|
|
|
25
25
|
Because the state is keyed, you can access the same state from multiple locations, as long as you are using the same key.
|
|
26
26
|
|
|
27
|
-
You can read more about how to use this composable in [the Nuxt 3 docs](/docs/
|
|
27
|
+
You can read more about how to use this composable in [the Nuxt 3 docs](/docs/api/composables/use-state).
|
|
28
28
|
|
|
29
29
|
## `ssrPromise`
|
|
30
30
|
|
|
@@ -32,7 +32,7 @@ This function has been removed, and you will need to find an alternative impleme
|
|
|
32
32
|
|
|
33
33
|
## `onGlobalSetup`
|
|
34
34
|
|
|
35
|
-
This function has been removed, but its use cases can be met by using [`useNuxtApp`](/docs/
|
|
35
|
+
This function has been removed, but its use cases can be met by using [`useNuxtApp`](/docs/api/composables/use-nuxt-app) or [`useState`](/docs/api/composables/use-state) within `defineNuxtPlugin`. You can also run any custom code within the `setup()` function of a layout.
|
|
36
36
|
|
|
37
37
|
```diff
|
|
38
38
|
- import { onGlobalSetup } from '@nuxtjs/composition-api'
|
|
@@ -84,14 +84,14 @@ const wrapProperty = (property: string, makeComputed = true) => () => {
|
|
|
84
84
|
|
|
85
85
|
## `useAsync` and `useFetch`
|
|
86
86
|
|
|
87
|
-
These two composables can be replaced with `useLazyAsyncData` and `useLazyFetch`, which are documented [in the Nuxt 3 docs](/docs/
|
|
87
|
+
These two composables can be replaced with `useLazyAsyncData` and `useLazyFetch`, which are documented [in the Nuxt 3 docs](/docs/getting-started/data-fetching). Just like the previous `@nuxtjs/composition-api` composables, these composables do not block route navigation on the client-side (hence the 'lazy' part of the name).
|
|
88
88
|
|
|
89
89
|
::important
|
|
90
90
|
Note that the API is entirely different, despite similar sounding names. Importantly, you should not attempt to change the value of other variables outside the composable (as you may have been doing with the previous `useFetch`).
|
|
91
91
|
::
|
|
92
92
|
|
|
93
93
|
::warning
|
|
94
|
-
The `useLazyFetch` must have been configured for [Nitro](/docs/
|
|
94
|
+
The `useLazyFetch` must have been configured for [Nitro](/docs/bridge/nitro).
|
|
95
95
|
::
|
|
96
96
|
|
|
97
97
|
Migrating to the new composables from `useAsync`:
|
|
@@ -152,7 +152,7 @@ title.value = 'new title'
|
|
|
152
152
|
Be careful not to use both `useNuxt2Meta()` and the Options API `head()` within the same component, as behavior may be unpredictable.
|
|
153
153
|
::
|
|
154
154
|
|
|
155
|
-
Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the [`useHead`](/docs/
|
|
155
|
+
Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the [`useHead`](/docs/api/composables/use-head) composable.
|
|
156
156
|
|
|
157
157
|
```diff
|
|
158
158
|
<script setup>
|
|
@@ -175,9 +175,9 @@ export default defineNuxtConfig({
|
|
|
175
175
|
})
|
|
176
176
|
```
|
|
177
177
|
|
|
178
|
-
This [`useHead`](/docs/
|
|
178
|
+
This [`useHead`](/docs/api/composables/use-head) composable uses `@unhead/vue` under the hood (rather than `vue-meta`) to manipulate your `<head>`. Accordingly, it is recommended not to use both the native Nuxt 2 `head()` properties as well as [`useHead`](/docs/api/composables/use-head) , as they may conflict.
|
|
179
179
|
|
|
180
|
-
For more information on how to use this composable, see [the Nuxt 3 docs](/docs/
|
|
180
|
+
For more information on how to use this composable, see [the Nuxt 3 docs](/docs/getting-started/seo-meta).
|
|
181
181
|
|
|
182
182
|
### Explicit Imports
|
|
183
183
|
|
|
@@ -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](/docs/
|
|
207
|
+
This will disable auto-imports completely but it's still possible to use [explicit imports](/docs/bridge/nuxt3-compatible-api#explicit-imports) from `#imports`.
|
package/6.bridge/6.meta.md
CHANGED
|
@@ -3,7 +3,7 @@ title: Meta Tags
|
|
|
3
3
|
description: 'Learn how to migrate from Nuxt 2 to Nuxt Bridge new meta tags.'
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/
|
|
6
|
+
If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/api/composables/use-head) .
|
|
7
7
|
|
|
8
8
|
If you need to use the Options API, there is a `head()` method you can use when you use `defineNuxtComponent`.
|
|
9
9
|
|
|
@@ -60,7 +60,7 @@ export default defineNuxtConfig({
|
|
|
60
60
|
|
|
61
61
|
## `useHead` Composables
|
|
62
62
|
|
|
63
|
-
Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new [`useHead`](/docs/
|
|
63
|
+
Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new [`useHead`](/docs/api/composables/use-head) composable.
|
|
64
64
|
|
|
65
65
|
```vue
|
|
66
66
|
<script setup lang="ts">
|
|
@@ -71,14 +71,14 @@ useHead({
|
|
|
71
71
|
```
|
|
72
72
|
|
|
73
73
|
::tip
|
|
74
|
-
This [`useHead`](/docs/
|
|
74
|
+
This [`useHead`](/docs/api/composables/use-head) composable uses `@unhead/vue` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
|
|
75
75
|
::
|
|
76
76
|
|
|
77
77
|
::warning
|
|
78
|
-
We recommend not using the native Nuxt 2 `head()` properties in addition to [`useHead`](/docs/
|
|
78
|
+
We recommend not using the native Nuxt 2 `head()` properties in addition to [`useHead`](/docs/api/composables/use-head) , as they may conflict.
|
|
79
79
|
::
|
|
80
80
|
|
|
81
|
-
For more information on how to use this composable, see [the docs](/docs/
|
|
81
|
+
For more information on how to use this composable, see [the docs](/docs/getting-started/seo-meta).
|
|
82
82
|
|
|
83
83
|
## Options API
|
|
84
84
|
|
|
@@ -4,7 +4,7 @@ description: 'Nuxt provides a runtime config API to expose configuration and sec
|
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
::warning
|
|
7
|
-
When using `runtimeConfig` option, [nitro](/docs/
|
|
7
|
+
When using `runtimeConfig` option, [nitro](/docs/bridge/nitro) must have been configured.
|
|
8
8
|
::
|
|
9
9
|
|
|
10
10
|
## Update Runtime Config
|
package/6.bridge/8.nitro.md
CHANGED
|
@@ -53,7 +53,7 @@ deno add -D npm:nuxi
|
|
|
53
53
|
|
|
54
54
|
### Nuxi
|
|
55
55
|
|
|
56
|
-
Nuxt 3 introduced the new Nuxt CLI command [`nuxi`](/docs/
|
|
56
|
+
Nuxt 3 introduced the new Nuxt CLI command [`nuxi`](/docs/api/commands/add). Update your scripts as follows to leverage the better support from Nuxt Bridge:
|
|
57
57
|
|
|
58
58
|
```diff
|
|
59
59
|
{
|
package/6.bridge/9.vite.md
CHANGED
|
@@ -4,7 +4,7 @@ description: 'Activate Vite to your Nuxt 2 application with Nuxt Bridge.'
|
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
::warning
|
|
7
|
-
When using `vite`, [nitro](/docs/
|
|
7
|
+
When using `vite`, [nitro](/docs/bridge/nitro) must have been configured.
|
|
8
8
|
::
|
|
9
9
|
|
|
10
10
|
## Remove Modules
|
|
@@ -16,9 +16,9 @@ Some of these significant changes include:
|
|
|
16
16
|
1. Moving from a runtime Nuxt dependency to a minimal, standalone server compiled with nitropack.
|
|
17
17
|
|
|
18
18
|
::tip
|
|
19
|
-
If you need to remain on Nuxt 2, but want to benefit from Nuxt 3 features in Nuxt 2, you can alternatively check out [how to get started with Bridge](/docs/
|
|
19
|
+
If you need to remain on Nuxt 2, but want to benefit from Nuxt 3 features in Nuxt 2, you can alternatively check out [how to get started with Bridge](/docs/bridge/overview).
|
|
20
20
|
::
|
|
21
21
|
|
|
22
22
|
## Next Steps
|
|
23
23
|
|
|
24
|
-
- Learn about differences in [configuration](/docs/
|
|
24
|
+
- Learn about differences in [configuration](/docs/migration/configuration)
|
|
@@ -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/
|
|
19
|
+
:read-more{to="/docs/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/
|
|
8
|
+
:read-more{to="/docs/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/
|
|
16
|
+
:read-more{to="/docs/directory-structure/server"}
|
|
17
|
+
:read-more{to="/docs/guide/going-further/hooks#server-hooks-runtime"}
|
|
@@ -100,7 +100,7 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
|
|
|
100
100
|
|
|
101
101
|
#### ESM Syntax
|
|
102
102
|
|
|
103
|
-
Nuxt 3 is an [ESM native framework](/docs/
|
|
103
|
+
Nuxt 3 is an [ESM native framework](/docs/guide/concepts/esm). Although [`unjs/jiti`](https://github.com/unjs/jiti) provides semi compatibility when loading `nuxt.config` file, avoid any usage of `require` and `module.exports` in this file.
|
|
104
104
|
|
|
105
105
|
1. Change `module.exports` to `export default`
|
|
106
106
|
1. Change `const lib = require('lib')` to `import lib from 'lib'`
|
|
@@ -133,20 +133,20 @@ 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/
|
|
136
|
+
If you are a module author, you can check out [more information about module compatibility](/docs/migration/module-authors) and [our module author guide](/docs/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/directory-structure/public"}
|
|
144
144
|
|
|
145
145
|
## TypeScript
|
|
146
146
|
|
|
147
147
|
It will be much easier to migrate your application if you use Nuxt's TypeScript integration. This does not mean you need to write your application in TypeScript, just that Nuxt will provide automatic type hints for your editor.
|
|
148
148
|
|
|
149
|
-
You can read more about Nuxt's TypeScript support [in the docs](/docs/
|
|
149
|
+
You can read more about Nuxt's TypeScript support [in the docs](/docs/guide/concepts/typescript).
|
|
150
150
|
|
|
151
151
|
::note
|
|
152
152
|
Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/tsc) with `nuxt typecheck` command.
|
|
@@ -177,7 +177,7 @@ Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language
|
|
|
177
177
|
```
|
|
178
178
|
|
|
179
179
|
1. Run `npx nuxt prepare` to generate the tsconfig files.
|
|
180
|
-
1. Install Volar following the instructions in the [docs](/docs/
|
|
180
|
+
1. Install Volar following the instructions in the [docs](/docs/getting-started/installation#prerequisites).
|
|
181
181
|
|
|
182
182
|
## Vue Changes
|
|
183
183
|
|
|
@@ -227,7 +227,7 @@ export const useMainStore = defineStore('main', {
|
|
|
227
227
|
})
|
|
228
228
|
```
|
|
229
229
|
|
|
230
|
-
Create a [plugin](/docs/
|
|
230
|
+
Create a [plugin](/docs/directory-structure/app/plugins) file to globalize your store:
|
|
231
231
|
|
|
232
232
|
```ts [app/plugins/pinia.ts]
|
|
233
233
|
import { useMainStore } from '~/store'
|
|
@@ -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/
|
|
10
|
+
We have prepared a [Dedicated Guide](/docs/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/directory-structure/app/plugins"}
|
|
21
21
|
|
|
22
22
|
### Vue Compatibility
|
|
23
23
|
|
|
@@ -33,11 +33,11 @@ When Nuxt 3 users add your module, you will not have access to the module contai
|
|
|
33
33
|
|
|
34
34
|
Migrating to `@nuxt/bridge` is the first and most important step for supporting Nuxt 3.
|
|
35
35
|
|
|
36
|
-
If you have a fixture or example in your module, add `@nuxt/bridge` package to its config (see [example](/docs/
|
|
36
|
+
If you have a fixture or example in your module, add `@nuxt/bridge` package to its config (see [example](/docs/bridge/overview#update-nuxtconfig))
|
|
37
37
|
|
|
38
38
|
### Migrate from CommonJS to ESM
|
|
39
39
|
|
|
40
|
-
Nuxt 3 natively supports TypeScript and ECMAScript Modules. Please check [Native ES Modules](/docs/
|
|
40
|
+
Nuxt 3 natively supports TypeScript and ECMAScript Modules. Please check [Native ES Modules](/docs/guide/concepts/esm) for more info and upgrading.
|
|
41
41
|
|
|
42
42
|
### Ensure Plugins Default Export
|
|
43
43
|
|
|
@@ -69,16 +69,16 @@ export default () => { }
|
|
|
69
69
|
|
|
70
70
|
With Nuxt 3, Nuxt is now a build-time-only dependency, which means that modules shouldn't attempt to hook into the Nuxt runtime.
|
|
71
71
|
|
|
72
|
-
Your module should work even if it's only added to [`buildModules`](/docs/
|
|
72
|
+
Your module should work even if it's only added to [`buildModules`](/docs/api/nuxt-config#runtimeconfig) (instead of `modules`). For example:
|
|
73
73
|
|
|
74
|
-
- Avoid updating `process.env` within a Nuxt module and reading by a Nuxt plugin; use [`runtimeConfig`](/docs/
|
|
74
|
+
- Avoid updating `process.env` within a Nuxt module and reading by a Nuxt plugin; use [`runtimeConfig`](/docs/api/nuxt-config#runtimeconfig) instead.
|
|
75
75
|
- (*) Avoid depending on runtime hooks like `vue-renderer:*` for production
|
|
76
76
|
- (*) Avoid adding `serverMiddleware` by importing them inside the module. Instead, add them by referencing a file path so that they are independent of the module's context
|
|
77
77
|
|
|
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/
|
|
81
|
+
Continue reading about Nuxt 3 modules in the [Modules Author Guide](/docs/guide/modules).
|
|
82
82
|
::
|
|
83
83
|
|
|
84
84
|
### Use TypeScript (Optional)
|
|
@@ -4,14 +4,14 @@ description: Nuxt 3 adopts a minimal friction approach, meaning wherever possib
|
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
::note
|
|
7
|
-
In the rest of the migration documentation, you will notice that key Nuxt and Vue utilities do not have explicit imports. This is not a typo; Nuxt will automatically import them for you, and you should get full type hinting if you have followed [the instructions](/docs/
|
|
7
|
+
In the rest of the migration documentation, you will notice that key Nuxt and Vue utilities do not have explicit imports. This is not a typo; Nuxt will automatically import them for you, and you should get full type hinting if you have followed [the instructions](/docs/migration/configuration#typescript) to use Nuxt's TypeScript support.
|
|
8
8
|
::
|
|
9
9
|
|
|
10
|
-
[Read more about auto imports](/docs/
|
|
10
|
+
[Read more about auto imports](/docs/guide/concepts/auto-imports)
|
|
11
11
|
|
|
12
12
|
## Migration
|
|
13
13
|
|
|
14
|
-
1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/docs/
|
|
14
|
+
1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/docs/directory-structure/app/components) for more information.
|
|
15
15
|
|
|
16
16
|
::tip
|
|
17
17
|
You can look at `.nuxt/types/components.d.ts` and `.nuxt/types/imports.d.ts` to see how Nuxt has resolved your components and composable auto-imports.
|
package/7.migration/4.meta.md
CHANGED
|
@@ -5,8 +5,8 @@ description: Manage your meta tags, from Nuxt 2 to Nuxt 3.
|
|
|
5
5
|
|
|
6
6
|
Nuxt 3 provides several different ways to manage your meta tags:
|
|
7
7
|
1. Through your `nuxt.config`.
|
|
8
|
-
2. Through the [`useHead`](/docs/
|
|
9
|
-
3. Through [global meta components](/docs/
|
|
8
|
+
2. Through the [`useHead`](/docs/api/composables/use-head) [composable](/docs/getting-started/seo-meta)
|
|
9
|
+
3. Through [global meta components](/docs/getting-started/seo-meta)
|
|
10
10
|
|
|
11
11
|
You can customize `title`, `titleTemplate`, `base`, `script`, `noscript`, `style`, `meta`, `link`, `htmlAttrs` and `bodyAttrs`.
|
|
12
12
|
|
|
@@ -14,12 +14,12 @@ 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/
|
|
17
|
+
:read-more{to="/docs/getting-started/seo-meta"}
|
|
18
18
|
|
|
19
19
|
## Migration
|
|
20
20
|
|
|
21
21
|
1. In your `nuxt.config`, rename `head` to `meta`. Consider moving this shared meta configuration into your `app.vue` instead. (Note that objects no longer have a `hid` key for deduplication.)
|
|
22
|
-
2. If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/
|
|
22
|
+
2. If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/api/composables/use-head) . You might also consider using the built-in meta-components.
|
|
23
23
|
3. If you need to use the Options API, there is a `head()` method you can use when you use `defineNuxtComponent`.
|
|
24
24
|
|
|
25
25
|
### useHead
|
|
@@ -31,9 +31,9 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|
|
31
31
|
|
|
32
32
|
::
|
|
33
33
|
|
|
34
|
-
:read-more{to="/docs/
|
|
34
|
+
:read-more{to="/docs/directory-structure/app/plugins"}
|
|
35
35
|
|
|
36
|
-
::read-more{to="/docs/
|
|
36
|
+
::read-more{to="/docs/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/directory-structure/app/middleware"}
|
|
76
76
|
|
|
77
77
|
### Migration
|
|
78
78
|
|
|
@@ -13,19 +13,19 @@ 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/directory-structure/app/app"}
|
|
17
17
|
|
|
18
|
-
:link-example{to="/docs/
|
|
18
|
+
:link-example{to="/docs/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/
|
|
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/directory-structure/app/app).
|
|
23
23
|
|
|
24
24
|
## Layouts
|
|
25
25
|
|
|
26
26
|
If you are using layouts in your app for multiple pages, there is only a slight change required.
|
|
27
27
|
|
|
28
|
-
In Nuxt 2, the `<Nuxt>` component is used within a layout to render the current page. In Nuxt 3, layouts use slots instead, so you will have to replace that component with a `<slot />`. This also allows advanced use cases with named and scoped slots. [Read more about layouts](/docs/
|
|
28
|
+
In Nuxt 2, the `<Nuxt>` component is used within a layout to render the current page. In Nuxt 3, layouts use slots instead, so you will have to replace that component with a `<slot />`. This also allows advanced use cases with named and scoped slots. [Read more about layouts](/docs/directory-structure/app/layouts).
|
|
29
29
|
|
|
30
30
|
You will also need to change how you define the layout used by a page using the `definePageMeta` compiler macro. Layouts will be kebab-cased. So `app/layouts/customLayout.vue` becomes `custom-layout` when referenced in your page.
|
|
31
31
|
|
|
@@ -42,7 +42,7 @@ You will also need to change how you define the layout used by a page using the
|
|
|
42
42
|
</div>
|
|
43
43
|
</template>
|
|
44
44
|
```
|
|
45
|
-
2. Use [`definePageMeta`](/docs/
|
|
45
|
+
2. Use [`definePageMeta`](/docs/api/utils/define-page-meta) to select the layout used by your page.
|
|
46
46
|
```diff [app/pages/index.vue]
|
|
47
47
|
+ <script setup>
|
|
48
48
|
+ definePageMeta({
|
|
@@ -54,7 +54,7 @@ You will also need to change how you define the layout used by a page using the
|
|
|
54
54
|
- }
|
|
55
55
|
</script>
|
|
56
56
|
```
|
|
57
|
-
3. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/
|
|
57
|
+
3. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/getting-started/error-handling). If you want to ensure that this page uses a layout, you can use [`<NuxtLayout>`](/docs/directory-structure/app/layouts) directly within `error.vue`:
|
|
58
58
|
```vue [error.vue]
|
|
59
59
|
<template>
|
|
60
60
|
<div>
|
|
@@ -67,7 +67,7 @@ You will also need to change how you define the layout used by a page using the
|
|
|
67
67
|
|
|
68
68
|
## Pages
|
|
69
69
|
|
|
70
|
-
Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a [`app/pages/`](/docs/
|
|
70
|
+
Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a [`app/pages/`](/docs/directory-structure/app/pages) directory in your source directory. If you only have a single page, you may consider instead moving it to `app.vue` for a lighter build.
|
|
71
71
|
|
|
72
72
|
### Dynamic Routes
|
|
73
73
|
|
|
@@ -84,19 +84,19 @@ 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/directory-structure/app/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/
|
|
93
|
+
:read-more{to="/docs/getting-started/transitions"}
|
|
94
94
|
|
|
95
95
|
### Migration
|
|
96
96
|
|
|
97
97
|
1. Rename any pages with dynamic parameters to match the new format.
|
|
98
98
|
2. Update `<Nuxt>` and `<NuxtChild>` to be `<NuxtPage>`.
|
|
99
|
-
3. If you're using the Composition API, you can also migrate `this.$route` and `this.$router` to use [`useRoute`](/docs/
|
|
99
|
+
3. If you're using the Composition API, you can also migrate `this.$route` and `this.$router` to use [`useRoute`](/docs/api/composables/use-route) and [`useRouter`](/docs/api/composables/use-router) composables.
|
|
100
100
|
|
|
101
101
|
#### Example: Dynamic Routes
|
|
102
102
|
|
|
@@ -186,18 +186,18 @@ definePageMeta({
|
|
|
186
186
|
|
|
187
187
|
## `<NuxtLink>` Component
|
|
188
188
|
|
|
189
|
-
Most of the syntax and functionality are the same for the global [NuxtLink](/docs/
|
|
189
|
+
Most of the syntax and functionality are the same for the global [NuxtLink](/docs/api/components/nuxt-link) component. If you have been using the shortcut `<NLink>` format, you should update this to use `<NuxtLink>`.
|
|
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/
|
|
193
|
+
:read-more{to="/docs/api/components/nuxt-link"}
|
|
194
194
|
|
|
195
195
|
## Programmatic Navigation
|
|
196
196
|
|
|
197
197
|
When migrating from Nuxt 2 to Nuxt 3, you will have to update how you programmatically navigate your users. In Nuxt 2, you had access to the underlying Vue Router with `this.$router`. In Nuxt 3, you can use the `navigateTo()` utility method which allows you to pass a route and parameters to Vue Router.
|
|
198
198
|
|
|
199
199
|
::warning
|
|
200
|
-
Make sure to always `await` on [`navigateTo`](/docs/
|
|
200
|
+
Make sure to always `await` on [`navigateTo`](/docs/api/utils/navigate-to) or chain its result by returning from functions.
|
|
201
201
|
::
|
|
202
202
|
|
|
203
203
|
::code-group
|
|
@@ -5,7 +5,7 @@ description: 'Learn how to migrate from Nuxt 2 components options to Nuxt 3 comp
|
|
|
5
5
|
|
|
6
6
|
## `asyncData` and `fetch`
|
|
7
7
|
|
|
8
|
-
Nuxt 3 provides new options for [fetching data from an API](/docs/
|
|
8
|
+
Nuxt 3 provides new options for [fetching data from an API](/docs/getting-started/data-fetching).
|
|
9
9
|
|
|
10
10
|
<!-- TODO: Intro to <script setup> -->
|
|
11
11
|
<!-- TODO: Mention about options compatibility with asyncData -->
|
|
@@ -14,17 +14,17 @@ Nuxt 3 provides new options for [fetching data from an API](/docs/4.x/getting-st
|
|
|
14
14
|
|
|
15
15
|
In Nuxt 2 you might use `@nuxtjs/axios` or `@nuxt/http` to fetch your data - or just the polyfilled global `fetch`.
|
|
16
16
|
|
|
17
|
-
In Nuxt 3 you can use a globally available `fetch` method that has the same API as [the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) or [`$fetch`](/docs/
|
|
17
|
+
In Nuxt 3 you can use a globally available `fetch` method that has the same API as [the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) or [`$fetch`](/docs/api/utils/dollarfetch) method which is using [unjs/ofetch](https://github.com/unjs/ofetch). It has a number of benefits, including:
|
|
18
18
|
|
|
19
|
-
1. It will handle 'smartly' making [direct API calls](/docs/
|
|
19
|
+
1. It will handle 'smartly' making [direct API calls](/docs/guide/concepts/server-engine#direct-api-calls) if it's running on the server, or making a client-side call to your API if it's running on the client. (It can also handle calling third-party APIs.)
|
|
20
20
|
|
|
21
21
|
2. Plus, it comes with convenience features including automatically parsing responses and stringifying data.
|
|
22
22
|
|
|
23
|
-
You can read more [about direct API calls](/docs/
|
|
23
|
+
You can read more [about direct API calls](/docs/guide/concepts/server-engine#direct-api-calls) or [fetching data](/docs/getting-started/data-fetching).
|
|
24
24
|
|
|
25
25
|
### Composables
|
|
26
26
|
|
|
27
|
-
Nuxt 3 provides new composables for fetching data: [`useAsyncData`](/docs/
|
|
27
|
+
Nuxt 3 provides new composables for fetching data: [`useAsyncData`](/docs/api/composables/use-async-data) and `useFetch`. They each have 'lazy' variants (`useLazyAsyncData` and `useLazyFetch`), which do not block client-side navigation.
|
|
28
28
|
|
|
29
29
|
In Nuxt 2, you'd fetch your data in your component using a syntax similar to:
|
|
30
30
|
|
|
@@ -57,21 +57,21 @@ const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${p
|
|
|
57
57
|
You can now use `post` inside of your Nuxt 3 template, or call `refresh` to update the data.
|
|
58
58
|
|
|
59
59
|
::note
|
|
60
|
-
Despite the names, [`useFetch`](/docs/
|
|
60
|
+
Despite the names, [`useFetch`](/docs/api/composables/use-fetch) is not a direct replacement of the `fetch()` hook. Rather, [`useAsyncData`](/docs/api/composables/use-async-data) replaces both hooks and is more customizable; it can do more than simply fetching data from an endpoint. [`useFetch`](/docs/api/composables/use-fetch) is a convenience wrapper around [`useAsyncData`](/docs/api/composables/use-async-data) for simply fetching data from an endpoint.
|
|
61
61
|
::
|
|
62
62
|
|
|
63
63
|
### Migration
|
|
64
64
|
|
|
65
|
-
1. Replace the `asyncData` hook with [`useAsyncData`](/docs/
|
|
66
|
-
2. Replace the `fetch` hook with [`useAsyncData`](/docs/
|
|
65
|
+
1. Replace the `asyncData` hook with [`useAsyncData`](/docs/api/composables/use-async-data) or [`useFetch`](/docs/api/composables/use-fetch) in your page/component.
|
|
66
|
+
2. Replace the `fetch` hook with [`useAsyncData`](/docs/api/composables/use-async-data) or [`useFetch`](/docs/api/composables/use-fetch) in your component.
|
|
67
67
|
|
|
68
68
|
## `head`
|
|
69
69
|
|
|
70
|
-
:read-more{to="/docs/
|
|
70
|
+
:read-more{to="/docs/migration/meta"}
|
|
71
71
|
|
|
72
72
|
## `key`
|
|
73
73
|
|
|
74
|
-
You can now define a key within the [`definePageMeta`](/docs/
|
|
74
|
+
You can now define a key within the [`definePageMeta`](/docs/api/utils/define-page-meta) compiler macro.
|
|
75
75
|
|
|
76
76
|
```diff [app/pages/index.vue]
|
|
77
77
|
- <script>
|
|
@@ -91,7 +91,7 @@ You can now define a key within the [`definePageMeta`](/docs/4.x/api/utils/defin
|
|
|
91
91
|
|
|
92
92
|
## `layout`
|
|
93
93
|
|
|
94
|
-
:read-more{to="/docs/
|
|
94
|
+
:read-more{to="/docs/migration/pages-and-layouts"}
|
|
95
95
|
|
|
96
96
|
## `loading`
|
|
97
97
|
|
|
@@ -99,12 +99,12 @@ This feature is not yet supported in Nuxt 3.
|
|
|
99
99
|
|
|
100
100
|
## `middleware`
|
|
101
101
|
|
|
102
|
-
:read-more{to="/docs/
|
|
102
|
+
:read-more{to="/docs/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 an `~/router.options.ts` (see [docs](/docs/
|
|
107
|
-
Similar to `key`, specify it within the [`definePageMeta`](/docs/
|
|
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 `~/router.options.ts` (see [docs](/docs/guide/recipes/custom-routing#router-options)) for more info.
|
|
107
|
+
Similar to `key`, specify it within the [`definePageMeta`](/docs/api/utils/define-page-meta) compiler macro.
|
|
108
108
|
|
|
109
109
|
```diff [app/pages/index.vue]
|
|
110
110
|
- <script>
|
|
@@ -120,7 +120,7 @@ Similar to `key`, specify it within the [`definePageMeta`](/docs/4.x/api/utils/d
|
|
|
120
120
|
|
|
121
121
|
## `transition`
|
|
122
122
|
|
|
123
|
-
:read-more{to="/docs/
|
|
123
|
+
:read-more{to="/docs/getting-started/transitions"}
|
|
124
124
|
|
|
125
125
|
## `validate`
|
|
126
126
|
|
|
@@ -5,16 +5,16 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 runtime config.'
|
|
|
5
5
|
|
|
6
6
|
If you wish to reference environment variables within your Nuxt 3 app, you will need to use runtime config.
|
|
7
7
|
|
|
8
|
-
When referencing these variables within your components, you will have to use the [`useRuntimeConfig`](/docs/
|
|
8
|
+
When referencing these variables within your components, you will have to use the [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) composable in your setup method (or Nuxt plugin).
|
|
9
9
|
|
|
10
|
-
In the `server/` portion of your app, you can use [`useRuntimeConfig`](/docs/
|
|
10
|
+
In the `server/` portion of your app, you can use [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) without any import.
|
|
11
11
|
|
|
12
|
-
:read-more{to="/docs/
|
|
12
|
+
:read-more{to="/docs/guide/going-further/runtime-config"}
|
|
13
13
|
|
|
14
14
|
## Migration
|
|
15
15
|
|
|
16
16
|
1. Add any environment variables that you use in your app to the `runtimeConfig` property of the `nuxt.config` file.
|
|
17
|
-
2. Migrate `process.env` to [`useRuntimeConfig`](/docs/
|
|
17
|
+
2. Migrate `process.env` to [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) throughout the Vue part of your app.
|
|
18
18
|
|
|
19
19
|
::code-group
|
|
20
20
|
|
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ navigation: false
|
|
|
4
4
|
|
|
5
5
|
# Nuxt Docs
|
|
6
6
|
|
|
7
|
-
This repository contains the documentation of Nuxt, hosted on <https://nuxt.com/docs
|
|
7
|
+
This repository contains the documentation of Nuxt, hosted on <https://nuxt.com/docs>
|
|
8
8
|
|
|
9
9
|
## Contributing
|
|
10
10
|
|
package/errors/e8007.md
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: 'NUXT_E8007'
|
|
3
|
+
description: 'A route relies on client-side JavaScript but noScripts will strip scripts in production.'
|
|
4
|
+
navigation: false
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# E8007
|
|
8
|
+
|
|
9
|
+
With `features.noScripts: 'production'` (the default when `noScripts` is enabled), scripts are only stripped from rendered HTML in production builds. In development the page still ships JavaScript, so behaviour that depends on it (lazy hydration strategies, `nuxt-client` components inside server components) appears to work in dev and then silently breaks after deployment.
|
|
10
|
+
|
|
11
|
+
This warning is emitted during development when a rendered route uses one of these features.
|
|
12
|
+
|
|
13
|
+
## Resolution
|
|
14
|
+
|
|
15
|
+
Either remove the client-side dependency from the affected route, or scope script stripping to the routes that are genuinely static using the `noScripts` route rule (which applies in development too, so any breakage is visible immediately):
|
|
16
|
+
|
|
17
|
+
```ts [nuxt.config.ts]
|
|
18
|
+
export default defineNuxtConfig({
|
|
19
|
+
routeRules: {
|
|
20
|
+
'/static/**': { noScripts: true },
|
|
21
|
+
},
|
|
22
|
+
})
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Alternatively, set `features.noScripts: 'all'` to strip scripts in development as well, making the production behaviour observable in dev.
|
|
26
|
+
|
|
27
|
+
::read-more{to="/docs/guide/going-further/features#noscripts"}
|
|
28
|
+
::
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuxt/docs-nightly",
|
|
3
|
-
"version": "4.5.
|
|
3
|
+
"version": "4.5.2-2610052030-052d82e",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/nuxt/nuxt.git",
|
|
@@ -17,5 +17,5 @@
|
|
|
17
17
|
"**/*.md",
|
|
18
18
|
"**/*.yml"
|
|
19
19
|
],
|
|
20
|
-
"
|
|
20
|
+
"scripts": {}
|
|
21
21
|
}
|