@nuxt/docs 3.19.2 → 3.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (192) hide show
  1. package/1.getting-started/01.introduction.md +2 -2
  2. package/1.getting-started/02.installation.md +2 -1
  3. package/1.getting-started/03.configuration.md +29 -29
  4. package/1.getting-started/04.views.md +7 -7
  5. package/1.getting-started/05.assets.md +15 -9
  6. package/1.getting-started/06.styling.md +55 -45
  7. package/1.getting-started/07.routing.md +12 -12
  8. package/1.getting-started/08.seo-meta.md +55 -42
  9. package/1.getting-started/09.transitions.md +47 -42
  10. package/1.getting-started/10.data-fetching.md +90 -67
  11. package/1.getting-started/11.state-management.md +22 -15
  12. package/1.getting-started/12.error-handling.md +11 -9
  13. package/1.getting-started/13.server.md +3 -3
  14. package/1.getting-started/14.layers.md +21 -15
  15. package/1.getting-started/15.prerendering.md +28 -28
  16. package/1.getting-started/16.deployment.md +9 -9
  17. package/1.getting-started/17.testing.md +43 -43
  18. package/1.getting-started/18.upgrade.md +66 -61
  19. package/2.guide/0.index.md +3 -3
  20. package/2.guide/{2.directory-structure → 1.directory-structure}/.navigation.yml +1 -1
  21. package/2.guide/{2.directory-structure → 1.directory-structure}/0.nuxt.md +3 -3
  22. package/2.guide/{2.directory-structure → 1.directory-structure}/0.output.md +3 -3
  23. package/2.guide/{2.directory-structure → 1.directory-structure}/1.assets.md +3 -3
  24. package/2.guide/{2.directory-structure → 1.directory-structure}/1.components.md +41 -24
  25. package/2.guide/{2.directory-structure → 1.directory-structure}/1.composables.md +11 -11
  26. package/2.guide/{2.directory-structure → 1.directory-structure}/1.content.md +7 -4
  27. package/2.guide/{2.directory-structure → 1.directory-structure}/1.layouts.md +16 -12
  28. package/2.guide/{2.directory-structure → 1.directory-structure}/1.middleware.md +28 -22
  29. package/2.guide/{2.directory-structure → 1.directory-structure}/1.modules.md +6 -6
  30. package/2.guide/{2.directory-structure → 1.directory-structure}/1.node_modules.md +2 -2
  31. package/2.guide/{2.directory-structure → 1.directory-structure}/1.pages.md +33 -31
  32. package/2.guide/{2.directory-structure → 1.directory-structure}/1.plugins.md +25 -25
  33. package/2.guide/{2.directory-structure → 1.directory-structure}/1.public.md +2 -2
  34. package/2.guide/{2.directory-structure → 1.directory-structure}/1.server.md +34 -34
  35. package/2.guide/{2.directory-structure → 1.directory-structure}/1.shared.md +6 -6
  36. package/2.guide/{2.directory-structure → 1.directory-structure}/1.utils.md +5 -5
  37. package/2.guide/{2.directory-structure → 1.directory-structure}/2.env.md +5 -5
  38. package/2.guide/{2.directory-structure → 1.directory-structure}/2.gitignore.md +1 -1
  39. package/2.guide/{2.directory-structure → 1.directory-structure}/2.nuxtignore.md +4 -4
  40. package/2.guide/{2.directory-structure → 1.directory-structure}/2.nuxtrc.md +3 -3
  41. package/2.guide/{2.directory-structure → 1.directory-structure}/3.app-config.md +12 -12
  42. package/2.guide/{2.directory-structure → 1.directory-structure}/3.app.md +4 -4
  43. package/2.guide/{2.directory-structure → 1.directory-structure}/3.error.md +6 -6
  44. package/2.guide/{2.directory-structure → 1.directory-structure}/3.nuxt-config.md +2 -2
  45. package/2.guide/{2.directory-structure → 1.directory-structure}/3.package.md +1 -1
  46. package/2.guide/{2.directory-structure → 1.directory-structure}/3.tsconfig.md +3 -3
  47. package/2.guide/{1.concepts → 2.concepts}/1.auto-imports.md +18 -18
  48. package/2.guide/{1.concepts → 2.concepts}/10.nuxt-lifecycle.md +10 -10
  49. package/2.guide/{1.concepts → 2.concepts}/2.vuejs-development.md +9 -9
  50. package/2.guide/{1.concepts → 2.concepts}/3.rendering.md +21 -19
  51. package/2.guide/{1.concepts → 2.concepts}/4.server-engine.md +5 -5
  52. package/2.guide/{1.concepts → 2.concepts}/5.modules.md +4 -4
  53. package/2.guide/{1.concepts → 2.concepts}/7.esm.md +20 -14
  54. package/2.guide/{1.concepts → 2.concepts}/8.typescript.md +11 -11
  55. package/2.guide/3.going-further/1.events.md +2 -2
  56. package/2.guide/3.going-further/1.experimental-features.md +168 -80
  57. package/2.guide/3.going-further/1.features.md +15 -15
  58. package/2.guide/3.going-further/1.internals.md +25 -25
  59. package/2.guide/3.going-further/10.runtime-config.md +11 -11
  60. package/2.guide/3.going-further/2.hooks.md +11 -11
  61. package/2.guide/3.going-further/3.modules.md +119 -101
  62. package/2.guide/3.going-further/4.kit.md +5 -5
  63. package/2.guide/3.going-further/6.nuxt-app.md +5 -5
  64. package/2.guide/3.going-further/7.layers.md +75 -58
  65. package/2.guide/3.going-further/9.debugging.md +2 -2
  66. package/2.guide/4.recipes/1.custom-routing.md +31 -31
  67. package/2.guide/4.recipes/2.vite-plugin.md +45 -4
  68. package/2.guide/4.recipes/3.custom-usefetch.md +12 -12
  69. package/2.guide/4.recipes/4.sessions-and-authentication.md +34 -20
  70. package/2.guide/5.best-practices/hydration.md +4 -4
  71. package/2.guide/5.best-practices/performance.md +12 -12
  72. package/3.api/1.components/1.client-only.md +6 -3
  73. package/3.api/1.components/1.nuxt-client-fallback.md +9 -6
  74. package/3.api/1.components/10.nuxt-picture.md +1 -1
  75. package/3.api/1.components/11.teleports.md +4 -1
  76. package/3.api/1.components/12.nuxt-route-announcer.md +9 -9
  77. package/3.api/1.components/13.nuxt-time.md +49 -18
  78. package/3.api/1.components/2.nuxt-page.md +4 -4
  79. package/3.api/1.components/3.nuxt-layout.md +11 -6
  80. package/3.api/1.components/4.nuxt-link.md +40 -20
  81. package/3.api/1.components/5.nuxt-loading-indicator.md +2 -2
  82. package/3.api/1.components/6.nuxt-error-boundary.md +11 -9
  83. package/3.api/2.composables/on-prehydrate.md +2 -2
  84. package/3.api/2.composables/use-async-data.md +23 -19
  85. package/3.api/2.composables/use-cookie.md +28 -20
  86. package/3.api/2.composables/use-error.md +1 -1
  87. package/3.api/2.composables/use-fetch.md +59 -29
  88. package/3.api/2.composables/use-head-safe.md +7 -7
  89. package/3.api/2.composables/use-head.md +4 -4
  90. package/3.api/2.composables/use-hydration.md +6 -6
  91. package/3.api/2.composables/use-lazy-async-data.md +2 -2
  92. package/3.api/2.composables/use-lazy-fetch.md +2 -2
  93. package/3.api/2.composables/use-loading-indicator.md +12 -12
  94. package/3.api/2.composables/use-nuxt-app.md +19 -19
  95. package/3.api/2.composables/use-nuxt-data.md +8 -8
  96. package/3.api/2.composables/use-preview-mode.md +15 -18
  97. package/3.api/2.composables/use-request-event.md +1 -1
  98. package/3.api/2.composables/use-request-fetch.md +3 -3
  99. package/3.api/2.composables/use-request-header.md +1 -1
  100. package/3.api/2.composables/use-request-headers.md +4 -4
  101. package/3.api/2.composables/use-request-url.md +1 -1
  102. package/3.api/2.composables/use-response-header.md +9 -10
  103. package/3.api/2.composables/use-route-announcer.md +4 -4
  104. package/3.api/2.composables/use-route.md +1 -1
  105. package/3.api/2.composables/use-router.md +9 -7
  106. package/3.api/2.composables/use-runtime-config.md +6 -6
  107. package/3.api/2.composables/use-runtime-hook.md +2 -2
  108. package/3.api/2.composables/use-seo-meta.md +2 -2
  109. package/3.api/2.composables/use-server-seo-meta.md +4 -4
  110. package/3.api/2.composables/use-state.md +4 -4
  111. package/3.api/3.utils/$fetch.md +9 -7
  112. package/3.api/3.utils/abort-navigation.md +3 -3
  113. package/3.api/3.utils/add-route-middleware.md +5 -5
  114. package/3.api/3.utils/call-once.md +4 -4
  115. package/3.api/3.utils/clear-error.md +2 -2
  116. package/3.api/3.utils/clear-nuxt-data.md +3 -3
  117. package/3.api/3.utils/clear-nuxt-state.md +3 -3
  118. package/3.api/3.utils/create-error.md +1 -1
  119. package/3.api/3.utils/define-lazy-hydration-component.md +13 -13
  120. package/3.api/3.utils/define-nuxt-component.md +5 -5
  121. package/3.api/3.utils/define-nuxt-plugin.md +12 -12
  122. package/3.api/3.utils/define-nuxt-route-middleware.md +5 -5
  123. package/3.api/3.utils/define-page-meta.md +21 -21
  124. package/3.api/3.utils/define-route-rules.md +5 -5
  125. package/3.api/3.utils/navigate-to.md +10 -10
  126. package/3.api/3.utils/prefetch-components.md +1 -1
  127. package/3.api/3.utils/preload-components.md +1 -1
  128. package/3.api/3.utils/prerender-routes.md +3 -3
  129. package/3.api/3.utils/refresh-cookie.md +3 -3
  130. package/3.api/3.utils/refresh-nuxt-data.md +11 -6
  131. package/3.api/3.utils/reload-nuxt-app.md +2 -2
  132. package/3.api/3.utils/set-page-layout.md +1 -1
  133. package/3.api/3.utils/set-response-status.md +2 -2
  134. package/3.api/3.utils/show-error.md +4 -4
  135. package/3.api/3.utils/update-app-config.md +3 -2
  136. package/3.api/4.commands/add.md +1 -1
  137. package/3.api/4.commands/analyze.md +2 -1
  138. package/3.api/4.commands/build.md +2 -1
  139. package/3.api/4.commands/dev.md +5 -4
  140. package/3.api/4.commands/generate.md +2 -1
  141. package/3.api/4.commands/init.md +3 -2
  142. package/3.api/4.commands/module.md +4 -4
  143. package/3.api/4.commands/prepare.md +7 -2
  144. package/3.api/4.commands/preview.md +5 -4
  145. package/3.api/4.commands/test.md +40 -0
  146. package/3.api/4.commands/typecheck.md +4 -2
  147. package/3.api/4.commands/upgrade.md +3 -3
  148. package/3.api/5.kit/1.modules.md +123 -37
  149. package/3.api/5.kit/10.runtime-config.md +1 -1
  150. package/3.api/5.kit/10.templates.md +8 -6
  151. package/3.api/5.kit/11.nitro.md +66 -62
  152. package/3.api/5.kit/12.resolving.md +2 -2
  153. package/3.api/5.kit/14.builder.md +61 -4
  154. package/3.api/5.kit/15.examples.md +5 -7
  155. package/3.api/5.kit/16.layers.md +26 -26
  156. package/3.api/5.kit/3.compatibility.md +12 -12
  157. package/3.api/5.kit/4.autoimports.md +13 -13
  158. package/3.api/5.kit/5.components.md +8 -7
  159. package/3.api/5.kit/6.context.md +3 -3
  160. package/3.api/5.kit/7.pages.md +7 -7
  161. package/3.api/5.kit/8.layout.md +2 -2
  162. package/3.api/5.kit/9.head.md +132 -0
  163. package/3.api/5.kit/9.plugins.md +6 -5
  164. package/3.api/6.advanced/1.hooks.md +4 -4
  165. package/3.api/6.advanced/2.import-meta.md +3 -3
  166. package/5.community/2.getting-help.md +1 -1
  167. package/5.community/3.reporting-bugs.md +1 -1
  168. package/5.community/4.contribution.md +6 -6
  169. package/5.community/5.framework-contribution.md +3 -3
  170. package/5.community/6.roadmap.md +1 -1
  171. package/6.bridge/1.overview.md +13 -13
  172. package/6.bridge/10.configuration.md +2 -1
  173. package/6.bridge/2.typescript.md +2 -2
  174. package/6.bridge/3.bridge-composition-api.md +6 -6
  175. package/6.bridge/4.plugins-and-middleware.md +9 -9
  176. package/6.bridge/5.nuxt3-compatible-api.md +19 -16
  177. package/6.bridge/6.meta.md +20 -19
  178. package/6.bridge/7.runtime-config.md +1 -1
  179. package/6.bridge/8.nitro.md +3 -3
  180. package/6.bridge/9.vite.md +4 -4
  181. package/7.migration/1.overview.md +2 -2
  182. package/7.migration/2.configuration.md +22 -20
  183. package/7.migration/20.module-authors.md +6 -6
  184. package/7.migration/3.auto-imports.md +3 -3
  185. package/7.migration/4.meta.md +20 -17
  186. package/7.migration/5.plugins-and-middleware.md +5 -5
  187. package/7.migration/6.pages-and-layouts.md +23 -19
  188. package/7.migration/7.component-options.md +14 -14
  189. package/7.migration/8.runtime-config.md +6 -6
  190. package/package.json +1 -1
  191. /package/2.guide/{1.concepts → 2.concepts}/.navigation.yml +0 -0
  192. /package/2.guide/{1.concepts → 2.concepts}/9.code-style.md +0 -0
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/api/composables/use-head) .
6
+ If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/3.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
 
