@nuxt/docs-nightly 4.1.3-29300098.2f71703a → 4.1.3-29303775.dc69e26c

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.
Files changed (146) hide show
  1. package/1.getting-started/01.introduction.md +2 -2
  2. package/1.getting-started/03.configuration.md +10 -10
  3. package/1.getting-started/04.views.md +6 -6
  4. package/1.getting-started/05.assets.md +7 -7
  5. package/1.getting-started/06.styling.md +5 -5
  6. package/1.getting-started/07.routing.md +8 -8
  7. package/1.getting-started/08.seo-meta.md +10 -10
  8. package/1.getting-started/09.transitions.md +11 -11
  9. package/1.getting-started/10.data-fetching.md +36 -36
  10. package/1.getting-started/11.state-management.md +7 -7
  11. package/1.getting-started/12.error-handling.md +9 -9
  12. package/1.getting-started/14.layers.md +3 -3
  13. package/1.getting-started/15.prerendering.md +4 -4
  14. package/1.getting-started/16.deployment.md +2 -2
  15. package/1.getting-started/17.testing.md +3 -3
  16. package/1.getting-started/18.upgrade.md +3 -3
  17. package/2.guide/1.concepts/1.auto-imports.md +8 -8
  18. package/2.guide/1.concepts/10.nuxt-lifecycle.md +10 -10
  19. package/2.guide/1.concepts/2.vuejs-development.md +4 -4
  20. package/2.guide/1.concepts/3.rendering.md +9 -9
  21. package/2.guide/1.concepts/4.server-engine.md +5 -5
  22. package/2.guide/1.concepts/5.modules.md +2 -2
  23. package/2.guide/1.concepts/7.esm.md +3 -3
  24. package/2.guide/1.concepts/8.typescript.md +8 -8
  25. package/2.guide/2.directory-structure/0.nuxt.md +2 -2
  26. package/2.guide/2.directory-structure/0.output.md +2 -2
  27. package/2.guide/2.directory-structure/1.app/1.assets.md +2 -2
  28. package/2.guide/2.directory-structure/1.app/1.components.md +5 -5
  29. package/2.guide/2.directory-structure/1.app/1.composables.md +3 -3
  30. package/2.guide/2.directory-structure/1.app/1.layouts.md +6 -6
  31. package/2.guide/2.directory-structure/1.app/1.middleware.md +7 -7
  32. package/2.guide/2.directory-structure/1.app/1.pages.md +14 -14
  33. package/2.guide/2.directory-structure/1.app/1.plugins.md +7 -7
  34. package/2.guide/2.directory-structure/1.app/1.utils.md +3 -3
  35. package/2.guide/2.directory-structure/1.app/3.app-config.md +5 -5
  36. package/2.guide/2.directory-structure/1.app/3.app.md +3 -3
  37. package/2.guide/2.directory-structure/1.app/3.error.md +1 -1
  38. package/2.guide/2.directory-structure/1.content.md +2 -2
  39. package/2.guide/2.directory-structure/1.modules.md +2 -2
  40. package/2.guide/2.directory-structure/1.node_modules.md +1 -1
  41. package/2.guide/2.directory-structure/1.server.md +5 -5
  42. package/2.guide/2.directory-structure/1.shared.md +2 -2
  43. package/2.guide/2.directory-structure/2.env.md +4 -4
  44. package/2.guide/2.directory-structure/2.nuxtignore.md +3 -3
  45. package/2.guide/2.directory-structure/2.nuxtrc.md +2 -2
  46. package/2.guide/2.directory-structure/3.nuxt-config.md +1 -1
  47. package/2.guide/2.directory-structure/3.tsconfig.md +2 -2
  48. package/2.guide/3.going-further/1.experimental-features.md +9 -9
  49. package/2.guide/3.going-further/1.internals.md +10 -10
  50. package/2.guide/3.going-further/10.runtime-config.md +4 -4
  51. package/2.guide/3.going-further/2.hooks.md +3 -3
  52. package/2.guide/3.going-further/3.modules.md +16 -16
  53. package/2.guide/3.going-further/4.kit.md +2 -2
  54. package/2.guide/3.going-further/6.nuxt-app.md +4 -4
  55. package/2.guide/3.going-further/7.layers.md +11 -11
  56. package/2.guide/4.recipes/1.custom-routing.md +11 -11
  57. package/2.guide/4.recipes/2.vite-plugin.md +1 -1
  58. package/2.guide/4.recipes/3.custom-usefetch.md +3 -3
  59. package/2.guide/4.recipes/4.sessions-and-authentication.md +1 -1
  60. package/2.guide/5.best-practices/hydration.md +4 -4
  61. package/2.guide/5.best-practices/performance.md +4 -4
  62. package/3.api/1.components/10.nuxt-picture.md +1 -1
  63. package/3.api/1.components/12.nuxt-route-announcer.md +2 -2
  64. package/3.api/1.components/2.nuxt-page.md +2 -2
  65. package/3.api/1.components/3.nuxt-layout.md +2 -2
  66. package/3.api/1.components/4.nuxt-link.md +3 -3
  67. package/3.api/1.components/5.nuxt-loading-indicator.md +2 -2
  68. package/3.api/2.composables/use-async-data.md +6 -6
  69. package/3.api/2.composables/use-cookie.md +2 -2
  70. package/3.api/2.composables/use-fetch.md +4 -4
  71. package/3.api/2.composables/use-head-safe.md +2 -2
  72. package/3.api/2.composables/use-head.md +2 -2
  73. package/3.api/2.composables/use-hydration.md +1 -1
  74. package/3.api/2.composables/use-lazy-async-data.md +2 -2
  75. package/3.api/2.composables/use-lazy-fetch.md +2 -2
  76. package/3.api/2.composables/use-loading-indicator.md +2 -2
  77. package/3.api/2.composables/use-nuxt-app.md +12 -12
  78. package/3.api/2.composables/use-nuxt-data.md +1 -1
  79. package/3.api/2.composables/use-preview-mode.md +3 -3
  80. package/3.api/2.composables/use-request-event.md +1 -1
  81. package/3.api/2.composables/use-request-fetch.md +2 -2
  82. package/3.api/2.composables/use-request-header.md +1 -1
  83. package/3.api/2.composables/use-request-headers.md +1 -1
  84. package/3.api/2.composables/use-request-url.md +1 -1
  85. package/3.api/2.composables/use-response-header.md +2 -2
  86. package/3.api/2.composables/use-route-announcer.md +1 -1
  87. package/3.api/2.composables/use-route.md +1 -1
  88. package/3.api/2.composables/use-router.md +4 -4
  89. package/3.api/2.composables/use-runtime-hook.md +1 -1
  90. package/3.api/2.composables/use-seo-meta.md +1 -1
  91. package/3.api/2.composables/use-server-seo-meta.md +3 -3
  92. package/3.api/2.composables/use-state.md +1 -1
  93. package/3.api/3.utils/$fetch.md +4 -4
  94. package/3.api/3.utils/abort-navigation.md +1 -1
  95. package/3.api/3.utils/add-route-middleware.md +2 -2
  96. package/3.api/3.utils/call-once.md +1 -1
  97. package/3.api/3.utils/clear-error.md +1 -1
  98. package/3.api/3.utils/clear-nuxt-data.md +1 -1
  99. package/3.api/3.utils/clear-nuxt-state.md +1 -1
  100. package/3.api/3.utils/define-nuxt-plugin.md +3 -3
  101. package/3.api/3.utils/define-nuxt-route-middleware.md +3 -3
  102. package/3.api/3.utils/define-page-meta.md +8 -8
  103. package/3.api/3.utils/define-route-rules.md +2 -2
  104. package/3.api/3.utils/navigate-to.md +1 -1
  105. package/3.api/3.utils/prefetch-components.md +1 -1
  106. package/3.api/3.utils/prerender-routes.md +1 -1
  107. package/3.api/3.utils/refresh-nuxt-data.md +2 -2
  108. package/3.api/3.utils/set-page-layout.md +1 -1
  109. package/3.api/3.utils/set-response-status.md +1 -1
  110. package/3.api/3.utils/show-error.md +2 -2
  111. package/3.api/3.utils/update-app-config.md +1 -1
  112. package/3.api/4.commands/module.md +2 -2
  113. package/3.api/4.commands/prepare.md +1 -1
  114. package/3.api/4.commands/preview.md +2 -2
  115. package/3.api/4.commands/typecheck.md +1 -1
  116. package/3.api/5.kit/10.runtime-config.md +1 -1
  117. package/3.api/5.kit/3.compatibility.md +2 -2
  118. package/3.api/5.kit/4.autoimports.md +1 -1
  119. package/3.api/5.kit/5.components.md +2 -2
  120. package/3.api/5.kit/7.pages.md +3 -3
  121. package/3.api/5.kit/8.layout.md +1 -1
  122. package/3.api/6.advanced/1.hooks.md +2 -2
  123. package/3.api/6.nuxt-config.md +4 -4
  124. package/5.community/2.getting-help.md +1 -1
  125. package/5.community/3.reporting-bugs.md +1 -1
  126. package/5.community/4.contribution.md +10 -10
  127. package/5.community/5.framework-contribution.md +4 -4
  128. package/5.community/6.roadmap.md +1 -1
  129. package/6.bridge/1.overview.md +12 -12
  130. package/6.bridge/2.typescript.md +1 -1
  131. package/6.bridge/3.bridge-composition-api.md +5 -5
  132. package/6.bridge/4.plugins-and-middleware.md +4 -4
  133. package/6.bridge/5.nuxt3-compatible-api.md +9 -9
  134. package/6.bridge/6.meta.md +5 -5
  135. package/6.bridge/7.runtime-config.md +1 -1
  136. package/6.bridge/8.nitro.md +1 -1
  137. package/6.bridge/9.vite.md +1 -1
  138. package/7.migration/1.overview.md +2 -2
  139. package/7.migration/2.configuration.md +5 -5
  140. package/7.migration/20.module-authors.md +6 -6
  141. package/7.migration/3.auto-imports.md +3 -3
  142. package/7.migration/4.meta.md +3 -3
  143. package/7.migration/6.pages-and-layouts.md +8 -8
  144. package/7.migration/7.component-options.md +11 -11
  145. package/7.migration/8.runtime-config.md +3 -3
  146. package/package.json +1 -1
