@nuxt/docs 3.20.2 → 3.21.1

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 (188) hide show
  1. package/1.getting-started/01.introduction.md +4 -4
  2. package/1.getting-started/02.installation.md +4 -7
  3. package/1.getting-started/03.configuration.md +29 -29
  4. package/1.getting-started/04.views.md +6 -4
  5. package/1.getting-started/05.assets.md +2 -2
  6. package/1.getting-started/06.styling.md +22 -16
  7. package/1.getting-started/07.routing.md +6 -6
  8. package/1.getting-started/08.seo-meta.md +8 -4
  9. package/1.getting-started/09.transitions.md +6 -6
  10. package/1.getting-started/10.data-fetching.md +18 -18
  11. package/1.getting-started/11.state-management.md +5 -5
  12. package/1.getting-started/12.error-handling.md +25 -19
  13. package/1.getting-started/13.server.md +9 -9
  14. package/1.getting-started/14.layers.md +49 -15
  15. package/1.getting-started/15.prerendering.md +18 -4
  16. package/1.getting-started/16.deployment.md +2 -1
  17. package/1.getting-started/17.testing.md +17 -7
  18. package/1.getting-started/18.upgrade.md +111 -60
  19. package/2.directory-structure/0.output.md +1 -1
  20. package/2.directory-structure/1.assets.md +1 -1
  21. package/2.directory-structure/1.components.md +12 -8
  22. package/2.directory-structure/1.composables.md +2 -2
  23. package/2.directory-structure/1.content.md +1 -1
  24. package/2.directory-structure/1.layers.md +87 -0
  25. package/2.directory-structure/1.layouts.md +35 -3
  26. package/2.directory-structure/1.middleware.md +7 -7
  27. package/2.directory-structure/1.modules.md +8 -2
  28. package/2.directory-structure/1.node_modules.md +1 -1
  29. package/2.directory-structure/1.pages.md +39 -18
  30. package/2.directory-structure/1.plugins.md +4 -1
  31. package/2.directory-structure/1.public.md +1 -1
  32. package/2.directory-structure/1.server.md +28 -8
  33. package/2.directory-structure/1.shared.md +3 -3
  34. package/2.directory-structure/1.utils.md +2 -2
  35. package/2.directory-structure/2.env.md +3 -3
  36. package/2.directory-structure/2.nuxtignore.md +1 -0
  37. package/2.directory-structure/2.nuxtrc.md +5 -2
  38. package/2.directory-structure/3.app-config.md +2 -2
  39. package/2.directory-structure/3.app.md +3 -3
  40. package/2.directory-structure/3.error.md +9 -5
  41. package/2.directory-structure/3.nuxt-config.md +1 -1
  42. package/2.directory-structure/3.package.md +1 -1
  43. package/2.directory-structure/3.tsconfig.md +3 -2
  44. package/2.directory-structure/index.md +12 -8
  45. package/3.guide/0.index.md +5 -2
  46. package/3.guide/1.concepts/{3.rendering.md → 1.rendering.md} +11 -32
  47. package/3.guide/1.concepts/{2.vuejs-development.md → 10.vuejs-development.md} +9 -8
  48. package/3.guide/1.concepts/{10.nuxt-lifecycle.md → 2.nuxt-lifecycle.md} +31 -24
  49. package/3.guide/1.concepts/{1.auto-imports.md → 3.auto-imports.md} +6 -6
  50. package/3.guide/1.concepts/4.server-engine.md +2 -2
  51. package/3.guide/1.concepts/5.modules.md +14 -1
  52. package/3.guide/1.concepts/7.esm.md +5 -4
  53. package/3.guide/1.concepts/8.typescript.md +9 -15
  54. package/3.guide/1.concepts/9.code-style.md +1 -1
  55. package/3.guide/2.best-practices/hydration.md +1 -1
  56. package/3.guide/2.best-practices/performance.md +5 -5
  57. package/3.guide/3.ai/.navigation.yml +3 -0
  58. package/3.guide/3.ai/1.mcp.md +277 -0
  59. package/3.guide/3.ai/2.llms-txt.md +65 -0
  60. package/3.guide/4.modules/.navigation.yml +3 -0
  61. package/3.guide/4.modules/1.getting-started.md +103 -0
  62. package/3.guide/4.modules/2.module-anatomy.md +138 -0
  63. package/3.guide/4.modules/3.recipes-basics.md +420 -0
  64. package/3.guide/4.modules/4.recipes-advanced.md +243 -0
  65. package/3.guide/4.modules/5.testing.md +76 -0
  66. package/3.guide/4.modules/6.best-practices.md +104 -0
  67. package/3.guide/4.modules/7.ecosystem.md +32 -0
  68. package/3.guide/4.modules/index.md +36 -0
  69. package/3.guide/{3.recipes → 5.recipes}/1.custom-routing.md +3 -3
  70. package/3.guide/{3.recipes → 5.recipes}/2.vite-plugin.md +4 -0
  71. package/3.guide/{3.recipes → 5.recipes}/3.custom-usefetch.md +2 -2
  72. package/3.guide/{3.recipes → 5.recipes}/4.sessions-and-authentication.md +3 -3
  73. package/3.guide/{4.going-further → 6.going-further}/1.events.md +3 -4
  74. package/3.guide/{4.going-further → 6.going-further}/1.experimental-features.md +211 -86
  75. package/3.guide/6.going-further/1.features.md +108 -0
  76. package/3.guide/{4.going-further → 6.going-further}/1.internals.md +4 -3
  77. package/3.guide/{4.going-further → 6.going-further}/10.runtime-config.md +2 -2
  78. package/3.guide/{4.going-further → 6.going-further}/11.nightly-release-channel.md +1 -1
  79. package/3.guide/{4.going-further → 6.going-further}/2.hooks.md +5 -5
  80. package/3.guide/{4.going-further → 6.going-further}/4.kit.md +3 -3
  81. package/3.guide/{4.going-further → 6.going-further}/6.nuxt-app.md +6 -6
  82. package/3.guide/{4.going-further → 6.going-further}/7.layers.md +31 -5
  83. package/3.guide/{4.going-further → 6.going-further}/9.debugging.md +3 -2
  84. package/4.api/1.components/1.nuxt-client-fallback.md +5 -1
  85. package/4.api/1.components/10.nuxt-picture.md +1 -1
  86. package/4.api/1.components/11.teleports.md +2 -2
  87. package/4.api/1.components/12.nuxt-route-announcer.md +0 -2
  88. package/4.api/1.components/13.nuxt-time.md +0 -2
  89. package/4.api/1.components/2.nuxt-page.md +3 -3
  90. package/4.api/1.components/3.nuxt-layout.md +6 -6
  91. package/4.api/1.components/4.nuxt-link.md +13 -13
  92. package/4.api/1.components/5.nuxt-loading-indicator.md +1 -1
  93. package/4.api/1.components/6.nuxt-error-boundary.md +2 -2
  94. package/4.api/1.components/7.nuxt-welcome.md +2 -2
  95. package/4.api/1.components/8.nuxt-island.md +9 -2
  96. package/4.api/2.composables/use-app-config.md +1 -1
  97. package/4.api/2.composables/use-async-data.md +5 -5
  98. package/4.api/2.composables/use-cookie.md +16 -16
  99. package/4.api/2.composables/use-error.md +3 -3
  100. package/4.api/2.composables/use-fetch.md +37 -37
  101. package/4.api/2.composables/use-head-safe.md +1 -1
  102. package/4.api/2.composables/use-head.md +22 -7
  103. package/4.api/2.composables/use-lazy-async-data.md +1 -1
  104. package/4.api/2.composables/use-lazy-fetch.md +9 -9
  105. package/4.api/2.composables/use-nuxt-app.md +9 -7
  106. package/4.api/2.composables/use-route-announcer.md +1 -3
  107. package/4.api/2.composables/use-route.md +2 -2
  108. package/4.api/2.composables/use-router.md +15 -15
  109. package/4.api/2.composables/use-runtime-config.md +5 -5
  110. package/4.api/2.composables/use-seo-meta.md +2 -2
  111. package/4.api/2.composables/use-server-seo-meta.md +2 -2
  112. package/4.api/2.composables/use-state.md +12 -2
  113. package/4.api/3.utils/$fetch.md +1 -1
  114. package/4.api/3.utils/abort-navigation.md +2 -2
  115. package/4.api/3.utils/call-once.md +2 -4
  116. package/4.api/3.utils/clear-error.md +1 -1
  117. package/4.api/3.utils/create-error.md +7 -7
  118. package/4.api/3.utils/define-lazy-hydration-component.md +5 -5
  119. package/4.api/3.utils/define-nuxt-component.md +1 -1
  120. package/4.api/3.utils/define-nuxt-plugin.md +12 -12
  121. package/4.api/3.utils/define-nuxt-route-middleware.md +2 -2
  122. package/4.api/3.utils/define-page-meta.md +18 -11
  123. package/4.api/3.utils/define-route-rules.md +2 -2
  124. package/4.api/3.utils/navigate-to.md +14 -14
  125. package/4.api/3.utils/on-before-route-leave.md +1 -1
  126. package/4.api/3.utils/on-before-route-update.md +1 -1
  127. package/4.api/3.utils/preload-route-components.md +2 -2
  128. package/4.api/3.utils/refresh-cookie.md +0 -2
  129. package/4.api/3.utils/refresh-nuxt-data.md +1 -1
  130. package/4.api/3.utils/reload-nuxt-app.md +1 -1
  131. package/4.api/3.utils/set-page-layout.md +36 -0
  132. package/4.api/3.utils/set-response-status.md +3 -3
  133. package/4.api/3.utils/show-error.md +4 -4
  134. package/4.api/3.utils/update-app-config.md +1 -1
  135. package/4.api/4.commands/add.md +12 -12
  136. package/4.api/4.commands/analyze.md +11 -11
  137. package/4.api/4.commands/build-module.md +11 -11
  138. package/4.api/4.commands/build.md +12 -12
  139. package/4.api/4.commands/cleanup.md +6 -6
  140. package/4.api/4.commands/dev.md +23 -23
  141. package/4.api/4.commands/devtools.md +7 -7
  142. package/4.api/4.commands/generate.md +12 -12
  143. package/4.api/4.commands/info.md +6 -6
  144. package/4.api/4.commands/init.md +18 -18
  145. package/4.api/4.commands/module.md +18 -18
  146. package/4.api/4.commands/prepare.md +10 -10
  147. package/4.api/4.commands/preview.md +11 -11
  148. package/4.api/4.commands/test.md +9 -9
  149. package/4.api/4.commands/typecheck.md +10 -10
  150. package/4.api/4.commands/upgrade.md +10 -10
  151. package/4.api/5.kit/1.modules.md +31 -18
  152. package/4.api/5.kit/10.templates.md +23 -23
  153. package/4.api/5.kit/11.nitro.md +40 -36
  154. package/4.api/5.kit/12.resolving.md +2 -2
  155. package/4.api/5.kit/14.builder.md +35 -23
  156. package/4.api/5.kit/16.layers.md +16 -16
  157. package/4.api/5.kit/2.programmatic.md +2 -2
  158. package/4.api/5.kit/3.compatibility.md +2 -2
  159. package/4.api/5.kit/4.autoimports.md +23 -19
  160. package/4.api/5.kit/5.components.md +35 -35
  161. package/4.api/5.kit/6.context.md +1 -1
  162. package/4.api/5.kit/8.layout.md +1 -1
  163. package/4.api/6.advanced/1.hooks.md +85 -85
  164. package/4.api/index.md +7 -7
  165. package/5.community/4.contribution.md +10 -10
  166. package/5.community/5.framework-contribution.md +9 -9
  167. package/5.community/6.roadmap.md +26 -26
  168. package/5.community/7.changelog.md +10 -0
  169. package/6.bridge/1.overview.md +8 -0
  170. package/6.bridge/3.bridge-composition-api.md +2 -2
  171. package/6.bridge/4.plugins-and-middleware.md +2 -2
  172. package/6.bridge/5.nuxt3-compatible-api.md +1 -1
  173. package/6.bridge/8.nitro.md +4 -0
  174. package/7.migration/10.bundling.md +1 -1
  175. package/7.migration/11.server.md +3 -3
  176. package/7.migration/2.configuration.md +5 -5
  177. package/7.migration/20.module-authors.md +3 -3
  178. package/7.migration/4.meta.md +1 -1
  179. package/7.migration/5.plugins-and-middleware.md +3 -3
  180. package/7.migration/6.pages-and-layouts.md +5 -5
  181. package/7.migration/7.component-options.md +6 -6
  182. package/7.migration/8.runtime-config.md +1 -1
  183. package/package.json +1 -1
  184. package/3.guide/4.going-further/1.features.md +0 -103
  185. package/3.guide/4.going-further/3.modules.md +0 -901
  186. /package/3.guide/{3.recipes → 5.recipes}/.navigation.yml +0 -0
  187. /package/3.guide/{4.going-further → 6.going-further}/.navigation.yml +0 -0
  188. /package/3.guide/{4.going-further → 6.going-further}/index.md +0 -0