@@ -13,11 +13,12 @@ If you need to use the Options API, there is a `head()` method you can use when
13
13
 
14
14
  ```js
15
15
  import { defineNuxtConfig } from '@nuxt/bridge'
16
+
16
17
  export default defineNuxtConfig({
17
18
  bridge: {
18
19
  meta: true,
19
- nitro: false // If migration to Nitro is complete, set to true
20
- }
20
+ nitro: false, // If migration to Nitro is complete, set to true
21
+ },
21
22
  })
22
23
  ```
23
24
 
@@ -34,9 +35,9 @@ export default {
34
35
  meta: [
35
36
  { charset: 'utf-8' },
36
37
  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
37
- { hid: 'description', name: 'description', content: 'Meta description' }
38
- ]
39
- }
38
+ { hid: 'description', name: 'description', content: 'Meta description' },
39
+ ],
40
+ },
40
41
  }
41
42
  ```
42
43
 
@@ -48,10 +49,10 @@ export default defineNuxtConfig({
48
49
  meta: [
49
50
  { charset: 'utf-8' },
50
51
  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
51
- { name: 'description', content: 'Meta description' }
52
- ]
53
- }
54
- }
52
+ { name: 'description', content: 'Meta description' },
53
+ ],
54
+ },
55
+ },
55
56
  })
56
57
  ```