@@ -4,11 +4,11 @@ description: Reduce the differences with Nuxt 3 and reduce the burden of migrati
4
4
  ---
5
5
 
6
6
  ::note
7
- If you're starting a fresh Nuxt 3 project, please skip this section and go to [Nuxt 3 Installation](/docs/getting-started/introduction).
7
+ If you're starting a fresh Nuxt 3 project, please skip this section and go to [Nuxt 3 Installation](/docs/4.x/getting-started/introduction).
8
8
  ::
9
9
 
10
10
  ::warning
11
- Nuxt Bridge provides identical features to Nuxt 3 ([docs](/docs/guide/concepts/auto-imports)) but there are some limitations, notably that [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) composables are not available. Please read the rest of this page for details.
11
+ Nuxt Bridge provides identical features to Nuxt 3 ([docs](/docs/4.x/guide/concepts/auto-imports)) but there are some limitations, notably that [`useAsyncData`](/docs/4.x/api/composables/use-async-data) and [`useFetch`](/docs/4.x/api/composables/use-fetch) composables are not available. Please read the rest of this page for details.
12
12
  ::
13
13
 
14
14
  Bridge is a forward-compatibility layer that allows you to experience many of the new Nuxt 3 features by simply installing and enabling a Nuxt module.
@@ -80,7 +80,7 @@ bun add -D @nuxt/bridge nuxi
80
80
 
