@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
@@ -0,0 +1,132 @@
1
+ ---
2
+ title: Head
3
+ description: Nuxt Kit provides utilities to help you manage head configuration in modules.
4
+ links:
5
+ - label: Source
6
+ icon: i-simple-icons-github
7
+ to: https://github.com/nuxt/nuxt/blob/main/packages/kit/src/head.ts
8
+ size: xs
9
+ ---
10
+
11
+ ## `setGlobalHead`
12
+
13
+ Sets global head configuration for your Nuxt application. This utility allows modules to programmatically configure meta tags, links, scripts, and other head elements that will be applied across all pages.
14
+
15
+ The provided head configuration will be merged with any existing head configuration using deep merging, with your provided values taking precedence.
16
+
17
+ ::tip
18
+ This is particularly useful for modules that need to inject global meta tags, stylesheets, or scripts into the application head.
19
+ ::
20
+
21
+ ### Type
22
+
23
+ ```ts twoslash
24
+ // @errors: 2391
25
+ // ---cut---
26
+ import type { SerializableHead } from '@unhead/vue/types'
27
+
28
+ interface AppHeadMetaObject extends SerializableHead {
29
+ charset?: string
30
+ viewport?: string
31
+ }
32
+
33
+ function setGlobalHead (head: AppHeadMetaObject): void
34
+ ```
35
+
36
+ ### Parameters
37
+
38
+ #### `head`
39
+
40
+ **Type**: `AppHeadMetaObject`
41
+
42
+ An object containing head configuration. All properties are optional and will be merged with existing configuration:
43
+
44
+ - `charset`: Character encoding for the document
45
+ - `viewport`: Viewport meta tag configuration
46
+ - `meta`: Array of meta tag objects
47
+ - `link`: Array of link tag objects (stylesheets, icons, etc.)
48
+ - `style`: Array of inline style tag objects
49
+ - `script`: Array of script tag objects
50
+ - `noscript`: Array of noscript tag objects
51
+ - `title`: Default page title
52
+ - `titleTemplate`: Template for formatting page titles
53
+ - `bodyAttrs`: Attributes to add to the `<body>` tag
54
+ - `htmlAttrs`: Attributes to add to the `<html>` tag
55
+
56
+ ### Examples
57
+
58
+ #### Adding Global Meta Tags
59
+
60
+ ```ts
61
+ import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'
62
+
63
+ export default defineNuxtModule({
64
+ setup () {
65
+ setGlobalHead({
66
+ meta: [
67
+ { name: 'theme-color', content: '#ffffff' },
68
+ { name: 'author', content: 'Your Name' },
69
+ ],
70
+ })
71
+ },
72
+ })
73
+ ```
74
+
75
+ #### Injecting Global Stylesheets
76
+
77
+ ```ts
78
+ import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'
79
+
80
+ export default defineNuxtModule({
81
+ setup () {
82
+ setGlobalHead({
83
+ link: [
84
+ {
85
+ rel: 'stylesheet',
86
+ href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap',
87
+ },
88
+ ],
89
+ })
90
+ },
91
+ })
92
+ ```
93
+
94
+ #### Adding Global Scripts
95
+
96
+ ```ts
97
+ import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'
98
+
99
+ export default defineNuxtModule({
100
+ setup () {
101
+ setGlobalHead({
102
+ script: [
103
+ {
104
+ src: 'https://cdn.example.com/analytics.js',
105
+ async: true,
106
+ defer: true,
107
+ },
108
+ ],
109
+ })
110
+ },
111
+ })
112
+ ```
113
+
114
+ #### Setting HTML Attributes
115
+
116
+ ```ts
117
+ import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'
118
+
119
+ export default defineNuxtModule({
120
+ setup () {
121
+ setGlobalHead({
122
+ htmlAttrs: {
123
+ lang: 'en',
124
+ dir: 'ltr',
125
+ },
126
+ bodyAttrs: {
127
+ class: 'custom-body-class',
128
+ },
129
+ })
130
+ },
131
+ })
132
+ ```
@@ -38,7 +38,7 @@ export default defineNuxtModule({
38
38
  ### Type
39
39
 
40
40
  ```ts
41
- function addPlugin(plugin: NuxtPlugin | string, options?: AddPluginOptions): NuxtPlugin
41
+ function addPlugin (plugin: NuxtPlugin | string, options?: AddPluginOptions): NuxtPlugin
42
42
  ```
43
43
 
44
44
  ### Parameters
@@ -128,7 +128,7 @@ export default defineNuxtPlugin({
128
128
  ### Type
129
129
 
130
130
  ```ts
131
- function addPluginTemplate(pluginOptions: NuxtPluginTemplate, options?: AddPluginOptions): NuxtPlugin
131
+ function addPluginTemplate (pluginOptions: NuxtPluginTemplate, options?: AddPluginOptions): NuxtPlugin
132
132
  ```
133
133
 
134
134
  ### Parameters
@@ -204,12 +204,13 @@ export default defineNuxtConfig({
204
204
 
205
205
  ```ts [#build/vue-app-config.mjs]
206
206
  import { defineNuxtPlugin } from '#app/nuxt'
207
+
207
208
  export default defineNuxtPlugin({
208
209
  name: 'nuxt:vue-app-config',
209
210
  enforce: 'pre',
210
211
  setup (nuxtApp) {
211
- nuxtApp.vueApp.config["idPrefix"] = "nuxt"
212
- }
212
+ nuxtApp.vueApp.config.idPrefix = 'nuxt'
213
+ },
213
214
  })
214
215
  ```
215
216
 
@@ -239,7 +240,7 @@ export default defineNuxtModule({
239
240
  })
240
241
  ```
241
242
 
242
- ```ts [templates/plugin.ejs]
243
+ ```ejs [templates/plugin.ejs]
243
244
  import { VueFire, useSSRInitialState } from 'vuefire'
244
245
  import { defineNuxtPlugin } from '#imports'
245
246
 
@@ -30,7 +30,7 @@ Hook | Arguments | Environment | Description
30
30
  `page:loading:end` | - | Client | Called after `page:finish`
31
31
  `page:transition:finish`| `pageComponent?` | Client | After page transition [onAfterLeave](https://vuejs.org/guide/built-ins/transition.html#javascript-hooks) event.
32
32
  `dev:ssr-logs` | `logs` | Client | Called with an array of server-side logs that have been passed to the client (if `features.devLogs` is enabled).
33
- `page:view-transition:start` | `transition` | Client | Called after `document.startViewTransition` is called when [experimental viewTransition support is enabled](/docs/getting-started/transitions#view-transitions-api-experimental).
33
+ `page:view-transition:start` | `transition` | Client | Called after `document.startViewTransition` is called when [experimental viewTransition support is enabled](/docs/3.x/getting-started/transitions#view-transitions-api-experimental).
34
34
 
35
35
  ## Nuxt Hooks (build time)
36
36
 
@@ -46,7 +46,7 @@ Hook | Arguments | Description
46
46
  `modules:done` | - | Called during Nuxt initialization, after installing user modules.
47
47
  `app:resolve` | `app` | Called after resolving the `app` instance.
48
48
  `app:templates` | `app` | Called during `NuxtApp` generation, to allow customizing, modifying or adding new files to the build directory (either virtually or to written to `.nuxt`).
49
- `app:templatesGenerated` | `app` | Called after templates are compiled into the [virtual file system](/docs/guide/directory-structure/nuxt#virtual-file-system) (vfs).
49
+ `app:templatesGenerated` | `app` | Called after templates are compiled into the [virtual file system](/docs/3.x/guide/directory-structure/nuxt#virtual-file-system) (vfs).
50
50
  `build:before` | - | Called before Nuxt bundle builder.
51
51
  `build:done` | - | Called after Nuxt bundle builder is complete.
52
52
  `build:manifest` | `manifest` | Called during the manifest build by Vite and webpack. This allows customizing the manifest that Nitro will use to render `<script>` and `<link>` tags in the final HTML.
@@ -75,8 +75,8 @@ Hook | Arguments | Description
75
75
  `schema:beforeWrite` | `schema` | Called before writing the given schema.
76
76
  `schema:written` | - | Called after the schema is written.
77
77
  `vite:extend` | `viteBuildContext` | Allows extending Vite default context.
78
- `vite:extendConfig` | `viteInlineConfig, env` | Allows extending Vite default config.
79
- `vite:configResolved` | `viteInlineConfig, env` | Allows reading the resolved Vite config.
78
+ `vite:extendConfig` | `viteInlineConfig, env` | Allows extending Vite default config. **Deprecated in Nuxt 5+.** In Nuxt 5, this operates on a shared configuration rather than separate client/server configs.
79
+ `vite:configResolved` | `viteInlineConfig, env` | Allows reading the resolved Vite config. **Deprecated in Nuxt 5+.** In Nuxt 5, this operates on a shared configuration rather than separate client/server configs.
80
80
  `vite:serverCreated` | `viteServer, env` | Called when the Vite server is created.
81
81
  `vite:compiled` | - | Called after Vite server is compiled.
82
82
  `webpack:config` | `webpackConfigs` | Called before configuring the webpack compiler.
@@ -49,12 +49,12 @@ const resolver = createResolver(import.meta.url)
49
49
 
50
50
  export default defineNuxtModule({
51
51
  meta: { name: 'myModule' },
52
- setup() {
52
+ setup () {
53
53
  addComponent({
54
54
  name: 'MyModuleComponent',
55
55
  // Resolves to '/modules/my-module/components/MyModuleComponent.vue'
56
- filePath: resolver.resolve('./components/MyModuleComponent.vue')
56
+ filePath: resolver.resolve('./components/MyModuleComponent.vue'),
57
57
  })
58
- }
58
+ },
59
59
  })
60
60
  ```
@@ -37,7 +37,7 @@ And finally, just ask the question! There's no need to [ask permission to ask a
37
37
 
38
38
  Something isn't working the way that the docs say that it should. You're not sure if it's a bug. You've searched through the [open issues](https://github.com/nuxt/nuxt/issues) and [discussions](https://github.com/nuxt/nuxt/discussions) but you can't find anything. (if there is a closed issue, please create a new one)
39
39
 
40
- We recommend taking a look at [how to report bugs](/docs/community/reporting-bugs). Nuxt is still in active development, and every issue helps make it better.
40
+ We recommend taking a look at [how to report bugs](/docs/3.x/community/reporting-bugs). Nuxt is still in active development, and every issue helps make it better.
41
41
 
42
42
  ## "I need professional help"
43
43
 
@@ -12,7 +12,7 @@ Here are a few key steps.
12
12
 
13
13
  ## Is It Really a Bug?
14
14
 
15
- Consider if you're looking to get help with something, or whether you think there's a bug with Nuxt itself. If it's the former, we'd love to help you - but the best way to do that is through [asking for help](/docs/community/getting-help) rather than reporting a bug.
15
+ Consider if you're looking to get help with something, or whether you think there's a bug with Nuxt itself. If it's the former, we'd love to help you - but the best way to do that is through [asking for help](/docs/3.x/community/getting-help) rather than reporting a bug.
16
16
 
17
17
  ## Search the Issues
18
18
 
@@ -11,7 +11,7 @@ There is a range of different ways you might be able to contribute to the Nuxt e
11
11
  The Nuxt ecosystem includes many different projects and organizations:
12
12
 
13
13
  * [nuxt/](https://github.com/nuxt) - core repositories for the Nuxt framework itself. [**nuxt/nuxt**](https://github.com/nuxt/nuxt) contains the Nuxt framework (both versions 2 and 3).
14
- * [nuxt-modules/](https://github.com/nuxt-modules) - community-contributed and maintained modules and libraries. There is a [process to migrate a module](/docs/guide/going-further/modules/#joining-nuxt-modules-and-nuxtjs) to `nuxt-modules`. While these modules have individual maintainers, they are not dependent on a single person.
14
+ * [nuxt-modules/](https://github.com/nuxt-modules) - community-contributed and maintained modules and libraries. There is a [process to migrate a module](/docs/3.x/guide/going-further/modules/#joining-nuxt-modules-and-nuxtjs) to `nuxt-modules`. While these modules have individual maintainers, they are not dependent on a single person.
15
15
  * [unjs/](https://github.com/unjs) - many of these libraries are used throughout the Nuxt ecosystem. They are designed to be universal libraries that are framework- and environment-agnostic. We welcome contributions and usage by other frameworks and projects.
16
16
 
17
17
  ## How To Contribute
@@ -24,7 +24,7 @@ Check out the issues and discussions for the project you want to help. For examp
24
24
 
25
25
  Thank you for taking the time to create an issue! ❤️
26
26
 
27
- * **Reporting bugs**: Check out [our guide](/docs/community/reporting-bugs) for some things to do before opening an issue.
27
+ * **Reporting bugs**: Check out [our guide](/docs/3.x/community/reporting-bugs) for some things to do before opening an issue.
28
28
 
29
29
  * **Feature requests**: Check that there is not an existing issue or discussion covering the scope of the feature you have in mind. If the feature is to another part of the Nuxt ecosystem (such as a module), please consider raising a feature request there first. If the feature you have in mind is general or the API is not entirely clear, consider opening a discussion in the **Ideas** section to discuss with the community first.
30
30
 
@@ -100,9 +100,9 @@ Our aim is ensuring quality and maintaining the joy of collaborating and communi
100
100
 
101
101
  ### Create a Module
102
102
 
103
- If you've built something with Nuxt that's cool, why not [extract it into a module](/docs/guide/going-further/modules), so it can be shared with others? We have [many excellent modules already](/modules), but there's always room for more.
103
+ If you've built something with Nuxt that's cool, why not [extract it into a module](/docs/3.x/guide/going-further/modules), so it can be shared with others? We have [many excellent modules already](/modules), but there's always room for more.
104
104
 
105
- If you need help while building it, feel free to [check in with us](/docs/community/getting-help).
105
+ If you need help while building it, feel free to [check in with us](/docs/3.x/community/getting-help).
106
106
 
107
107
  ### Make an RFC
108
108
 
@@ -126,7 +126,7 @@ The following conventions are _required_ within the `nuxt/` organization and rec
126
126
 
127
127
  #### Module Conventions
128
128
 
129
- Modules should follow the [Nuxt module template](https://github.com/nuxt/starter/tree/module). See [module guide](/docs/guide/going-further/modules) for more information.
129
+ Modules should follow the [Nuxt module template](https://github.com/nuxt/starter/tree/module). See [module guide](/docs/3.x/guide/going-further/modules) for more information.
130
130
 
131
131
  #### Use Core `unjs/` Libraries
132
132
 
@@ -139,7 +139,7 @@ We recommend the following libraries which are used throughout the ecosystem:
139
139
 
140
140
  #### Use ESM Syntax and Default to `type: module`
141
141
 
142
- Most of the Nuxt ecosystem can consume ESM directly. In general we advocate that you avoid using CJS-specific code, such as `__dirname` and `require` statements. You can [read more about ESM](/docs/guide/concepts/esm).
142
+ Most of the Nuxt ecosystem can consume ESM directly. In general we advocate that you avoid using CJS-specific code, such as `__dirname` and `require` statements. You can [read more about ESM](/docs/3.x/guide/concepts/esm).
143
143
 
144
144
  #### What's Corepack
145
145
 
@@ -4,7 +4,7 @@ navigation.icon: i-lucide-github
4
4
  description: Some specific points about contributions to the framework repository.
5
5
  ---
6
6
 
7
- Once you've read the [general contribution guide](/docs/community/contribution), here are some specific points to make about contributions to the [`nuxt/nuxt`](https://github.com/nuxt/nuxt) repository.
7
+ Once you've read the [general contribution guide](/docs/3.x/community/contribution), here are some specific points to make about contributions to the [`nuxt/nuxt`](https://github.com/nuxt/nuxt) repository.
8
8
 
9
9
  ## Monorepo Guide
10
10
 
@@ -88,7 +88,7 @@ If there are still errors left, you must correct them manually.
88
88
  If you are adding a new feature or refactoring or changing the behavior of Nuxt in any other manner, you'll likely want to document the changes. Please include any changes to the docs in the same PR. You don't have to write documentation up on the first commit (but please do so as soon as your pull request is mature enough).
89
89
 
90
90
  ::important
91
- Make sure to make changes according to the [Documentation Style Guide](/docs/community/contribution#documentation-style-guide).
91
+ Make sure to make changes according to the [Documentation Style Guide](/docs/3.x/community/contribution#documentation-style-guide).
92
92
  ::
93
93
 
94
94
  ### Final Checklist
@@ -100,7 +100,7 @@ When submitting your PR, there is a simple template that you have to fill out. P
100
100
  If you spot an area where we can improve documentation or error messages, please do open a PR - even if it's just to fix a typo!
101
101
 
102
102
  ::important
103
- Make sure to make changes according to the [Documentation Style Guide](/docs/community/contribution#documentation-style-guide).
103
+ Make sure to make changes according to the [Documentation Style Guide](/docs/3.x/community/contribution#documentation-style-guide).
104
104
  ::
105
105
 
106
106
  ### Quick Edits
@@ -63,7 +63,7 @@ The current active version of [Nuxt](https://nuxt.com) is **v4** which is availa
63
63
 
64
64
  Nuxt 3 will continue to receive maintenance updates (both bug fixes and backports of features from Nuxt 4) until the end of January 2026.
65
65
 
66
- Each active version has its own nightly releases which are generated automatically. For more about enabling the Nuxt nightly release channel, see [the nightly release channel docs](/docs/guide/going-further/nightly-release-channel).
66
+ Each active version has its own nightly releases which are generated automatically. For more about enabling the Nuxt nightly release channel, see [the nightly release channel docs](/docs/3.x/guide/going-further/nightly-release-channel).
67
67
 
68
68
  Release | | Initial release | End Of Life | Docs
69
69
  -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ---------------------------- | ---------------------------------------
@@ -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/3.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/3.x/guide/concepts/auto-imports)) but there are some limitations, notably that [`useAsyncData`](/docs/3.x/api/composables/use-async-data) and [`useFetch`](/docs/3.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,13 +80,13 @@ 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/3.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'
87
87
 
88
88
  export default defineNuxtConfig({
89
- bridge: false
89
+ bridge: false,
90
90
  })
91
91
  ```
92
92
 
@@ -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/3.x/bridge/typescript)
120
120
 
121
- - [Migrate Legacy Composition API](/docs/bridge/bridge-composition-api)
121
+ - [Migrate Legacy Composition API](/docs/3.x/bridge/bridge-composition-api)
122
122
 
123
- - [Plugins and Middleware](/docs/bridge/plugins-and-middleware)
123
+ - [Plugins and Middleware](/docs/3.x/bridge/plugins-and-middleware)
124
124
 
125
- - [Migrate New Composition API](/docs/bridge/nuxt3-compatible-api)
125
+ - [Migrate New Composition API](/docs/3.x/bridge/nuxt3-compatible-api)
126
126
 
127
- - [Meta Tags](/docs/bridge/meta)
127
+ - [Meta Tags](/docs/3.x/bridge/meta)
128
128
 
129
- - [Runtime Config](/docs/bridge/runtime-config)
129
+ - [Runtime Config](/docs/3.x/bridge/runtime-config)
130
130
 
131
- - [Nitro](/docs/bridge/nitro)
131
+ - [Nitro](/docs/3.x/bridge/nitro)
132
132
 
133
- - [Vite](/docs/bridge/vite)
133
+ - [Vite](/docs/3.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/3.x/guide/concepts/esm) for more info and upgrading.
@@ -11,6 +11,7 @@ You can check [bridge/src/module.ts](https://github.com/nuxt/bridge/blob/main/pa
11
11
 
12
12
  ```ts [nuxt.config.ts]
13
13
  import { defineNuxtConfig } from '@nuxt/bridge'
14
+
14
15
  export default defineNuxtConfig({
15
16
  bridge: {
16
17
 
@@ -63,7 +64,7 @@ export default defineNuxtConfig({
63
64
 
64
65
  vite: {
65
66
  // Config for Vite
66
- }
67
+ },
67
68
  })
68
69
  ```
69
70
 
@@ -16,8 +16,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
16
16
  export default defineNuxtConfig({
17
17
  bridge: {
18
18
  typescript: true,
19
- nitro: false // If migration to Nitro is complete, set to true
20
- }
19
+ nitro: false, // If migration to Nitro is complete, set to true
20
+ },
21
21
  })
22
22
  ```
23
23
 
@@ -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/3.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/3.x/bridge/nuxt3-compatible-api#ssrref-and-shallowssrref) to replace this.
41
41
 
42
42
  ### Set `bridge.capi`
43
43
 
@@ -47,8 +47,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
47
47
  export default defineNuxtConfig({
48
48
  bridge: {
49
49
  capi: true,
50
- nitro: false // If migration to Nitro is complete, set to true
51
- }
50
+ nitro: false, // If migration to Nitro is complete, set to true
51
+ },
52
52
  })
53
53
  ```
54
54
 
@@ -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/3.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/3.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,17 +7,17 @@ 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/3.x/guide/directory-structure/plugins).
11
11
 
12
- ```js [plugins/hello.ts]
13
- export default defineNuxtPlugin(nuxtApp => {
12
+ ```ts [plugins/hello.ts]
13
+ export default defineNuxtPlugin((nuxtApp) => {
14
14
  nuxtApp.provide('injected', () => 'my injected function')
15
15
  // now available on `nuxtApp.$injected`
16
16
  })
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/3.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/middleware).
31
+ Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/3.x/guide/directory-structure/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 middleware di
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/3.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
 
@@ -54,9 +54,9 @@ import { defineNuxtConfig } from '@nuxt/bridge'
54
54
  export default defineNuxtConfig({
55
55
  bridge: {
56
56
  macros: {
57
- pageMeta: true
58
- }
59
- }
57
+ pageMeta: true,
58
+ },
59
+ },
60
60
  })
61
61
  ```
62
62
 
@@ -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/3.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/3.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/3.x/api/composables/use-nuxt-app) or [`useState`](/docs/3.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'
@@ -73,8 +73,10 @@ You can access injected helpers using `useNuxtApp`.
73
73
 
74
74
  This helper function is not provided any more but you can replace it with the following code:
75
75
 
76
- ```js
77
- const wrapProperty = (property, makeComputed = true) => () => {
76
+ ```ts
77
+ import { computed, getCurrentInstance } from 'vue'
78
+
79
+ const wrapProperty = (property: string, makeComputed = true) => () => {
78
80
  const vm = getCurrentInstance().proxy
79
81
  return makeComputed ? computed(() => vm[property]) : vm[property]
80
82
  }
@@ -82,14 +84,14 @@ const wrapProperty = (property, makeComputed = true) => () => {
82
84
 
83
85
  ## `useAsync` and `useFetch`
84
86
 
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).
87
+ These two composables can be replaced with `useLazyAsyncData` and `useLazyFetch`, which are documented [in the Nuxt 3 docs](/docs/3.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
88
 
87
89
  ::important
88
90
  Note that the API is entirely different, despite similar sounding names. Importantly, you should not attempt to change the value of other variables outside the composable (as you may have been doing with the previous `useFetch`).
89
91
  ::
90
92
 
91
93
  ::warning
92
- The `useLazyFetch` must have been configured for [Nitro](/docs/bridge/nitro).
94
+ The `useLazyFetch` must have been configured for [Nitro](/docs/3.x/bridge/nitro).
93
95
  ::
94
96
 
95
97
  Migrating to the new composables from `useAsync`:
@@ -136,7 +138,7 @@ In order to interact with `vue-meta`, you may use `useNuxt2Meta`, which will wor
136
138
 
137
139
  You can also pass in computed values or refs, and the meta values will be updated reactively:
138
140
 
139
- ```ts
141
+ ```vue
140
142
  <script setup>
141
143
  const title = ref('my title')
142
144
  useNuxt2Meta({
@@ -150,7 +152,7 @@ title.value = 'new title'
150
152
  Be careful not to use both `useNuxt2Meta()` and the Options API `head()` within the same component, as behavior may be unpredictable.
151
153
  ::
152
154
 
153
- Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the [`useHead`](/docs/api/composables/use-head) composable.
155
+ Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the [`useHead`](/docs/3.x/api/composables/use-head) composable.
154
156
 
155
157
  ```diff
156
158
  <script setup>
@@ -165,16 +167,17 @@ You will also need to enable it explicitly in your `nuxt.config`:
165
167
 
166
168
  ```js
167
169
  import { defineNuxtConfig } from '@nuxt/bridge'
170
+
168
171
  export default defineNuxtConfig({
169
172
  bridge: {
170
- meta: true
171
- }
173
+ meta: true,
174
+ },
172
175
  })
173
176
  ```
174
177
 
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.
178
+ This [`useHead`](/docs/3.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/3.x/api/composables/use-head) , as they may conflict.
176
179
 
177
- For more information on how to use this composable, see [the Nuxt 3 docs](/docs/getting-started/seo-meta).
180
+ For more information on how to use this composable, see [the Nuxt 3 docs](/docs/3.x/getting-started/seo-meta).
178
181
 
179
182
  ### Explicit Imports
180
183
 
@@ -182,7 +185,7 @@ Nuxt exposes every auto-import with the `#imports` alias that can be used to mak
182
185
 
183
186
  ```vue
184
187
  <script setup lang="ts">
185
- import { ref, computed } from '#imports'
188
+ import { computed, ref } from '#imports'
186
189
 
187
190
  const count = ref(1)
188
191
  const double = computed(() => count.value * 2)
@@ -196,8 +199,8 @@ If you want to disable auto-importing composables and utilities, you can set `im
196
199
  ```ts [nuxt.config.ts]
197
200
  export default defineNuxtConfig({
198
201
  imports: {
199
- autoImport: false
200
- }
202
+ autoImport: false,
203
+ },
201
204
  })
202
205
  ```
203
206