57
58
 
@@ -59,7 +60,7 @@ export default defineNuxtConfig({
59
60
 
60
61
  ## `useHead` Composables
61
62
 
62
- Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new [`useHead`](/docs/api/composables/use-head) composable.
63
+ Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new [`useHead`](/docs/3.x/api/composables/use-head) composable.
63
64
 
64
65
  ```vue
65
66
  <script setup lang="ts">
@@ -70,14 +71,14 @@ useHead({
70
71
  ```
71
72
 
72
73
  ::tip
73
- This [`useHead`](/docs/api/composables/use-head) composable uses `@unhead/vue` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
74
+ This [`useHead`](/docs/3.x/api/composables/use-head) composable uses `@unhead/vue` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
74
75
  ::
75
76
 
76
77
  ::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.
78
+ We recommend not using the native Nuxt 2 `head()` properties in addition to [`useHead`](/docs/3.x/api/composables/use-head) , as they may conflict.
78
79
  ::
79
80
 
80
- For more information on how to use this composable, see [the docs](/docs/getting-started/seo-meta).
81
+ For more information on how to use this composable, see [the docs](/docs/3.x/getting-started/seo-meta).
81
82
 
82
83
  ## Options API
83
84
 
@@ -90,10 +91,10 @@ export default defineNuxtComponent({
90
91
  return {
91
92
  meta: [{
92
93
  name: 'description',
93
- content: 'This is my page description.'
94
- }]
94
+ content: 'This is my page description.',
95
+ }],
95
96
  }
96
- }
97
+ },
97
98
  })