81
81
  Please make sure to avoid any CommonJS syntax such as `module.exports`, `require` or `require.resolve` in your config file. It will soon be deprecated and unsupported.
82
82
 
83
- You can use static `import`, dynamic `import()` and `export default` instead. Using TypeScript by renaming to [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) is also possible and recommended.
83
+ You can use static `import`, dynamic `import()` and `export default` instead. Using TypeScript by renaming to [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) is also possible and recommended.
84
84
 
85
85
  ```ts [nuxt.config.ts]
86
86
  import { defineNuxtConfig } from '@nuxt/bridge'
@@ -116,22 +116,22 @@ Try running `nuxt2` once here. You will see that the application works as before
116
116
  With Nuxt Bridge, the migration to Nuxt 3 can proceed in steps.
117
117
  The below `Upgrade Steps` does not need to be done all at once.
118
118
 
119
- - [TypeScript](/docs/bridge/typescript)
119
+ - [TypeScript](/docs/4.x/bridge/typescript)
120
120
 
121
- - [Migrate Legacy Composition API](/docs/bridge/bridge-composition-api)
121
+ - [Migrate Legacy Composition API](/docs/4.x/bridge/bridge-composition-api)
122
122
 
123
- - [Plugins and Middleware](/docs/bridge/plugins-and-middleware)
123
+ - [Plugins and Middleware](/docs/4.x/bridge/plugins-and-middleware)
124
124
 
125
- - [Migrate New Composition API](/docs/bridge/nuxt3-compatible-api)
125
+ - [Migrate New Composition API](/docs/4.x/bridge/nuxt3-compatible-api)
126
126
 
127
- - [Meta Tags](/docs/bridge/meta)
127
+ - [Meta Tags](/docs/4.x/bridge/meta)
128
128
 
129
- - [Runtime Config](/docs/bridge/runtime-config)
129
+ - [Runtime Config](/docs/4.x/bridge/runtime-config)
130
130
 
131
- - [Nitro](/docs/bridge/nitro)
131
+ - [Nitro](/docs/4.x/bridge/nitro)
132
132
 
133
- - [Vite](/docs/bridge/vite)
133
+ - [Vite](/docs/4.x/bridge/vite)
134
134
 
135
135
  ## Migrate from CommonJS to ESM
136
136
 
137
- Nuxt 3 natively supports TypeScript and ECMAScript Modules. Please check [Native ES Modules](/docs/guide/concepts/esm) for more info and upgrading.
137
+ Nuxt 3 natively supports TypeScript and ECMAScript Modules. Please check [Native ES Modules](/docs/4.x/guide/concepts/esm) for more info and upgrading.
@@ -37,7 +37,7 @@ If you are using TypeScript, you can edit your `tsconfig.json` to benefit from a
37
37
  ::note
38
38
  As `.nuxt/tsconfig.json` is generated and not checked into version control, you'll need to generate that file before running your tests. Add `nuxi prepare` as a step before your tests, otherwise you'll see `TS5083: Cannot read file '~/.nuxt/tsconfig.json'`
39
39
 
40
- For modern Nuxt projects, we recommend using [TypeScript project references](/docs/guide/directory-structure/tsconfig) instead of directly extending `.nuxt/tsconfig.json`.
40
+ For modern Nuxt projects, we recommend using [TypeScript project references](/docs/4.x/guide/directory-structure/tsconfig) instead of directly extending `.nuxt/tsconfig.json`.
41
41
  ::
42
42
 
43
43
  ::note
@@ -35,9 +35,9 @@ Because some composables have been removed and don't yet have a replacement, thi
35
35
 
36
36
  You don't have to immediately update your imports yet - Nuxt Bridge will automatically provide a 'shim' for most imports you currently have, to give you time to migrate to the new, Nuxt 3-compatible composables, with the following exceptions:
37
37
 
38
- - `withContext` has been removed. See [below](/docs/bridge/nuxt3-compatible-api#usecontext-and-withcontext).
38
+ - `withContext` has been removed. See [below](/docs/4.x/bridge/nuxt3-compatible-api#usecontext-and-withcontext).
39
39
  - `useStatic` has been removed. There is no current replacement. Feel free to raise a discussion if you have a use case for this.
40
- - `reqRef` and `reqSsrRef`, which were deprecated, have now been removed entirely. Follow the instructions below regarding [ssrRef](/docs/bridge/nuxt3-compatible-api#ssrref-and-shallowssrref) to replace this.
40
+ - `reqRef` and `reqSsrRef`, which were deprecated, have now been removed entirely. Follow the instructions below regarding [ssrRef](/docs/4.x/bridge/nuxt3-compatible-api#ssrref-and-shallowssrref) to replace this.
41
41
 
42
42
  ### Set `bridge.capi`
43
43
 
@@ -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/bridge/bridge-composition-api#definenuxtmiddleware)).
95
95
 
96
96
  Remove the `defineNuxtPlugin` wrapper:
97
97
 
@@ -117,9 +117,9 @@ While this example is valid, Nuxt 3 introduces a new defineNuxtPlugin function t
117
117
 
118
118
  ### `useRouter` and `useRoute`
119
119
 
120
- Nuxt Bridge provides direct replacements for these composables via [`useRouter`](/docs/api/composables/use-router) and `useRoute`.
120
+ Nuxt Bridge provides direct replacements for these composables via [`useRouter`](/docs/4.x/api/composables/use-router) and `useRoute`.
121
121
 
122
- The only key difference is that [`useRoute`](/docs/api/composables/use-route) no longer returns a computed property.
122
+ The only key difference is that [`useRoute`](/docs/4.x/api/composables/use-route) no longer returns a computed property.
123
123
 
124
124
  ```diff