@@ -3,14 +3,44 @@ title: "Experimental Features"
3
3
  description: "Enable Nuxt experimental features to unlock new possibilities."
4
4
  ---
5
5
 
6
- The Nuxt experimental features can be enabled in the Nuxt configuration file.
6
+ Nuxt includes experimental features that you can enable in your configuration file.
7
7
 
8
- Internally, Nuxt uses `@nuxt/schema` to define these experimental features. You can refer to the [API documentation](/docs/3.x/api/configuration/nuxt-config#experimental) or the [source code](https://github.com/nuxt/nuxt/blob/main/packages/schema/src/config/experimental.ts) for more information.
8
+ Internally, Nuxt uses `@nuxt/schema` to define these experimental features. You can refer to the [API documentation](/docs/3.x/guide/going-further/experimental-features) or the [source code](https://github.com/nuxt/nuxt/blob/main/packages/schema/src/config/experimental.ts) for more information.
9
9
 
10
10
  ::note
11
11
  Note that these features are experimental and could be removed or modified in the future.
12
12
  ::
13
13
 
14
+ ## alwaysRunFetchOnKeyChange
15
+
16
+ Whether to run `useFetch` when the key changes, even if it is set to `immediate: false` and it has not been triggered yet.
17
+
18
+ `useFetch` and `useAsyncData` will always run when the key changes if `immediate: true` or if it has been already triggered.
19
+
20
+ This flag is disabled by default, but you can enable this feature:
21
+
22
+ ```ts twoslash [nuxt.config.ts]
23
+ export default defineNuxtConfig({
24
+ experimental: {
25
+ alwaysRunFetchOnKeyChange: true,
26
+ },
27
+ })
28
+ ```
29
+
30
+ ## appManifest
31
+
32
+ Use app manifests to respect route rules on client-side.
33
+
34
+ This flag is enabled by default, but you can disable this feature:
35
+
36
+ ```ts twoslash [nuxt.config.ts]
37
+ export default defineNuxtConfig({
38
+ experimental: {
39
+ appManifest: false,
40
+ },
41
+ })
42
+ ```
43
+
14
44
  ## asyncContext
15
45
 
16
46
  Enable native async context to be accessible for nested composables in Nuxt and in Nitro. This opens the possibility to use composables inside async composables and reduce the chance to get the `Nuxt instance is unavailable` error.
@@ -43,12 +73,12 @@ export default defineNuxtConfig({
43
73
 
44
74
  Externalizes `vue`, `@vue/*` and `vue-router` when building.
45
75
 
46
- *Enabled by default.*
76
+ This flag is enabled by default, but you can disable this feature:
47
77
 
48
78
  ```ts twoslash [nuxt.config.ts]
49
79
  export default defineNuxtConfig({
50
80
  experimental: {
51
- externalVue: true,
81
+ externalVue: false,
52
82
  },
53
83
  })
54
84
  ```
@@ -57,20 +87,6 @@ export default defineNuxtConfig({
57
87
  This feature will likely be removed in a near future.
58
88
  ::
59
89
 
60
- ## treeshakeClientOnly
61
-
62
- Tree shakes contents of client-only components from server bundle.
63
-
64
- *Enabled by default.*
65
-
66
- ```ts twoslash [nuxt.config.ts]
67
- export default defineNuxtConfig({
68
- experimental: {
69
- treeshakeClientOnly: true,
70
- },
71
- })
72
- ```
73
-
74
90
  ## extractAsyncDataHandlers
75
91
 
76
92
  Extracts handler functions from `useAsyncData` and `useLazyAsyncData` calls into separate chunks for improved code splitting and caching efficiency.
@@ -113,7 +129,9 @@ This feature is only recommended for **static builds** with payload extraction,
113
129
 
114
130
  Emits `app:chunkError` hook when there is an error loading vite/webpack chunks. Default behavior is to perform a reload of the new route on navigation to a new route when a chunk fails to load.
115
131
 
116
- If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/3.x/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
132
+ By default, Nuxt will also perform a reload of the new route when a chunk fails to load when navigating to a new route (`automatic`).
133
+
134
+ Setting `automatic-immediate` will lead Nuxt to perform a reload of the current route right when a chunk fails to load (instead of waiting for navigation). This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/3.x/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
117
135
 
118
136
  You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
119
137
 
@@ -125,6 +143,20 @@ export default defineNuxtConfig({
125
143
  })
126
144
  ```
127
145
 
146
+ ## enforceModuleCompatibility
147
+
148
+ Whether Nuxt should throw an error (and fail to load) if a Nuxt module is incompatible.
149
+
150
+ This feature is disabled by default.
151
+
152
+ ```ts twoslash [nuxt.config.ts]
153
+ export default defineNuxtConfig({
154
+ experimental: {
155
+ enforceModuleCompatibility: true,
156
+ },
157
+ })
158
+ ```
159
+
128
160
  ## restoreState
129
161
 
130
162
  Allows Nuxt app state to be restored from `sessionStorage` when reloading the page after a chunk error or manual [`reloadNuxtApp()`](/docs/3.x/api/utils/reload-nuxt-app) call.
@@ -158,22 +190,22 @@ export default defineNuxtConfig({
158
190
 
159
191
  Matching route rules will be created, based on the page's `path`.
160
192
 
161
- ::read-more{to="/docs/api/utils/define-route-rules" icon="i-lucide-square-function"}
193
+ ::read-more{to="/docs/3.x/api/utils/define-route-rules" icon="i-lucide-square-function"}
162
194
  Read more in `defineRouteRules` utility.
163
195
  ::
164
196
 
165
- :read-more{to="/docs/guide/concepts/rendering#hybrid-rendering" icon="i-lucide-medal"}
197
+ :read-more{to="/docs/3.x/guide/concepts/rendering#hybrid-rendering" icon="i-lucide-medal"}
166
198
 
167
199
  ## renderJsonPayloads
168
200
 
169
201
  Allows rendering of JSON payloads with support for revivifying complex types.
170
202
 
171
- *Enabled by default.*
203
+ This flag is enabled by default, but you can disable this feature:
172
204
 
173
205
  ```ts twoslash [nuxt.config.ts]
174
206
  export default defineNuxtConfig({
175
207
  experimental: {
176
- renderJsonPayloads: true,
208
+ renderJsonPayloads: false,
177
209
  },
178
210
  })
179
211
  ```
@@ -190,6 +222,20 @@ export default defineNuxtConfig({
190
222
  })
191
223
  ```
192
224
 
225
+ ## parseErrorData
226
+
227
+ Whether to parse `error.data` when rendering a server error page.
228
+
229
+ This flag is enabled by default, but you can disable this feature:
230
+
231
+ ```ts twoslash [nuxt.config.ts]
232
+ export default defineNuxtConfig({
233
+ experimental: {
234
+ parseErrorData: false,
235
+ },
236
+ })
237
+ ```
238
+
193
239
  ## payloadExtraction
194
240
 
195
241
  Enables extraction of payloads of pages generated with `nuxt generate`.
@@ -202,6 +248,21 @@ export default defineNuxtConfig({
202
248
  })
203
249
  ```
204
250
 
251
+ Payload extraction also works for routes using ISR (Incremental Static Regeneration) or SWR (Stale-While-Revalidate) caching strategies. This allows CDNs to cache payload files alongside HTML, improving client-side navigation performance for cached routes.
252
+
253
+ ```ts twoslash [nuxt.config.ts]
254
+ export default defineNuxtConfig({
255
+ experimental: {
256
+ payloadExtraction: true,
257
+ },
258
+ routeRules: {
259
+ // Payload files will be generated for these cached routes
260
+ '/products/**': { isr: 3600 },
261
+ '/blog/**': { swr: true },
262
+ },
263
+ })
264
+ ```
265
+
205
266
  ## clientFallback
206
267
 
207
268
  Enables the experimental [`<NuxtClientFallback>`](/docs/3.x/api/components/nuxt-client-fallback) component for rendering content on the client if there's an error in SSR.
@@ -244,7 +305,7 @@ export default defineNuxtConfig({
244
305
 
245
306
  :link-example{to="https://stackblitz.com/edit/nuxt-view-transitions?file=app.vue" target="_blank"}
246
307
 
247
- ::read-more{icon="i-simple-icons-mdnwebdocs" to="https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API" target="_blank"}
308
+ ::read-more{icon="i-simple-icons-mdnwebdocs" to="https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API" target="_blank"}
248
309
  Read more about the **View Transition API**.
249
310
  ::
250
311
 
@@ -272,60 +333,22 @@ export default defineNuxtConfig({
272
333
  })
273
334
  ```
274
335
 
275
- :read-more{to="/docs/guide/directory-structure/components#server-components"}
336
+ :read-more{to="/docs/3.x/directory-structure/components#server-components"}
276
337
 
277
338
  ::read-more{icon="i-simple-icons-github" to="https://github.com/nuxt/nuxt/issues/19772" target="_blank"}
278
339
  You can follow the server components roadmap on GitHub.
279
340
  ::
280
341
 
281
- ## configSchema
282
-
283
- Enables config schema support.
284
-
285
- *Enabled by default.*
286
-
287
- ```ts twoslash [nuxt.config.ts]
288
- export default defineNuxtConfig({
289
- experimental: {
290
- configSchema: true,
291
- },
292
- })
293
- ```
294
-
295
- ## polyfillVueUseHead
296
-
297
- Adds a compatibility layer for modules, plugins, or user code relying on the old `@vueuse/head` API.
298
-
299
- ```ts twoslash [nuxt.config.ts]
300
- export default defineNuxtConfig({
301
- experimental: {
302
- polyfillVueUseHead: false,
303
- },
304
- })
305
- ```
306
-
307
- ## respectNoSSRHeader
308
-
309
- Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header.
310
-
311
- ```ts twoslash [nuxt.config.ts]
312
- export default defineNuxtConfig({
313
- experimental: {
314
- respectNoSSRHeader: false,
315
- },
316
- })
317
- ```
318
-
319
342
  ## localLayerAliases
320
343
 
321
344
  Resolve `~`, `~~`, `@` and `@@` aliases located within layers with respect to their layer source and root directories.
322
345
 
323
- *Enabled by default.*
346
+ This flag is enabled by default, but you can disable this feature:
324
347
 
325
348
  ```ts twoslash [nuxt.config.ts]
326
349
  export default defineNuxtConfig({
327
350
  experimental: {
328
- localLayerAliases: true,
351
+ localLayerAliases: false,
329
352
  },
330
353
  })
331
354
  ```
@@ -374,14 +397,14 @@ export default defineNuxtConfig({
374
397
 
375
398
  ## sharedPrerenderData
376
399
 
377
- Enabling this feature automatically shares payload *data* between pages that are prerendered. This can result
378
- in a significant performance improvement when prerendering sites that use `useAsyncData` or `useFetch` and
379
- fetch the same data in different pages.
400
+ Nuxt automatically shares payload *data* between pages that are prerendered. This can result in a significant performance improvement when prerendering sites that use `useAsyncData` or `useFetch` and fetch the same data in different pages.
401
+
402
+ You can disable this feature if needed.
380
403
 
381
404
  ```ts twoslash [nuxt.config.ts]
382
405
  export default defineNuxtConfig({
383
406
  experimental: {
384
- sharedPrerenderData: true,
407
+ sharedPrerenderData: false,
385
408
  },
386
409
  })
387
410
  ```
@@ -422,11 +445,11 @@ globalThis.Buffer ||= Buffer
422
445
 
423
446
  ## scanPageMeta
424
447
 
425
- This option allows exposing some route metadata defined in `definePageMeta` at build-time to modules (specifically `alias`, `name`, `path`, `redirect`, `props` and `middleware`).
448
+ Nuxt exposing some route metadata defined in `definePageMeta` at build-time to modules (specifically `alias`, `name`, `path`, `redirect`, `props` and `middleware`).
426
449
 
427
450
  This only works with static or strings/arrays rather than variables or conditional assignment. See [original issue](https://github.com/nuxt/nuxt/issues/24770) for more information and context.
428
451
 
429
- It is also possible to scan page metadata only after all routes have been registered in `pages:extend`. Then another hook, `pages:resolved` will be called. To enable this behavior, set `scanPageMeta: 'after-resolve'`.
452
+ By default page metadata is only scanned after all routes have been registered in `pages:extend`. Then another hook, `pages:resolved` will be called.
430
453
 
431
454
  You can disable this feature if it causes issues in your project.
432
455
 
@@ -442,10 +465,12 @@ export default defineNuxtConfig({
442
465
 
443
466
  Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh `useCookie` ref values.
444
467
 
468
+ This flag is enabled by default, but you can disable this feature:
469
+
445
470
  ```ts twoslash [nuxt.config.ts]
446
471
  export default defineNuxtConfig({
447
472
  experimental: {
448
- cookieStore: true,
473
+ cookieStore: false,
449
474
  },
450
475
  })
451
476
  ```
@@ -458,6 +483,10 @@ Read more about the **CookieStore**.
458
483
 
459
484
  Caches Nuxt build artifacts based on a hash of the configuration and source files.
460
485
 
486
+ This only works for source files within `srcDir` and `serverDir` for the Vue/Nitro parts of your app.
487
+
488
+ This flag is disabled by default, but you can enable it:
489
+
461
490
  ```ts twoslash [nuxt.config.ts]
462
491
  export default defineNuxtConfig({
463
492
  experimental: {
@@ -486,6 +515,20 @@ In addition, any changes to files within `srcDir` will trigger a rebuild of the
486
515
  A maximum of 10 cache tarballs are kept.
487
516
  ::
488
517
 
518
+ ## checkOutdatedBuildInterval
519
+
520
+ Set the time interval (in ms) to check for new builds. Disabled when `experimental.appManifest` is `false`.
521
+
522
+ Set to `false` to disable.
523
+
524
+ ```ts twoslash [nuxt.config.ts]
525
+ export default defineNuxtConfig({
526
+ experimental: {
527
+ checkOutdatedBuildInterval: 3600000, // 1 hour, or false to disable
528
+ },
529
+ })
530
+ ```
531
+
489
532
  ## extraPageMetaExtractionKeys
490
533
 
491
534
  The `definePageMeta()` macro is a useful way to collect build-time meta about pages. Nuxt itself provides a set list of supported keys which is used to power some of the internal features such as redirects, page aliases and custom paths.
@@ -515,15 +558,32 @@ export default defineNuxtConfig({
515
558
 
516
559
  This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/3.x/directory-structure/pages#typing-custom-metadata).
517
560
 
561
+ ## navigationRepaint
562
+
563
+ Wait for a single animation frame before navigation, which gives an opportunity for the browser to repaint, acknowledging user interaction.
564
+
565
+ It can reduce INP when navigating on prerendered routes.
566
+
567
+ This flag is enabled by default, but you can disable this feature:
568
+
569
+ ```ts twoslash [nuxt.config.ts]
570
+ export default defineNuxtConfig({
571
+ experimental: {
572
+ navigationRepaint: false,
573
+ },
574
+ })
575
+ ```
576
+
518
577
  ## normalizeComponentNames
519
578
 
520
- Ensure that auto-generated Vue component names match the full component name
521
- you would use to auto-import the component.
579
+ Nuxt updates auto-generated Vue component names to match the full component name you would use to auto-import the component.
580
+
581
+ If you encounter issues, you can disable this feature.
522
582
 
523
583
  ```ts twoslash [nuxt.config.ts]
524
584
  export default defineNuxtConfig({
525
585
  experimental: {
526
- normalizeComponentNames: true,
586
+ normalizeComponentNames: false,
527
587
  },
528
588
  })
529
589
  ```
@@ -545,7 +605,7 @@ By setting `experimental.normalizeComponentNames`, these two values match, and V
545
605
 
546
606
  ## spaLoadingTemplateLocation
547
607
 
548
- When rendering a client-only page (with `ssr: false`), we optionally render a loading screen (from `app/spa-loading-template.html`).
608
+ When rendering a client-only page (with `ssr: false`), we optionally render a loading screen (from `~/spa-loading-template.html`).
549
609
 
550
610
  It can be set to `within`, which will render it like this:
551
611
 
@@ -620,15 +680,17 @@ export default defineNuxtConfig({
620
680
  })
621
681
  ```
622
682
 
623
- ::read-more{icon="i-simple-icons-github" color="gray" to="/docs/guide/directory-structure/components#delayed-or-lazy-hydration"}
683
+ ::read-more{icon="i-simple-icons-github" color="gray" to="/docs/3.x/directory-structure/components#delayed-or-lazy-hydration"}
624
684
  Read more about lazy hydration.
625
685
  ::
626
686
 
627
687
  ## templateImportResolution
628
688
 
629
- Controls how imports in Nuxt templates are resolved. By default, Nuxt attempts to resolve imports in templates relative to the module that added them.
689
+ Disable resolving imports into Nuxt templates from the path of the module that added the template.
630
690
 
631
- This is enabled by default, so if you're experiencing resolution conflicts in certain environments, you can disable this behavior:
691
+ By default, Nuxt attempts to resolve imports in templates relative to the module that added them. Setting this to `false` disables this behavior, which may be useful if you're experiencing resolution conflicts in certain environments.
692
+
693
+ This flag is enabled by default, but you can disable this feature:
632
694
 
633
695
  ```ts twoslash [nuxt.config.ts]
634
696
  export default defineNuxtConfig({
@@ -642,6 +704,22 @@ export default defineNuxtConfig({
642
704
  See PR #31175 for implementation details.
643
705
  ::
644
706
 
707
+ ## templateRouteInjection
708
+
709
+ By default the route object returned by the auto-imported `useRoute()` composable is kept in sync with the current page in view in `<NuxtPage>`. This is not true for `vue-router`'s exported `useRoute` or for the default `$route` object available in your Vue templates.
710
+
711
+ By enabling this option a mixin will be injected to keep the `$route` template object in sync with Nuxt's managed `useRoute()`.
712
+
713
+ This flag is enabled by default, but you can disable this feature:
714
+
715
+ ```ts twoslash [nuxt.config.ts]
716
+ export default defineNuxtConfig({
717
+ experimental: {
718
+ templateRouteInjection: false,
719
+ },
720
+ })
721
+ ```
722
+
645
723
  ## decorators
646
724
 
647
725
  This option enables enabling decorator syntax across your entire Nuxt/Nitro app, powered by [esbuild](https://github.com/evanw/esbuild/releases/tag/v0.21.3).
@@ -680,10 +758,38 @@ const value = new SomeClass().someMethod()
680
758
  // this will return 'decorated'
681
759
  ```
682
760
 
761
+ ## defaults
762
+
763
+ This allows specifying the default options for core Nuxt components and composables.
764
+
765
+ These options will likely be moved elsewhere in the future, such as into `app.config` or into the `app/` directory.
766
+
767
+ ```ts twoslash [nuxt.config.ts]
768
+ export default defineNuxtConfig({
769
+ experimental: {
770
+ defaults: {
771
+ nuxtLink: {
772
+ componentName: 'NuxtLink',
773
+ prefetch: true,
774
+ prefetchOn: {
775
+ visibility: true,
776
+ },
777
+ },
778
+ useAsyncData: {
779
+ deep: true,
780
+ },
781
+ },
782
+ },
783
+ })
784
+ ```
785
+
683
786
  ## purgeCachedData
684
787
 
685
- Nuxt will automatically purge cached data from `useAsyncData` and `nuxtApp.static.data`. This helps prevent memory leaks
686
- and ensures fresh data is loaded when needed, but it is possible to disable it:
788
+ Whether to clean up Nuxt static and asyncData caches on route navigation.
789
+
790
+ Nuxt will automatically purge cached data from `useAsyncData` and `nuxtApp.static.data`. This helps prevent memory leaks and ensures fresh data is loaded when needed, but it is possible to disable it.
791
+
792
+ This flag is enabled by default, but you can disable this feature:
687
793
 
688
794
  ```ts twoslash [nuxt.config.ts]
689
795
  export default defineNuxtConfig({
@@ -701,10 +807,12 @@ See PR #31379 for implementation details.
701
807
 
702
808
  Whether to call and use the result from `getCachedData` when refreshing data for `useAsyncData` and `useFetch` (whether by `watch`, `refreshNuxtData()`, or a manual `refresh()` call.
703
809
 
810
+ This flag is enabled by default, but you can disable this feature:
811
+
704
812
  ```ts twoslash [nuxt.config.ts]
705
813
  export default defineNuxtConfig({
706
814
  experimental: {
707
- granularCachedData: true,
815
+ granularCachedData: false,
708
816
  },
709
817
  })
710
818
  ```
@@ -713,16 +821,33 @@ export default defineNuxtConfig({
713
821
  See PR #31373 for implementation details.
714
822
  ::
715
823
 
824
+ ## headNext
825
+
826
+ Use head optimisations:
827
+
828
+ - Add the capo.js head plugin in order to render tags in of the head in a more performant way.
829
+ - Uses the hash hydration plugin to reduce initial hydration
830
+
831
+ This flag is enabled by default, but you can disable this feature:
832
+
833
+ ```ts twoslash [nuxt.config.ts]
834
+ export default defineNuxtConfig({
835
+ experimental: {
836
+ headNext: false,
837
+ },
838
+ })
839
+ ```
840
+
716
841
  ## pendingWhenIdle
717
842
 
718
- If set to `false`, the `pending` object returned from `useAsyncData`, `useFetch`, `useLazyAsyncData` and `useLazyFetch` will be a computed property that is `true` only when `status` is also pending.
843
+ For `useAsyncData` and `useFetch`, whether `pending` should be `true` when data has not yet started to be fetched.
719
844
 
720
- That means that when `immediate: false` is passed, `pending` will be `false` until the first request is made.
845
+ This flag is disabled by default, but you can enable this feature:
721
846
 
722
847
  ```ts twoslash [nuxt.config.ts]
723
848
  export default defineNuxtConfig({
724
849
  experimental: {
725
- pendingWhenIdle: false,
850
+ pendingWhenIdle: true,
726
851
  },
727
852
  })
728
853
  ```
@@ -803,7 +928,7 @@ export default defineNuxtConfig({
803
928
  The Vite Environment API provides better consistency between development and production builds, more granular control over environment-specific configuration, and improved performance.
804
929
 
805
930
  ::important
806
- Enabling this feature changes how Vite plugins are registered and configured. See the [Vite Environment API migration guide](/docs/4.x/getting-started/upgrade#migration-to-vite-environment-api) for details on updating your plugins.
931
+ Enabling this feature changes how Vite plugins are registered and configured. See the [Vite Environment API migration guide](/docs/3.x/getting-started/upgrade#migration-to-vite-environment-api) for details on updating your plugins.
807
932
  ::
808
933
 
809
934
  ::read-more{to="https://vite.dev/guide/api-environment" target="_blank"}
@@ -0,0 +1,108 @@
1
+ ---
2
+ title: "Features"
3
+ description: "Enable or disable optional Nuxt features to unlock new possibilities."
4
+ ---
5
+
6
+ Some features of Nuxt are available on an opt-in basis, or can be disabled based on your needs.
7
+
8
+ ## `features`
9
+
10
+ ### devLogs
11
+
12
+ Stream server logs to the client as you are developing. These logs can be handled in the `dev:ssr-logs` hook.
13
+
14
+ By default, this is enabled in development (when test mode is not active).
15
+
16
+ If set to `silent`, the logs will not be printed to the browser console.
17
+
18
+ ```ts [nuxt.config.ts]
19
+ export default defineNuxtConfig({
20
+ features: {
21
+ devLogs: true,
22
+ },
23
+ })
24
+ ```
25
+
26
+ ### inlineStyles
27
+
28
+ Inlines styles when rendering HTML. This is currently available only when using Vite.
29
+
30
+ You can also pass a function that receives the path of a Vue component and returns a boolean indicating whether to inline the styles for that component.
31
+
32
+ It defaults to `(id) => id.includes('.vue')`.
33
+
34
+ ```ts [nuxt.config.ts]
35
+ export default defineNuxtConfig({
36
+ features: {
37
+ inlineStyles: false, // or a function to determine inlining
38
+ },
39
+ })
40
+ ```
41
+
42
+ ### noScripts
43
+
44
+ Turn off rendering of Nuxt scripts and JavaScript resource hints. Can also be configured granularly within `routeRules`.
45
+
46
+ You can also disable scripts more granularly within `routeRules`.
47
+
48
+ If set to 'production' or `true`, JavaScript will be disabled in production mode only. If set to 'all', JavaScript will be disabled in both development and production modes.
49
+
50
+ ```ts [nuxt.config.ts]
51
+ export default defineNuxtConfig({
52
+ features: {
53
+ noScripts: true, // or 'production' | 'all' | false
54
+ },
55
+ })
56
+ ```
57
+
58
+ ## `future`
59
+
60
+ There is also a `future` namespace for early opting-in to new features that will become default in a future (possibly major) version of the framework.
61
+
62
+ ### compatibilityVersion
63
+
64
+ This enables early access to Nuxt features or flags.
65
+
66
+ Setting `compatibilityVersion` to `5` changes defaults throughout your Nuxt configuration to opt in to Nuxt v5 behaviour, including enabling the [Vite Environment API](/docs/3.x/guide/going-further/experimental-features#viteenvironmentapi).
67
+
68
+ ```ts
69
+ export default defineNuxtConfig({
70
+ future: {
71
+ compatibilityVersion: 5,
72
+ },
73
+ })
74
+ ```
75
+
76
+ ::read-more{to="/docs/3.x/getting-started/upgrade#testing-nuxt-5"}
77
+ Learn more about testing Nuxt 5.
78
+ ::
79
+
80
+ ### multiApp
81
+
82
+ This enables early access to the experimental multi-app support. You can follow the [tracker issue #21635](https://github.com/nuxt/nuxt/issues/21635) to see the progress of multi-app support in Nuxt.
83
+
84
+ ```ts [nuxt.config.ts]
85
+ export default defineNuxtConfig({
86
+ future: {
87
+ multiApp: true,
88
+ },
89
+ })
90
+ ```
91
+
92
+ ### typescriptBundlerResolution
93
+
94
+ This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting for frameworks like Nuxt and [Vite](https://vite.dev/guide/performance#reduce-resolve-operations).
95
+
96
+ It improves type support when using modern libraries with `exports`.
97
+
98
+ See [the original TypeScript pull request](https://github.com/microsoft/TypeScript/pull/51669).
99
+
100
+ You can set it to false to use the legacy 'Node' mode, which is the default for TypeScript.
101
+
102
+ ```ts [nuxt.config.ts]
103
+ export default defineNuxtConfig({
104
+ future: {
105
+ typescriptBundlerResolution: false,
106
+ },
107
+ })
108
+ ```
@@ -1,6 +1,7 @@
1
1
  ---
2
2
  title: "How Nuxt Works?"
3
3
  description: "Nuxt is a minimal but highly customizable framework to build web applications."
4
+ navigation: false
4
5
  ---
5
6
 
6
7
  This guide helps you better understand Nuxt internals to develop new solutions and module integrations on top of Nuxt.
@@ -15,7 +16,7 @@ allowing different components to communicate with each other. You can think of i
15
16
  This context is globally available to be used with [Nuxt Kit](/docs/3.x/guide/going-further/kit) composables.
16
17
  Therefore only one instance of Nuxt is allowed to run per process.
17
18
 
18
- To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt Modules](/docs/3.x/guide/going-further/modules).
19
+ To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt modules](/docs/3.x/guide/modules).
19
20
 
20
21
  For more details, check out [the source code](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/core/nuxt.ts).
21
22
 
@@ -76,6 +77,6 @@ Nuxt builds and bundles project using Node.js but also has a runtime side.
76
77
 
77
78
  While both areas can be extended, that runtime context is isolated from build-time. Therefore, they are not supposed to share state, code, or context other than runtime configuration!
78
79
 
79
- `nuxt.config` and [Nuxt Modules](/docs/3.x/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/3.x/directory-structure/plugins) can be used to extend runtime.
80
+ `nuxt.config` and [Nuxt modules](/docs/3.x/guide/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/3.x/directory-structure/plugins) can be used to extend runtime.
80
81
 
81
- When building an application for production, `nuxt build` will generate a standalone build in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/3.x/guide/going-further/modules).
82
+ When building an application for production, `nuxt build` will generate a standalone build in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/3.x/guide/modules).
@@ -41,11 +41,11 @@ Instead of passing non-serializable objects or functions into your application f
41
41
 
42
42
  ### Environment Variables
43
43
 
44
- The most common way to provide configuration is by using [Environment Variables](https://medium.com/chingu/an-introduction-to-environment-variables-and-how-to-use-them-f602f66d15fa).
44
+ The most common way to provide configuration is by using environment variables.
45
45
 
46
46
  ::note
47
47
  The Nuxt CLI has built-in support for reading your `.env` file in development, build and generate. But when you run your built server, **your `.env` file will not be read**.
48
- :read-more{to="/docs/guide/directory-structure/env"}
48
+ :read-more{to="/docs/3.x/directory-structure/env"}
49
49
  ::
50
50
 
51
51
  Runtime config values are **automatically replaced by matching environment variables at runtime**.
@@ -57,6 +57,6 @@ To try the latest version of [nuxt/cli](https://github.com/nuxt/cli):
57
57
  npx @nuxt/cli-nightly@latest [command]
58
58
  ```
59
59
 
60
- ::read-more{to="/docs/api/commands"}
60
+ ::read-more{to="/docs/3.x/api/commands"}
61
61
  Read more about the available commands.
62
62
  ::