98
99
  </script>
99
100
  ```
@@ -110,8 +111,8 @@ If you want to use a function (for full control), then this cannot be set in you
110
111
  <script setup lang="ts">
111
112
  useHead({
112
113
  titleTemplate: (titleChunk) => {
113
- return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
114
- }
114
+ return titleChunk ? `${titleChunk} - Site Title` : 'Site Title'
115
+ },
115
116
  })
116
117
  </script>
117
118
  ```
package/6.bridge/7.runtime-config.md CHANGED
@@ -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/3.x/bridge/nitro) must have been configured.
8
8
  ::
9
9
 
10
10
  ## Update Runtime Config
package/6.bridge/8.nitro.md CHANGED
@@ -14,8 +14,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
14
14
 
15
15
  export default defineNuxtConfig({
16
16
  bridge: {
17
- nitro: true
18
- }
17
+ nitro: true,
18
+ },
19
19
  })
20
20
  ```
21
21
 
@@ -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/3.x/api/commands/add). Update your scripts as follows to leverage the better support from Nuxt Bridge:
53
53
 
54
54
  ```diff
55
55
  {
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/bridge/nitro) must have been configured.
7
+ When using `vite`, [nitro](/docs/3.x/bridge/nitro) must have been configured.
8
8
  ::
9
9
 