125
125
  - import { useRouter, useRoute } from '@nuxtjs/composition-api'
@@ -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/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/plugins).
11
11
 
12
12
  ```js [app/plugins/hello.ts]
13
13
  export default defineNuxtPlugin(nuxtApp => {
@@ -17,7 +17,7 @@ export default defineNuxtPlugin(nuxtApp => {
17
17
  ```
18
18
 
19
19
  ::note
20
- If you want to use the new Nuxt composables (such as [`useNuxtApp`](/docs/api/composables/use-nuxt-app) or `useRuntimeConfig`) within your plugins, you will need to use the `defineNuxtPlugin` helper for those plugins.
20
+ If you want to use the new Nuxt composables (such as [`useNuxtApp`](/docs/4.x/api/composables/use-nuxt-app) or `useRuntimeConfig`) within your plugins, you will need to use the `defineNuxtPlugin` helper for those plugins.
21
21
  ::
22
22
 
23
23
  ::warning
@@ -28,7 +28,7 @@ Although a compatibility interface is provided via `nuxtApp.vueApp` you should a
28
28
 
29
29
  You can now migrate to the Nuxt 3 middleware API, which is slightly different in format from Nuxt 2.
30
30
 
31
- Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/guide/directory-structure/app/middleware).
31
+ Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/4.x/guide/directory-structure/app/middleware).
32
32
 
33
33
  ```ts twoslash
34
34
  export default defineNuxtRouteMiddleware((to) => {
@@ -44,7 +44,7 @@ Use of `defineNuxtRouteMiddleware` is not supported outside of the `app/middlewa
44
44
 
45
45
  ## definePageMeta
46
46
 
47
- You can also use [`definePageMeta`](/docs/api/utils/define-page-meta) in Nuxt Bridge.
47
+ You can also use [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) in Nuxt Bridge.
48
48
 
49
49
  You can be enabled with the `macros.pageMeta` option in your configuration file
50
50
 
@@ -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/api/composables/use-state) with a global/ambient context, because of the danger of shared state across requests.)
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/4.x/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/api/composables/use-state).
27
+ You can read more about how to use this composable in [the Nuxt 3 docs](/docs/4.x/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/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.
35
+ This function has been removed, but its use cases can be met by using [`useNuxtApp`](/docs/4.x/api/composables/use-nuxt-app) or [`useState`](/docs/4.x/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'
@@ -82,14 +82,14 @@ const wrapProperty = (property, makeComputed = true) => () => {
82
82
 
83
83
  ## `useAsync` and `useFetch`
84
84
 
85
- 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).
85
+ These two composables can be replaced with `useLazyAsyncData` and `useLazyFetch`, which are documented [in the Nuxt 3 docs](/docs/4.x/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).
86
86
 
87
87
  ::important
88
88
  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`).
89
89
  ::
90
90
 
91
91
  ::warning
92
- The `useLazyFetch` must have been configured for [Nitro](/docs/bridge/nitro).
92
+ The `useLazyFetch` must have been configured for [Nitro](/docs/4.x/bridge/nitro).
93
93
  ::
94
94
 
95
95
  Migrating to the new composables from `useAsync`:
@@ -150,7 +150,7 @@ title.value = 'new title'
150
150
  Be careful not to use both `useNuxt2Meta()` and the Options API `head()` within the same component, as behavior may be unpredictable.
151
151
  ::
152
152
 
153
- Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the [`useHead`](/docs/api/composables/use-head) composable.
153
+ Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the [`useHead`](/docs/4.x/api/composables/use-head) composable.
154
154
 
155
155
  ```diff
156
156
  <script setup>
@@ -172,9 +172,9 @@ export default defineNuxtConfig({
172
172
  })
173
173
  ```
174
174
 
175
- 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.
175
+ This [`useHead`](/docs/4.x/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/4.x/api/composables/use-head) , as they may conflict.
176
176
 
177
- For more information on how to use this composable, see [the Nuxt 3 docs](/docs/getting-started/seo-meta).
177
+ For more information on how to use this composable, see [the Nuxt 3 docs](/docs/4.x/getting-started/seo-meta).
178
178
 
179
179
  ### Explicit Imports
180
180
 
@@ -201,4 +201,4 @@ export default defineNuxtConfig({
201
201
  })
202
202
  ```
203
203
 
204
- This will disable auto-imports completely but it's still possible to use [explicit imports](#explicit-imports) from `#imports`.
204
+ This will disable auto-imports completely but it's still possible to use [explicit imports](/docs/bridge/nuxt3-compatible-api#explicit-imports) from `#imports`.
@@ -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/api/composables/use-head) .
6
+ If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/4.x/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
 
@@ -59,7 +59,7 @@ export default defineNuxtConfig({
59
59
 
60
60
  ## `useHead` Composables
61
61
 
62
- Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new [`useHead`](/docs/api/composables/use-head) composable.
62
+ Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new [`useHead`](/docs/4.x/api/composables/use-head) composable.
63
63
 
64
64
  ```vue
65
65
  <script setup lang="ts">
@@ -70,14 +70,14 @@ useHead({
70
70
  ```
71
71
 
72
72
  ::tip
73
- This [`useHead`](/docs/api/composables/use-head) composable uses `@unhead/vue` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
73
+ This [`useHead`](/docs/4.x/api/composables/use-head) composable uses `@unhead/vue` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
74
74
  ::
75
75
 
76
76
  ::warning
77
- We recommend not using the native Nuxt 2 `head()` properties in addition to [`useHead`](/docs/api/composables/use-head) , as they may conflict.
77
+ We recommend not using the native Nuxt 2 `head()` properties in addition to [`useHead`](/docs/4.x/api/composables/use-head) , as they may conflict.
78
78
  ::
79
79
 
80
- For more information on how to use this composable, see [the docs](/docs/getting-started/seo-meta).
80
+ For more information on how to use this composable, see [the docs](/docs/4.x/getting-started/seo-meta).
81
81
 
82
82
  ## Options API
83
83
 
@@ -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/bridge/nitro) must have been configured.
7
+ When using `runtimeConfig` option, [nitro](/docs/4.x/bridge/nitro) must have been configured.
8
8
  ::
9
9
 
10
10
  ## Update Runtime Config
@@ -49,7 +49,7 @@ bun add -D nuxi
49
49
 
50
50
  ### Nuxi
51
51
 
52
- 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:
52
+ Nuxt 3 introduced the new Nuxt CLI command [`nuxi`](/docs/4.x/api/commands/add). Update your scripts as follows to leverage the better support from Nuxt Bridge:
53
53
 
54
54
  ```diff
55
55
  {
@@ -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/bridge/nitro) must have been configured.
7
+ When using `vite`, [nitro](/docs/4.x/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/bridge/overview).
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/4.x/bridge/overview).
20
20
  ::
21
21
 
22
22
  ## Next Steps
23
23
 
24
- - Learn about differences in [configuration](/docs/migration/configuration)
24
+ - Learn about differences in [configuration](/docs/4.x/migration/configuration)
@@ -98,7 +98,7 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
98
98
 
99
99
  #### ESM Syntax
100
100
 
101
- 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.
101
+ Nuxt 3 is an [ESM native framework](/docs/4.x/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.
102
102
 
103
103
  1. Change `module.exports` to `export default`
104
104
  1. Change `const lib = require('lib')` to `import lib from 'lib'`
@@ -131,7 +131,7 @@ Nuxt and Nuxt Modules are now build-time-only.
131
131
  ```
132
132
 
133
133
  ::tip
134
- 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/going-further/modules).
134
+ If you are a module author, you can check out [more information about module compatibility](/docs/4.x/migration/module-authors) and [our module author guide](/docs/4.x/guide/going-further/modules).
135
135
  ::
136
136
 
137
137
  ## Directory Changes
@@ -144,7 +144,7 @@ The `static/` (for storing static assets) has been renamed to `public/`. You can
144
144
 
145
145
  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.
146
146
 
147
- You can read more about Nuxt's TypeScript support [in the docs](/docs/guide/concepts/typescript).
147
+ You can read more about Nuxt's TypeScript support [in the docs](/docs/4.x/guide/concepts/typescript).
148
148
 
149
149
  ::note
150
150
  Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/tsc) with `nuxt typecheck` command.