10
10
  ## Remove Modules
@@ -19,8 +19,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
19
19
  export default defineNuxtConfig({
20
20
  bridge: {
21
21
  vite: true,
22
- nitro: true
23
- }
22
+ nitro: true,
23
+ },
24
24
  })
25
25
  ```
26
26
 
@@ -32,6 +32,6 @@ import { defineNuxtConfig } from '@nuxt/bridge'
32
32
  export default defineNuxtConfig({
33
33
  vite: {
34
34
  // Config for Vite
35
- }
35
+ },
36
36
  })
37
37
  ```
package/7.migration/1.overview.md CHANGED
@@ -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/3.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/3.x/migration/configuration)
package/7.migration/2.configuration.md CHANGED
@@ -40,8 +40,8 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
40
40
  router: {
41
41
  extendRoutes (routes) {
42
42
  //
43
- }
44
- }
43
+ },
44
+ },
45
45
  }
46
46
  ```
47
47
 
@@ -50,8 +50,8 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
50
50
  hooks: {
51
51
  'pages:extend' (routes) {
52
52
  //
53
- }
54
- }
53
+ },
54
+ },
55
55
  })
56
56
  ```
57
57
 
@@ -64,8 +64,8 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
64
64
  ```ts [Nuxt 2]
65
65
  export default {
66
66
  router: {
67
- routeNameSplitter: '/'
68
- }
67
+ routeNameSplitter: '/',
68
+ },
69
69
  }
70
70
  ```