@@ -175,7 +175,7 @@ Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language
175
175
  ```
176
176
 
177
177
  1. Run `npx nuxt prepare` to generate the tsconfig files.
178
- 1. Install Volar following the instructions in the [docs](/docs/getting-started/introduction#prerequisites).
178
+ 1. Install Volar following the instructions in the [docs](/docs/4.x/getting-started/installation#prerequisites).
179
179
 
180
180
  ## Vue Changes
181
181
 
@@ -225,7 +225,7 @@ export const useMainStore = defineStore('main', {
225
225
  })
226
226
  ```
227
227
 
228
- Create a [plugin](/docs/guide/directory-structure/plugins) file to globalize your store:
228
+ Create a [plugin](/docs/4.x/guide/directory-structure/plugins) file to globalize your store:
229
229
 
230
230
  ```ts [app/plugins/pinia.ts]
231
231
  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/guide/going-further/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.
10
+ We have prepared a [Dedicated Guide](/docs/4.x/guide/going-further/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.
@@ -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/bridge/overview#update-nuxtconfig))
36
+ If you have a fixture or example in your module, add `@nuxt/bridge` package to its config (see [example](/docs/4.x/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/guide/concepts/esm) for more info and upgrading.
40
+ Nuxt 3 natively supports TypeScript and ECMAScript Modules. Please check [Native ES Modules](/docs/4.x/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/api/nuxt-config#runtimeconfig) (instead of `modules`). For example:
72
+ Your module should work even if it's only added to [`buildModules`](/docs/4.x/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/api/nuxt-config#runtimeconfig) instead.
74
+ - Avoid updating `process.env` within a Nuxt module and reading by a Nuxt plugin; use [`runtimeConfig`](/docs/4.x/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/guide/going-further/modules).
81
+ Continue reading about Nuxt 3 modules in the [Modules Author Guide](/docs/4.x/guide/going-further/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/migration/configuration#typescript) to use Nuxt's TypeScript support.
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/4.x/migration/configuration#typescript) to use Nuxt's TypeScript support.
8
8
  ::
9
9
 
10
- [Read more about auto imports](/docs/guide/concepts/auto-imports)
10
+ [Read more about auto imports](/docs/4.x/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/guide/directory-structure/app/components) for more information.
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/4.x/guide/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.
@@ -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/api/composables/use-head) [composable](/docs/getting-started/seo-meta)
9
- 3. Through [global meta components](/docs/getting-started/seo-meta)
8
+ 2. Through the [`useHead`](/docs/4.x/api/composables/use-head) [composable](/docs/4.x/getting-started/seo-meta)
9
+ 3. Through [global meta components](/docs/4.x/getting-started/seo-meta)
10
10
 
11
11
  You can customize `title`, `titleTemplate`, `base`, `script`, `noscript`, `style`, `meta`, `link`, `htmlAttrs` and `bodyAttrs`.
12
12
 
@@ -19,7 +19,7 @@ Nuxt currently uses [`Unhead`](https://github.com/unjs/unhead) to manage your me
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/api/composables/use-head) . You might also consider using the built-in meta-components.
22
+ 2. If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/4.x/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
@@ -19,13 +19,13 @@ This file is a great place to put any custom code that needs to be run once when
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/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).
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/guide/directory-structure/app/layouts).
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/4.x/guide/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/api/utils/define-page-meta) to select the layout used by your page.
45
+ 2. Use [`definePageMeta`](/docs/4.x/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/getting-started/error-handling). If you want to ensure that this page uses a layout, you can use [`<NuxtLayout>`](/docs/guide/directory-structure/app/layouts) directly within `error.vue`:
57
+ 3. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/4.x/getting-started/error-handling). If you want to ensure that this page uses a layout, you can use [`<NuxtLayout>`](/docs/4.x/guide/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/guide/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.
70
+ Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a [`app/pages/`](/docs/4.x/guide/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
 
@@ -96,7 +96,7 @@ If you have been defining transitions for your page or layout directly in your c
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/api/composables/use-route) and [`useRouter`](/docs/api/composables/use-router) composables.
99
+ 3. If you're using the Composition API, you can also migrate `this.$route` and `this.$router` to use [`useRoute`](/docs/4.x/api/composables/use-route) and [`useRouter`](/docs/4.x/api/composables/use-router) composables.
100
100
 
101
101
  #### Example: Dynamic Routes
102
102
 
@@ -182,7 +182,7 @@ definePageMeta({
182
182
 
183
183
  ## `<NuxtLink>` Component
184
184
 
185
- 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>`.
185
+ Most of the syntax and functionality are the same for the global [NuxtLink](/docs/4.x/api/components/nuxt-link) component. If you have been using the shortcut `<NLink>` format, you should update this to use `<NuxtLink>`.
186
186
 
187
187
  `<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.
188
188
 
@@ -193,7 +193,7 @@ Most of the syntax and functionality are the same for the global [NuxtLink](/doc
193
193
  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.
194
194
 
195
195
  ::warning
196
- Make sure to always `await` on [`navigateTo`](/docs/api/utils/navigate-to) or chain its result by returning from functions.
196
+ Make sure to always `await` on [`navigateTo`](/docs/4.x/api/utils/navigate-to) or chain its result by returning from functions.
197
197
  ::
198
198
 
199
199
  ::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/getting-started/data-fetching).
8
+ Nuxt 3 provides new options for [fetching data from an API](/docs/4.x/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/getting-starte
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/api/utils/dollarfetch) method which is using [unjs/ofetch](https://github.com/unjs/ofetch). It has a number of benefits, including:
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/4.x/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/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.)
19
+ 1. It will handle 'smartly' making [direct API calls](/docs/4.x/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/guide/concepts/server-engine#direct-api-calls) or [fetching data](/docs/getting-started/data-fetching).
23
+ You can read more [about direct API calls](/docs/4.x/guide/concepts/server-engine#direct-api-calls) or [fetching data](/docs/4.x/getting-started/data-fetching).
24
24
 
25
25
  ### Composables
26
26
 
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.
27
+ Nuxt 3 provides new composables for fetching data: [`useAsyncData`](/docs/4.x/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,13 +57,13 @@ 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/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.
60
+ Despite the names, [`useFetch`](/docs/4.x/api/composables/use-fetch) is not a direct replacement of the `fetch()` hook. Rather, [`useAsyncData`](/docs/4.x/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/4.x/api/composables/use-fetch) is a convenience wrapper around [`useAsyncData`](/docs/4.x/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/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.
65
+ 1. Replace the `asyncData` hook with [`useAsyncData`](/docs/4.x/api/composables/use-async-data) or [`useFetch`](/docs/4.x/api/composables/use-fetch) in your page/component.
66
+ 2. Replace the `fetch` hook with [`useAsyncData`](/docs/4.x/api/composables/use-async-data) or [`useFetch`](/docs/4.x/api/composables/use-fetch) in your component.
67
67
 
68
68
  ## `head`
69
69
 
@@ -71,7 +71,7 @@ Despite the names, [`useFetch`](/docs/api/composables/use-fetch) is not a direct
71
71
 
72
72
  ## `key`
73
73
 
74
- You can now define a key within the [`definePageMeta`](/docs/api/utils/define-page-meta) compiler macro.
74
+ You can now define a key within the [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) compiler macro.
75
75
 
76
76
  ```diff [app/pages/index.vue]
77
77
  - <script>
@@ -103,8 +103,8 @@ This feature is not yet supported in Nuxt 3.
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/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.
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/4.x/guide/recipes/custom-routing#router-options)) for more info.
107
+ Similar to `key`, specify it within the [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) compiler macro.
108
108
 
109
109
  ```diff [app/pages/index.vue]
110
110
  - <script>
@@ -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/api/composables/use-runtime-config) composable in your setup method (or Nuxt plugin).
8
+ When referencing these variables within your components, you will have to use the [`useRuntimeConfig`](/docs/4.x/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/api/composables/use-runtime-config) without any import.
10
+ In the `server/` portion of your app, you can use [`useRuntimeConfig`](/docs/4.x/api/composables/use-runtime-config) without any import.
11
11
 
12
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/api/composables/use-runtime-config) throughout the Vue part of your app.
17
+ 2. Migrate `process.env` to [`useRuntimeConfig`](/docs/4.x/api/composables/use-runtime-config) throughout the Vue part of your app.
18
18
 
19
19
  ::code-group
20
20
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuxt/docs-nightly",
3
- "version": "4.1.3-29300098.2f71703a",
3
+ "version": "4.1.3-29303775.dc69e26c",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/nuxt/nuxt.git",