71
71
 
@@ -78,8 +78,10 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
78
78
  const routeNameSplitter = '/'
79
79
  const root = createResolver(import.meta.url).resolve('./pages')
80
80
 
81
- function updateName(routes) {
82
- if (!routes) return
81
+ function updateName (routes) {
82
+ if (!routes) {
83
+ return
84
+ }
83
85
 
84
86
  for (const route of routes) {
85
87
  const relativePath = route.file.substring(root.length + 1)
@@ -98,7 +100,7 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
98
100
 
99
101
  #### ESM Syntax
100
102
 
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.
103
+ Nuxt 3 is an [ESM native framework](/docs/3.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
104
 
103
105
  1. Change `module.exports` to `export default`
104
106
  1. Change `const lib = require('lib')` to `import lib from 'lib'`
@@ -131,7 +133,7 @@ Nuxt and Nuxt Modules are now build-time-only.
131
133
  ```
132
134
 
133
135
  ::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).
136
+ If you are a module author, you can check out [more information about module compatibility](/docs/3.x/migration/module-authors) and [our module author guide](/docs/3.x/guide/going-further/modules).
135
137
  ::
136
138
 
137
139
  ## Directory Changes
@@ -144,7 +146,7 @@ The `static/` (for storing static assets) has been renamed to `public/`. You can
144
146
 
145
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.
146
148
 
147
- You can read more about Nuxt's TypeScript support [in the docs](/docs/guide/concepts/typescript).
149
+ You can read more about Nuxt's TypeScript support [in the docs](/docs/3.x/guide/concepts/typescript).
148
150
 
149
151
  ::note
150
152
  Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/tsc) with `nuxt typecheck` command.
@@ -161,7 +163,7 @@ Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language
161
163
  ```
162
164
 
163
165
  1. Run `npx nuxt prepare` to generate `.nuxt/tsconfig.json`.
164
- 1. Install Volar following the instructions in the [docs](/docs/getting-started/introduction#prerequisites).
166
+ 1. Install Volar following the instructions in the [docs](/docs/3.x/getting-started/introduction#prerequisites).
165
167
 
166
168
  ## Vue Changes
167
169
 
@@ -186,10 +188,10 @@ yarn add pinia @pinia/nuxt
186
188
  Enable the module in your nuxt configuration:
187
189
 
188
190
  ```ts [nuxt.config.ts]
189
- import { defineNuxtConfig } from 'nuxt/config';
191
+ import { defineNuxtConfig } from 'nuxt/config'
190
192
 
191
193
  export default defineNuxtConfig({
192
- modules: ['@pinia/nuxt']
194
+ modules: ['@pinia/nuxt'],
193
195
  })
194
196
  ```
195
197
 
@@ -203,7 +205,7 @@ export const useMainStore = defineStore('main', {
203
205
  counter: 0,
204
206
  }),
205
207
  actions: {
206
- increment() {
208
+ increment () {
207
209
  // `this` is the store instance
208
210
  this.counter++
209
211
  },
@@ -211,7 +213,7 @@ export const useMainStore = defineStore('main', {
211
213
  })
212
214
  ```
213
215
 
214
- Create a [plugin](/docs/guide/directory-structure/plugins) file to globalize your store:
216
+ Create a [plugin](/docs/3.x/guide/directory-structure/plugins) file to globalize your store:
215
217
 
216
218
  ```ts [plugins/pinia.ts]
217
219
  import { useMainStore } from '~/store'
@@ -219,8 +221,8 @@ import { useMainStore } from '~/store'
219
221
  export default defineNuxtPlugin(({ $pinia }) => {
220
222
  return {
221
223
  provide: {
222
- store: useMainStore($pinia)
223
- }
224
+ store: useMainStore($pinia),
225
+ },
224
226
  }
225
227
  })
226
228
  ```
@@ -232,8 +234,8 @@ Once it's done you will need to add the following plugin to your Nuxt app:
232
234
  ```ts [plugins/vuex.ts]
233
235
  import store from '~/store'
234
236
 
235
- export default defineNuxtPlugin(nuxtApp => {
236
- nuxtApp.vueApp.use(store);
237
+ export default defineNuxtPlugin((nuxtApp) => {
238
+ nuxtApp.vueApp.use(store)
237
239
  })
238
240
  ```
239
241
 
package/7.migration/20.module-authors.md CHANGED
@@ -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/3.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/3.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/3.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/3.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/3.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/3.x/guide/going-further/modules).
82
82
  ::
83
83
 
84
84
  ### Use TypeScript (Optional)
package/7.migration/3.auto-imports.md CHANGED
@@ -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/3.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/3.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/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/3.x/guide/directory-structure/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/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/3.x/api/composables/use-head) [composable](/docs/3.x/getting-started/seo-meta)
9
+ 3. Through [global meta components](/docs/3.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/3.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
@@ -31,18 +31,18 @@ Nuxt currently uses [`Unhead`](https://github.com/unjs/unhead) to manage your me
31
31
  export default {
32
32
  data: () => ({
33
33
  title: 'My App',
34
- description: 'My App Description'
35
- })
34
+ description: 'My App Description',
35
+ }),
36
36
  head () {
37
37
  return {
38
38
  title: this.title,
39
39
  meta: [{
40
40
  hid: 'description',
41
41
  name: 'description',
42
- content: this.description
43
- }]
42
+ content: this.description,
43
+ }],
44
44
  }
45
- }
45
+ },
46
46
  }
47
47
  </script>
48
48
  ```
@@ -57,8 +57,8 @@ useHead({
57
57
  title,
58
58
  meta: [{
59
59
  name: 'description',
60
- content: description
61
- }]
60
+ content: description,
61
+ }],
62
62
  })
63
63
  </script>
64
64
  ```
@@ -80,10 +80,10 @@ export default {
80
80
  meta: [{
81
81
  hid: 'description',
82
82
  name: 'description',
83
- content: 'My App Description'
84
- }]
83
+ content: 'My App Description',
84
+ }],
85
85
  }
86
- }
86
+ },
87
87
  }
88
88
  </script>
89
89
  ```
@@ -93,7 +93,10 @@ export default {
93
93
  <div>
94
94
  <Head>
95
95
  <Title>My App</Title>
96
- <Meta name="description" content="My app description"/>
96
+ <Meta
97
+ name="description"
98
+ content="My app description"
99
+ />
97
100
  </Head>
98
101
  <!-- -->
99
102
  </div>
@@ -118,10 +121,10 @@ export default defineNuxtComponent({
118
121
  return {
119
122
  meta: [{
120
123
  name: 'description',
121
- content: 'This is my page description.'
122
- }]
124
+ content: 'This is my page description.',
125
+ }],
123
126
  }
124
- }
127
+ },
125
128
  })
126
129
  </script>
127
130
  ```
package/7.migration/5.plugins-and-middleware.md CHANGED
@@ -9,22 +9,22 @@ Plugins now have a different format, and take only one argument (`nuxtApp`).
9
9
 
10
10
  ::code-group
11
11
 
12
- ```js [Nuxt 2]
12
+ ```ts [Nuxt 2]
13
13
  export default (ctx, inject) => {
14
14
  inject('injected', () => 'my injected function')
15
- })
15
+ }
16
16
  ```
17
17
 
18
18
  ```ts [Nuxt 3]
19
- export default defineNuxtPlugin(nuxtApp => {
19
+ export default defineNuxtPlugin((nuxtApp) => {
20
20
  // now available on `nuxtApp.$injected`
21
21
  nuxtApp.provide('injected', () => 'my injected function')
22
22
 
23
23
  // You can alternatively use this format, which comes with automatic type support
24
24
  return {
25
25
  provide: {
26
- injected: () => 'my injected function'
27
- }
26
+ injected: () => 'my injected function',
27
+ },
28
28
  }
29
29
  })
30
30
  ```
package/7.migration/6.pages-and-layouts.md CHANGED
@@ -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/3.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/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/3.x/guide/directory-structure/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 `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/3.x/api/utils/define-page-meta) to select the layout used by your page.
46
46
  ```diff [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/layouts) directly within `error.vue`:
57
+ 3. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/3.x/getting-started/error-handling). If you want to ensure that this page uses a layout, you can use [`<NuxtLayout>`](/docs/3.x/guide/directory-structure/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 [`pages/`](/docs/guide/directory-structure/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 [`pages/`](/docs/3.x/guide/directory-structure/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/3.x/api/composables/use-route) and [`useRouter`](/docs/3.x/api/composables/use-router) composables.
100
100
 
101
101
  #### Example: Dynamic Routes
102
102
 
@@ -145,13 +145,17 @@ If you have been defining transitions for your page or layout directly in your c
145
145
  ```vue [Nuxt 2]
146
146
  <template>
147
147
  <div>
148
- <NuxtChild keep-alive :keep-alive-props="{ exclude: ['modal'] }" :nuxt-child-key="$route.slug" />
148
+ <NuxtChild
149
+ keep-alive
150
+ :keep-alive-props="{ exclude: ['modal'] }"
151
+ :nuxt-child-key="$route.slug"
152
+ />
149
153
  </div>
150
154
  </template>
151
155
 
152
156
  <script>
153
157
  export default {
154
- transition: 'page' // or { name: 'page' }
158
+ transition: 'page', // or { name: 'page' }
155
159
  }
156
160
  </script>
157
161
  ```
@@ -172,7 +176,7 @@ definePageMeta({
172
176
  name: 'page',
173
177
  },
174
178
  keepalive: {
175
- exclude: ['modal']
179
+ exclude: ['modal'],
176
180
  },
177
181
  })
178
182
  </script>
@@ -182,7 +186,7 @@ definePageMeta({
182
186
 
183
187
  ## `<NuxtLink>` Component
184
188
 
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>`.
189
+ Most of the syntax and functionality are the same for the global [NuxtLink](/docs/3.x/api/components/nuxt-link) component. If you have been using the shortcut `<NLink>` format, you should update this to use `<NuxtLink>`.
186
190
 
187
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.
188
192
 
@@ -193,7 +197,7 @@ Most of the syntax and functionality are the same for the global [NuxtLink](/doc
193
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.
194
198
 
195
199
  ::warning
196
- Make sure to always `await` on [`navigateTo`](/docs/api/utils/navigate-to) or chain its result by returning from functions.
200
+ Make sure to always `await` on [`navigateTo`](/docs/3.x/api/utils/navigate-to) or chain its result by returning from functions.
197
201
  ::
198
202
 
199
203
  ::code-group
@@ -202,29 +206,29 @@ Make sure to always `await` on [`navigateTo`](/docs/api/utils/navigate-to) or ch
202
206
  <script>
203
207
  export default {
204
208
  methods: {
205
- navigate(){
209
+ navigate () {
206
210
  this.$router.push({
207
211
  path: '/search',
208
212
  query: {
209
213
  name: 'first name',
210
- type: '1'
211
- }
214
+ type: '1',
215
+ },
212
216
  })
213
- }
214
- }
217
+ },
218
+ },
215
219
  }
216
220
  </script>
217
221
  ```
218
222
 
219
223
  ```vue [Nuxt 3]
220
224
  <script setup lang="ts">
221
- function navigate(){
225
+ function navigate () {
222
226
  return navigateTo({
223
227
  path: '/search',
224
228
  query: {
225
229
  name: 'first name',
226
- type: '1'
227
- }
230
+ type: '1',
231
+ },
228
232
  })
229
233
  }
230
234
  </script>