@nuxt/docs-nightly 4.5.1-29752449.30d24817 → 4.5.2-2610052030-052d82e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (214) hide show
  1. package/1.getting-started/01.introduction.md +8 -8
  2. package/1.getting-started/02.installation.md +2 -4
  3. package/1.getting-started/03.configuration.md +16 -16
  4. package/1.getting-started/04.views.md +8 -8
  5. package/1.getting-started/05.assets.md +10 -10
  6. package/1.getting-started/06.styling.md +10 -10
  7. package/1.getting-started/07.routing.md +15 -15
  8. package/1.getting-started/08.seo-meta.md +15 -15
  9. package/1.getting-started/09.transitions.md +10 -10
  10. package/1.getting-started/10.data-fetching.md +61 -47
  11. package/1.getting-started/11.state-management.md +11 -11
  12. package/1.getting-started/12.error-handling.md +20 -18
  13. package/1.getting-started/13.server.md +7 -7
  14. package/1.getting-started/14.layers.md +6 -6
  15. package/1.getting-started/15.prerendering.md +22 -28
  16. package/1.getting-started/16.deployment.md +22 -6
  17. package/1.getting-started/17.testing.md +200 -21
  18. package/1.getting-started/18.upgrade.md +78 -278
  19. package/2.directory-structure/0.nuxt.md +2 -2
  20. package/2.directory-structure/0.output.md +3 -3
  21. package/2.directory-structure/1.app/1.assets.md +3 -3
  22. package/2.directory-structure/1.app/1.components.md +26 -109
  23. package/2.directory-structure/1.app/1.composables.md +5 -5
  24. package/2.directory-structure/1.app/1.layouts.md +10 -10
  25. package/2.directory-structure/1.app/1.middleware.md +14 -10
  26. package/2.directory-structure/1.app/1.pages.md +25 -20
  27. package/2.directory-structure/1.app/1.plugins.md +7 -7
  28. package/2.directory-structure/1.app/1.utils.md +9 -5
  29. package/2.directory-structure/1.app/3.app-config.md +7 -7
  30. package/2.directory-structure/1.app/3.app.md +6 -6
  31. package/2.directory-structure/1.app/3.error.md +1 -1
  32. package/2.directory-structure/1.content.md +1 -1
  33. package/2.directory-structure/1.layers.md +13 -13
  34. package/2.directory-structure/1.modules.md +3 -3
  35. package/2.directory-structure/1.node_modules.md +1 -1
  36. package/2.directory-structure/1.server.md +33 -14
  37. package/2.directory-structure/1.shared.md +7 -5
  38. package/2.directory-structure/1.test.md +25 -0
  39. package/2.directory-structure/2.env.md +7 -7
  40. package/2.directory-structure/2.nuxtignore.md +3 -3
  41. package/2.directory-structure/2.nuxtrc.md +3 -3
  42. package/2.directory-structure/3.nuxt-config.md +2 -2
  43. package/2.directory-structure/3.tsconfig.md +21 -11
  44. package/2.directory-structure/index.md +29 -25
  45. package/3.guide/0.index.md +6 -6
  46. package/3.guide/1.concepts/1.rendering.md +76 -12
  47. package/3.guide/1.concepts/10.vuejs-development.md +73 -8
  48. package/3.guide/1.concepts/2.nuxt-lifecycle.md +18 -18
  49. package/3.guide/1.concepts/3.auto-imports.md +11 -11
  50. package/3.guide/1.concepts/4.server-engine.md +6 -6
  51. package/3.guide/1.concepts/5.modules.md +4 -4
  52. package/3.guide/1.concepts/6.server-components.md +198 -0
  53. package/3.guide/1.concepts/7.esm.md +5 -5
  54. package/3.guide/1.concepts/8.typescript.md +9 -9
  55. package/3.guide/2.best-practices/accessibility.md +155 -0
  56. package/3.guide/2.best-practices/hydration.md +5 -5
  57. package/3.guide/2.best-practices/performance.md +13 -9
  58. package/3.guide/3.ai/1.mcp.md +104 -19
  59. package/3.guide/4.modules/2.module-anatomy.md +5 -5
  60. package/3.guide/4.modules/3.recipes-basics.md +8 -8
  61. package/3.guide/4.modules/4.module-dependencies.md +1 -1
  62. package/3.guide/4.modules/5.recipes-advanced.md +6 -8
  63. package/3.guide/4.modules/6.testing.md +2 -2
  64. package/3.guide/4.modules/7.best-practices.md +2 -2
  65. package/3.guide/4.modules/9.server-compatibility.md +215 -0
  66. package/3.guide/4.modules/index.md +9 -9
  67. package/3.guide/5.recipes/1.custom-routing.md +15 -11
  68. package/3.guide/5.recipes/2.vite-plugin.md +3 -3
  69. package/3.guide/5.recipes/3.custom-usefetch.md +5 -5
  70. package/3.guide/5.recipes/4.sessions-and-authentication.md +2 -2
  71. package/3.guide/5.recipes/5.mostly-static-sites.md +127 -0
  72. package/3.guide/6.going-further/1.events.md +1 -1
  73. package/3.guide/6.going-further/1.experimental-features.md +254 -22
  74. package/3.guide/6.going-further/1.features.md +42 -6
  75. package/3.guide/6.going-further/1.internals.md +10 -10
  76. package/3.guide/6.going-further/10.runtime-config.md +28 -6
  77. package/3.guide/6.going-further/11.nightly-release-channel.md +1 -1
  78. package/3.guide/6.going-further/2.hooks.md +6 -6
  79. package/3.guide/6.going-further/4.kit.md +4 -4
  80. package/3.guide/6.going-further/5.server-imports.md +221 -0
  81. package/3.guide/6.going-further/6.nuxt-app.md +7 -7
  82. package/3.guide/6.going-further/7.layers.md +13 -13
  83. package/3.guide/6.going-further/8.builders.md +38 -14
  84. package/4.api/1.components/1.nuxt-client-fallback.md +1 -1
  85. package/4.api/1.components/10.nuxt-picture.md +1 -1
  86. package/4.api/1.components/11.teleports.md +1 -1
  87. package/4.api/1.components/12.nuxt-route-announcer.md +5 -3
  88. package/4.api/1.components/14.nuxt-announcer.md +3 -3
  89. package/4.api/1.components/2.nuxt-page.md +5 -5
  90. package/4.api/1.components/3.nuxt-layout.md +8 -8
  91. package/4.api/1.components/4.nuxt-link.md +6 -4
  92. package/4.api/1.components/5.nuxt-loading-indicator.md +3 -3
  93. package/4.api/1.components/6.nuxt-error-boundary.md +1 -1
  94. package/4.api/1.components/8.nuxt-island.md +5 -5
  95. package/4.api/2.composables/create-use-async-data.md +51 -8
  96. package/4.api/2.composables/create-use-fetch.md +126 -9
  97. package/4.api/2.composables/use-announcer.md +3 -3
  98. package/4.api/2.composables/use-app-config.md +1 -1
  99. package/4.api/2.composables/use-async-data.md +19 -11
  100. package/4.api/2.composables/use-cookie.md +22 -6
  101. package/4.api/2.composables/use-error.md +1 -1
  102. package/4.api/2.composables/use-fetch.md +14 -10
  103. package/4.api/2.composables/use-head-safe.md +2 -2
  104. package/4.api/2.composables/use-head.md +2 -2
  105. package/4.api/2.composables/use-hydration.md +1 -1
  106. package/4.api/2.composables/use-layout.md +1 -1
  107. package/4.api/2.composables/use-lazy-async-data.md +8 -8
  108. package/4.api/2.composables/use-lazy-fetch.md +11 -11
  109. package/4.api/2.composables/use-loading-indicator.md +2 -2
  110. package/4.api/2.composables/use-nuxt-app.md +13 -13
  111. package/4.api/2.composables/use-nuxt-data.md +1 -1
  112. package/4.api/2.composables/use-preview-mode.md +3 -3
  113. package/4.api/2.composables/use-request-event.md +29 -3
  114. package/4.api/2.composables/use-request-fetch.md +2 -2
  115. package/4.api/2.composables/use-request-header.md +1 -1
  116. package/4.api/2.composables/use-request-headers.md +1 -1
  117. package/4.api/2.composables/use-request-url.md +1 -1
  118. package/4.api/2.composables/use-response-header.md +2 -2
  119. package/4.api/2.composables/use-route-announcer.md +4 -2
  120. package/4.api/2.composables/use-route.md +2 -2
  121. package/4.api/2.composables/use-router.md +5 -5
  122. package/4.api/2.composables/use-runtime-config.md +5 -5
  123. package/4.api/2.composables/use-runtime-hook.md +1 -1
  124. package/4.api/2.composables/use-seo-meta.md +3 -3
  125. package/4.api/2.composables/use-server-seo-meta.md +5 -5
  126. package/4.api/2.composables/use-state.md +4 -4
  127. package/4.api/3.utils/$fetch.md +5 -5
  128. package/4.api/3.utils/abort-navigation.md +1 -1
  129. package/4.api/3.utils/add-route-middleware.md +2 -2
  130. package/4.api/3.utils/call-once.md +3 -3
  131. package/4.api/3.utils/clear-error.md +2 -2
  132. package/4.api/3.utils/clear-nuxt-data.md +1 -1
  133. package/4.api/3.utils/clear-nuxt-state.md +2 -2
  134. package/4.api/3.utils/create-error.md +19 -1
  135. package/4.api/3.utils/define-nuxt-plugin.md +2 -2
  136. package/4.api/3.utils/define-nuxt-route-middleware.md +3 -3
  137. package/4.api/3.utils/define-page-meta.md +12 -12
  138. package/4.api/3.utils/define-route-rules.md +4 -4
  139. package/4.api/3.utils/define-use-async-data-addon.md +57 -0
  140. package/4.api/3.utils/define-use-fetch-addon.md +168 -0
  141. package/4.api/3.utils/navigate-to.md +6 -2
  142. package/4.api/3.utils/prefetch-components.md +1 -1
  143. package/4.api/3.utils/preload-route-components.md +2 -2
  144. package/4.api/3.utils/prerender-routes.md +3 -3
  145. package/4.api/3.utils/refresh-cookie.md +1 -1
  146. package/4.api/3.utils/refresh-nuxt-data.md +3 -3
  147. package/4.api/3.utils/reload-nuxt-app.md +1 -1
  148. package/4.api/3.utils/set-page-layout.md +1 -1
  149. package/4.api/3.utils/set-response-status.md +2 -2
  150. package/4.api/3.utils/show-error.md +3 -3
  151. package/4.api/3.utils/update-app-config.md +2 -2
  152. package/4.api/4.commands/README.md +9 -0
  153. package/4.api/5.kit/1.modules.md +3 -3
  154. package/4.api/5.kit/10.runtime-config.md +1 -1
  155. package/4.api/5.kit/10.templates.md +42 -0
  156. package/4.api/5.kit/12.nitro.md +59 -18
  157. package/4.api/5.kit/14.logging.md +56 -2
  158. package/4.api/5.kit/15.builder.md +1 -1
  159. package/4.api/5.kit/18.dependencies.md +90 -0
  160. package/4.api/5.kit/2.programmatic.md +78 -1
  161. package/4.api/5.kit/3.compatibility.md +2 -2
  162. package/4.api/5.kit/4.autoimports.md +13 -13
  163. package/4.api/5.kit/5.components.md +3 -3
  164. package/4.api/5.kit/6.context.md +2 -2
  165. package/4.api/5.kit/7.pages.md +35 -4
  166. package/4.api/5.kit/8.layout.md +1 -1
  167. package/4.api/6.advanced/1.hooks.md +6 -3
  168. package/4.api/6.nuxt-config.md +44 -21
  169. package/4.api/index.md +7 -7
  170. package/5.community/2.getting-help.md +1 -1
  171. package/5.community/3.reporting-bugs.md +1 -1
  172. package/5.community/4.contribution.md +14 -12
  173. package/5.community/5.framework-contribution.md +4 -4
  174. package/5.community/6.roadmap.md +6 -6
  175. package/6.bridge/1.overview.md +12 -12
  176. package/6.bridge/2.typescript.md +1 -1
  177. package/6.bridge/3.bridge-composition-api.md +6 -6
  178. package/6.bridge/4.plugins-and-middleware.md +4 -4
  179. package/6.bridge/5.nuxt3-compatible-api.md +9 -9
  180. package/6.bridge/6.meta.md +5 -5
  181. package/6.bridge/7.runtime-config.md +1 -1
  182. package/6.bridge/8.nitro.md +1 -1
  183. package/6.bridge/9.vite.md +1 -1
  184. package/7.migration/1.overview.md +2 -2
  185. package/7.migration/10.bundling.md +1 -1
  186. package/7.migration/11.server.md +3 -3
  187. package/7.migration/2.configuration.md +6 -6
  188. package/7.migration/20.module-authors.md +7 -7
  189. package/7.migration/3.auto-imports.md +3 -3
  190. package/7.migration/4.meta.md +4 -4
  191. package/7.migration/5.plugins-and-middleware.md +3 -3
  192. package/7.migration/6.pages-and-layouts.md +13 -13
  193. package/7.migration/7.component-options.md +15 -15
  194. package/7.migration/8.runtime-config.md +4 -4
  195. package/README.md +1 -1
  196. package/errors/e8007.md +28 -0
  197. package/package.json +2 -2
  198. package/4.api/4.commands/.navigation.yml +0 -3
  199. package/4.api/4.commands/add.md +0 -112
  200. package/4.api/4.commands/analyze.md +0 -42
  201. package/4.api/4.commands/build-module.md +0 -42
  202. package/4.api/4.commands/build.md +0 -48
  203. package/4.api/4.commands/cleanup.md +0 -38
  204. package/4.api/4.commands/dev.md +0 -61
  205. package/4.api/4.commands/devtools.md +0 -38
  206. package/4.api/4.commands/generate.md +0 -43
  207. package/4.api/4.commands/info.md +0 -33
  208. package/4.api/4.commands/init.md +0 -50
  209. package/4.api/4.commands/module.md +0 -84
  210. package/4.api/4.commands/prepare.md +0 -41
  211. package/4.api/4.commands/preview.md +0 -44
  212. package/4.api/4.commands/test.md +0 -40
  213. package/4.api/4.commands/typecheck.md +0 -44
  214. package/4.api/4.commands/upgrade.md +0 -37
@@ -5,7 +5,7 @@ description: "Nuxt provides a runtime config API to expose configuration and sec
5
5
 
6
6
  ## Exposing
7
7
 
8
- To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your [`nuxt.config`](/docs/4.x/directory-structure/nuxt-config) file, using the [`runtimeConfig`](/docs/4.x/api/nuxt-config#runtimeconfig) option.
8
+ To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your [`nuxt.config`](/docs/directory-structure/nuxt-config) file, using the [`runtimeConfig`](/docs/api/nuxt-config#runtimeconfig) option.
9
9
 
10
10
  ```ts [nuxt.config.ts]
11
11
  export default defineNuxtConfig({
@@ -33,6 +33,28 @@ console.log(runtimeConfig.public.apiBase)
33
33
  Public runtime config is accessible in Vue templates with `$config.public`.
34
34
  ::
35
35
 
36
+ ### Application Secret
37
+
38
+ Runtime config keys prefixed with `app` are reserved for Nuxt (currently `runtimeConfig.app` and `runtimeConfig.appSecret`). Do not use them for your own values.
39
+
40
+ Nuxt provides a private `runtimeConfig.appSecret` as the application's root secret. Modules and server features derive their own secrets from it with [`deriveSecret`](/docs/guide/going-further/server-imports#deriving-secrets), and the [session helpers](/docs/guide/going-further/server-imports#sessions) seal with one by default. The value defaults to an empty string, is only available on the server, and you can set it with `NUXT_APP_SECRET` without declaring the key in `nuxt.config`.
41
+
42
+ Generate a secret that contains at least 32 random bytes:
43
+
44
+ ```bash [Terminal]
45
+ openssl rand -base64 32
46
+ ```
47
+
48
+ ::important
49
+ Use a different value for each environment, but keep it stable across deployments and server instances within that environment. Changing the value invalidates any sessions or signatures that depend on it.
50
+ ::
51
+
52
+ Nitro parses environment overrides, so a secret made only of digits or one that looks like JSON arrives as a number, boolean or object rather than a string. Wrap such a value in quotes (`NUXT_APP_SECRET='"12345..."'`) or set `runtimeConfig.appSecret` in `nuxt.config` instead.
53
+
54
+ In development, Nuxt generates a random secret and stores it in `.nuxt/app-secret` only when `appSecret` is unset, so features that depend on it work without any setup. A configured value is always used as is. Nuxt logs a warning the first time a derived secret is used with the generated value. Builds never generate one: set `NUXT_APP_SECRET` in every environment you deploy to.
55
+
56
+ Nuxt does not require `NUXT_APP_SECRET` unless a module or server feature uses it.
57
+
36
58
  ### Serialization
37
59
 
38
60
  Your runtime config will be serialized before being passed to Nitro. This means that anything that cannot be serialized and then deserialized (such as functions, Sets, Maps, and so on), should not be set in your `nuxt.config`.
@@ -45,14 +67,14 @@ The most common way to provide configuration is by using environment variables.
45
67
 
46
68
  ::note
47
69
  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/4.x/directory-structure/env"}
70
+ :read-more{to="/docs/directory-structure/env"}
49
71
  ::
50
72
 
51
73
  Runtime config values are **automatically replaced by matching environment variables at runtime**.
52
74
 
53
75
  There are two key requirements:
54
76
 
55
- 1. Your desired variables must be defined in your `nuxt.config`. This ensures that arbitrary environment variables are not exposed to your application code.
77
+ 1. Custom runtime config variables must be defined in your `nuxt.config`. This ensures that arbitrary environment variables are not exposed to your application code.
56
78
 
57
79
  1. Only a specially-named environment variable can override a runtime config property. That is, an uppercase environment variable starting with `NUXT_` which uses `_` to separate keys and case changes.
58
80
 
@@ -91,7 +113,7 @@ export default defineNuxtConfig({
91
113
 
92
114
  ### Vue App
93
115
 
94
- Within the Vue part of your Nuxt app, you will need to call [`useRuntimeConfig()`](/docs/4.x/api/composables/use-runtime-config) to access the runtime config.
116
+ Within the Vue part of your Nuxt app, you will need to call [`useRuntimeConfig()`](/docs/api/composables/use-runtime-config) to access the runtime config.
95
117
 
96
118
  ::important
97
119
  The behavior is different between the client-side and server-side:
@@ -124,7 +146,7 @@ if (import.meta.server) {
124
146
 
125
147
  ### Plugins
126
148
 
127
- If you want to use the runtime config within any (custom) plugin, you can use [`useRuntimeConfig()`](/docs/4.x/api/composables/use-runtime-config) inside of your `defineNuxtPlugin` function.
149
+ If you want to use the runtime config within any (custom) plugin, you can use [`useRuntimeConfig()`](/docs/api/composables/use-runtime-config) inside of your `defineNuxtPlugin` function.
128
150
 
129
151
  ```ts [app/plugins/config.ts]
130
152
  export default defineNuxtPlugin((nuxtApp) => {
@@ -151,7 +173,7 @@ export default defineEventHandler(async (event) => {
151
173
  ```
152
174
 
153
175
  ::note
154
- Giving the `event` as argument to `useRuntimeConfig` is optional, but it is recommended to pass it to get the runtime config overwritten by [environment variables](/docs/4.x/guide/going-further/runtime-config#environment-variables) at runtime for server routes.
176
+ Giving the `event` as argument to `useRuntimeConfig` is optional, but it is recommended to pass it to get the runtime config overwritten by [environment variables](/docs/guide/going-further/runtime-config#environment-variables) at runtime for server routes.
155
177
  ::
156
178
 
157
179
  ## Typing Runtime Config
@@ -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/4.x/api/commands"}
60
+ ::read-more{to="/docs/api/commands"}
61
61
  Read more about the available commands.
62
62
  ::
@@ -9,7 +9,7 @@ The hooking system is powered by [unjs/hookable](https://github.com/unjs/hookabl
9
9
 
10
10
  ## Nuxt Hooks (Build Time)
11
11
 
12
- These hooks are available for [Nuxt modules](/docs/4.x/guide/modules) and build context.
12
+ These hooks are available for [Nuxt modules](/docs/guide/modules) and build context.
13
13
 
14
14
  ### Within `nuxt.config.ts`
15
15
 
@@ -33,13 +33,13 @@ export default defineNuxtModule({
33
33
  })
34
34
  ```
35
35
 
36
- ::read-more{to="/docs/4.x/api/advanced/hooks#nuxt-hooks-build-time"}
36
+ ::read-more{to="/docs/api/advanced/hooks#nuxt-hooks-build-time"}
37
37
  Explore all available Nuxt hooks.
38
38
  ::
39
39
 
40
40
  ## App Hooks (Runtime)
41
41
 
42
- App hooks can be mainly used by [Nuxt Plugins](/docs/4.x/directory-structure/app/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
42
+ App hooks can be mainly used by [Nuxt Plugins](/docs/directory-structure/app/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
43
43
 
44
44
  ```ts [app/plugins/test.ts]
45
45
  export default defineNuxtPlugin((nuxtApp) => {
@@ -49,13 +49,13 @@ export default defineNuxtPlugin((nuxtApp) => {
49
49
  })
50
50
  ```
51
51
 
52
- ::read-more{to="/docs/4.x/api/advanced/hooks#app-hooks-runtime"}
52
+ ::read-more{to="/docs/api/advanced/hooks#app-hooks-runtime"}
53
53
  Explore all available App hooks.
54
54
  ::
55
55
 
56
56
  ## Server Hooks (Runtime)
57
57
 
58
- These hooks are available for [server plugins](/docs/4.x/directory-structure/server#server-plugins) to hook into Nitro's runtime behavior.
58
+ These hooks are available for [server plugins](/docs/directory-structure/server#server-plugins) to hook into Nitro's runtime behavior.
59
59
 
60
60
  ```ts [~~/server/plugins/test.ts]
61
61
  export default defineNitroPlugin((nitroApp) => {
@@ -70,7 +70,7 @@ export default defineNitroPlugin((nitroApp) => {
70
70
  })
71
71
  ```
72
72
 
73
- ::read-more{to="/docs/4.x/api/advanced/hooks#nitro-app-hooks-runtime-server-side"}
73
+ ::read-more{to="/docs/api/advanced/hooks#nitro-app-hooks-runtime-server-side"}
74
74
  Learn more about available Nitro lifecycle hooks.
75
75
  ::
76
76
 
@@ -3,9 +3,9 @@ title: "Nuxt Kit"
3
3
  description: "@nuxt/kit provides features for module authors."
4
4
  ---
5
5
 
6
- Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/docs/4.x/api/advanced/hooks), the [Nuxt Interface](/docs/4.x/guide/going-further/internals#the-nuxt-interface) and developing [Nuxt modules](/docs/4.x/guide/modules) super easy.
6
+ Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/docs/api/advanced/hooks), the [Nuxt Interface](/docs/guide/going-further/internals#the-nuxt-interface) and developing [Nuxt modules](/docs/guide/modules) super easy.
7
7
 
8
- ::read-more{to="/docs/4.x/api/kit"}
8
+ ::read-more{to="/docs/api/kit"}
9
9
  Discover all Nuxt Kit utilities.
10
10
  ::
11
11
 
@@ -33,13 +33,13 @@ You can install the latest Nuxt Kit by adding it to the `dependencies` section o
33
33
  import { useNuxt } from '@nuxt/kit'
34
34
  ```
35
35
 
36
- :read-more{to="/docs/4.x/api/kit"}
36
+ :read-more{to="/docs/api/kit"}
37
37
 
38
38
  ::note
39
39
  Nuxt Kit utilities are only available for modules and not meant to be imported in runtime (components, Vue composables, pages, plugins, or server routes).
40
40
  ::
41
41
 
42
- Nuxt Kit is an [esm-only package](/docs/4.x/guide/concepts/esm) meaning that you **cannot** `require('@nuxt/kit')`. As a workaround, use dynamic import in the CommonJS context:
42
+ Nuxt Kit is an [esm-only package](/docs/guide/concepts/esm) meaning that you **cannot** `require('@nuxt/kit')`. As a workaround, use dynamic import in the CommonJS context:
43
43
 
44
44
  ```ts [test.cjs]
45
45
  // This does NOT work!
@@ -0,0 +1,221 @@
1
+ ---
2
+ title: "Server Imports"
3
+ description: "`nuxt/server` is the import surface for server code that isn't tied to a particular server runtime."
4
+ links:
5
+ - label: Source
6
+ icon: i-simple-icons-github
7
+ to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/server/index.ts
8
+ ---
9
+
10
+ It's possible to use different [server builders](/docs/guide/going-further/builders) with Nuxt: Nitro 2 (`nitropack`, the default in Nuxt 3 and 4), Nitro 3 (`nitro`, from Nuxt 5), or Vite directly.
11
+
12
+ `nuxt/server` exists to provide agnostic utilities for server code that aren't tied to a particular server runtime. It is the second runtime surface of Nuxt, alongside `nuxt/app` (also reachable as `#app`), which is for the part of your application that also runs in the browser.
13
+
14
+ ```ts [server/api/hello.ts]
15
+ import { defineEventHandler, getQuery } from 'nuxt/server'
16
+
17
+ export default defineEventHandler((event) => {
18
+ const { name } = getQuery<{ name?: string }>(event)
19
+ return { message: `Hello, ${name ?? 'world'}!` }
20
+ })
21
+ ```
22
+
23
+ This code can run under `@nuxt/nitro-server` and under `@nuxt/vite-server`, and will also keep running across an h3 or Nitro major, because Nuxt absorbs those changes centrally.
24
+
25
+ `nuxt/server` ships from Nuxt 4.6, so one file can serve Nuxt 4.6 running `nitropack` v2, Nuxt 5 running Nitro v3, and anything a future builder brings.
26
+
27
+ ::tip
28
+ `nuxt` is installed in every Nuxt application, so `nuxt/server` resolves with no alias and no added dependency. A module importing from it needs no peer dependency on h3 or Nitro.
29
+ ::
30
+
31
+ ## Types and Utilities
32
+
33
+ | Import | Purpose |
34
+ |---|---|
35
+ | `defineEventHandler` | Define a request handler. |
36
+ | `createError`, `isNuxtError` | Construct and recognise an HTTP error. |
37
+ | `getRequestURL`, `getRequestHost`, `getRequestProtocol` | The URL, host and protocol of the request. Pass `{ xForwardedHost: true, xForwardedProto: true }` to trust those headers, only behind a proxy you control that overwrites them. |
38
+ | `getRequestHeader`, `getRequestHeaders` | Read request headers. |
39
+ | `getRouterParam`, `getRouterParams` | Read the dynamic segments matched for the request. |
40
+ | `getRequestIP` | The client IP address, with [forwarded headers trusted on request](#client-ip). |
41
+ | `getQuery`, `getValidatedQuery` | Read the query string, optionally [validated](#validation). |
42
+ | `readBody`, `readValidatedBody` | Read and parse the request body, optionally [validated](#validation). |
43
+ | `getCookie`, `parseCookies`, `setCookie`, `deleteCookie` | Read one or every cookie, and write cookies. |
44
+ | `setResponseStatus` | Set the response status and reason phrase. |
45
+ | `handleCors` | Apply [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS) headers and answer preflight requests. |
46
+ | `sendRedirect` | Redirect the request. |
47
+ | `serverFetch` | Fetch a route of the app in-process, with the path relative to `app.baseURL` and the `cookie` and `authorization` headers forwarded unless `forwardHeaders` is set. It rejects on a server builder without an in-process fetch. |
48
+ | `useSession`, `getSession`, `updateSession`, `clearSession` | Read and write a [sealed session cookie](#sessions). |
49
+ | `deriveSecret` | A purpose-specific secret [derived from `appSecret`](#deriving-secrets). |
50
+ | `getRouteRules`, `matchRouteRules` | The [route rules](/docs/guide/concepts/rendering#route-rules) matched for the request, or for another path. |
51
+ | `useRuntimeConfig` | The server's [runtime configuration](/docs/guide/going-further/runtime-config). |
52
+ | `useServerHooks` | The server's runtime hooks: renderer hooks such as `render:html`, and those declared on `NuxtServerHooks`. |
53
+ | `useAppConfig` | The [app config](/docs/directory-structure/app/app-config), as a copy per request when passed the event. |
54
+
55
+ Types are exported alongside the utilities: `RequestEvent`, `RequestEventContext`, `NuxtRequestEvent`, `EventHandler`, `AppRouteRules`, `ServerRoutes`, `CorsOptions`, `ValidateResult`, `NuxtError`, `NuxtErrorDetails`, `NuxtErrorJSON`, `NuxtErrorLike`, `Session`, `SessionConfig`, `SessionData`, `SessionEvent`, `SessionManager`, `SessionPassword` and `SessionUpdate`.
56
+
57
+ These names are not auto-imported from `nuxt/server`. In server code, the [auto-imported](/docs/directory-structure/server) names of the same spelling are h3's own helpers, which take the h3 event and behave differently in places (`defineEventHandler`, `handleCors`, `getRouterParams` and `readValidatedBody` among them), so import from `nuxt/server` explicitly. That includes `defineEventHandler`: the `nuxt/server` helpers read the event it hands the handler.
58
+
59
+ ::read-more{to="/docs/getting-started/upgrade#moving-to-nuxtserver"}
60
+ Moving existing server code to `nuxt/server`, and how its helpers differ from h3's.
61
+ ::
62
+
63
+ ::tip
64
+ `defineEventHandler` preserves your handler's return type, which is what types [`$fetch` and `useFetch`](/docs/getting-started/data-fetching) calls to the route. Annotate the value you return rather than the handler.
65
+ ::
66
+
67
+ ## The Event
68
+
69
+ `RequestEvent` is the event that `nuxt/server` utilities operate from, including the request, its URL, the response to be sent, and the request context.
70
+
71
+ ```ts
72
+ interface RequestEvent {
73
+ readonly req: Request
74
+ url: URL
75
+ readonly res: { status?: number, statusText?: string, readonly headers: Headers }
76
+ readonly context: RequestEventContext
77
+ }
78
+ ```
79
+
80
+ To set, read, append or remove a response header, use `event.res.headers` directly: it is a standard `Headers` object.
81
+
82
+ Nitro adds more on top, such as `event.node` and `event.waitUntil()`, but these four core properties work in all runtimes, and need no helpers:
83
+
84
+ ```ts [server/api/echo.post.ts]
85
+ export default defineEventHandler(async (event) => {
86
+ const { id } = await event.req.json()
87
+ return { id, page: event.url.searchParams.get('page') }
88
+ })
89
+ ```
90
+
91
+ `NuxtRequestEvent` is the same request in the shape the configured builder provides, which is h3 v1's `H3Event` under `@nuxt/nitro-server`.
92
+
93
+ ## Handlers
94
+
95
+ A handler file must default-export the result of `defineEventHandler` from `nuxt/server`. A bare function, or one wrapped by h3's `defineEventHandler`, receives the server runtime's own event instead.
96
+
97
+ A handler may return:
98
+
99
+ - A JSON-serializable value, sent as JSON with the status and headers set on `event.res`.
100
+ - A `Response`, sent with its own status. Headers set on `event.res.headers` are sent with it, and `set-cookie` values from both are kept.
101
+ - A `ReadableStream`, streamed as the body.
102
+
103
+ ## Validation
104
+
105
+ `readValidatedBody` and `getValidatedQuery` take any [Standard Schema](https://standardschema.dev) (Zod, Valibot, ArkType and others), or a function that returns the validated value, `true` to accept the input or `false` to reject it.
106
+
107
+ ```ts [server/api/users.post.ts]
108
+ import { defineEventHandler, readValidatedBody } from 'nuxt/server'
109
+ import { z } from 'zod'
110
+
111
+ export default defineEventHandler(async (event) => {
112
+ const user = await readValidatedBody(event, z.object({ name: z.string() }))
113
+ return { created: user.name }
114
+ })
115
+ ```
116
+
117
+ Invalid input is rejected with a `400` whose `data.issues` lists what failed. Pass `onError` to reject it with a different error.
118
+
119
+ ## Client IP
120
+
121
+ `getRequestIP(event)` returns the address the server runtime reports for the connection, or `undefined` if it reports none. No forwarded header is trusted by default, because a client can send any value in one.
122
+
123
+ Behind a proxy you control, pass `{ xForwardedFor: true }` to read the first entry of `X-Forwarded-For` instead. Only do this when the proxy overwrites the header: a proxy that appends to it leaves a client-sent value first.
124
+
125
+ ## Sessions
126
+
127
+ `useSession` reads the session for the request, sealing a new one into a cookie when there is none to read. The data is sealed with [iron](https://github.com/brc-dd/iron-webcrypto), so it lives in the cookie rather than in server storage, and the cookie defaults to `httpOnly`, `secure`, `sameSite: 'lax'` and `path: '/'`.
128
+
129
+ ```ts [server/api/visits.ts]
130
+ import { defineEventHandler, useSession } from 'nuxt/server'
131
+
132
+ export default defineEventHandler(async (event) => {
133
+ const session = await useSession<{ visits: number }>(event)
134
+ await session.update(data => ({ visits: (data.visits ?? 0) + 1 }))
135
+ return { visits: session.data.visits }
136
+ })
137
+ ```
138
+
139
+ With no `password`, the session is sealed with a secret derived from the application's [`appSecret`](/docs/guide/going-further/runtime-config#application-secret), so `NUXT_APP_SECRET` is the only thing to set. Pass a `password` of at least 32 characters to seal with a secret of your own instead. Set `maxAge` (in seconds) to expire both the cookie and the sealed value, `name` to change the cookie name from `nuxt-session`, and `cookie` to override any cookie attribute.
140
+
141
+ The session is unsealed once per request, so `getSession` may be called from as many places as you like. `updateSession` and `clearSession` are the same operations without the manager object.
142
+
143
+ ### Deriving Secrets
144
+
145
+ `deriveSecret(purpose)` resolves a secret for one purpose from `appSecret`: 32 bytes, hex-encoded, stable for as long as `appSecret` is unchanged, and distinct for every purpose. It is what the session helpers use, and what a module should use in place of asking for a secret of its own. Namespace the purpose to what owns it.
146
+
147
+ ```ts
148
+ import { deriveSecret } from 'nuxt/server'
149
+
150
+ const password = await deriveSecret('my-module:tokens')
151
+ ```
152
+
153
+ It throws a `500` naming `NUXT_APP_SECRET` when `appSecret` is unset or shorter than 32 characters.
154
+
155
+ ::note
156
+ h3 ships session helpers of the same names, and under `@nuxt/nitro-server` those are what the auto-imported `useSession`, `getSession`, `updateSession` and `clearSession` resolve to, so import these from `nuxt/server` explicitly. They are a separate implementation and are not interchangeable: h3 defaults to the `h3` cookie name rather than `nuxt-session`, takes its own configuration, and a session one of them issues will not unseal with the other.
157
+ ::
158
+
159
+ ::note
160
+ The session API is stable, but the format of the sealed cookie may change in a minor release: Nuxt plans to move to an AES-GCM based seal once `iron-webcrypto` publishes one. When it does, existing sessions are read in the old format and resealed in the new one on their next write, so users are not signed out. Sealed values are not interchangeable with those from h3's `useSession`.
161
+ ::
162
+
163
+ ::warning
164
+ The session travels in the cookie, so it is limited to what a browser will accept. Writing a session that serialises to more than 4096 bytes throws; keep large data server-side and reference it from the session by id.
165
+ ::
166
+
167
+ ## Reaching Past the Surface
168
+
169
+ `nuxt/server` isn't a re-export of h3, so if you need something else that h3 and Nitro offer, such as the server lifecycle (`defineNitroPlugin` and `defineNitroErrorHandler`) or Nitro's own runtime hooks, you would import it directly.
170
+
171
+ For a handler that needs h3's own helpers, such as `readRawBody`, `readMultipartFormData`, `assertMethod`, `proxyRequest`, `fetchWithEvent` or `writeEarlyHints`, or that reads `event.node` or `event.waitUntil()`, import `defineEventHandler` from `h3` for that handler:
172
+
173
+ ```ts [server/api/upload.post.ts]
174
+ import { defineEventHandler, readMultipartFormData } from 'h3'
175
+
176
+ export default defineEventHandler(async (event) => {
177
+ const parts = await readMultipartFormData(event)
178
+ return { received: parts?.length ?? 0 }
179
+ })
180
+ ```
181
+
182
+ Nitro's own APIs mostly take no event at all: `defineCachedEventHandler()`, `useStorage()`, `useDatabase()` and tasks. Import them from `nitropack/runtime`.
183
+
184
+ ## What Isn't Portable
185
+
186
+ These areas mean reaching outside `nuxt/server`, because Nuxt can't provide them for every builder:
187
+
188
+ - **Storage.** `useStorage()` comes from `nitropack/runtime`, and so does the driver configuration behind it.
189
+ - **Caching.** `defineCachedEventHandler()` and `defineCachedFunction()` come from `nitropack/runtime`. For caching that runs anywhere, depend on a cache library directly.
190
+ - **Server plugins.** `defineNitroPlugin()` comes from `nitropack/runtime`. Inside a plugin, `useServerHooks()` from `nuxt/server` registers the renderer hooks (including `render:html`) and those declared on `NuxtServerHooks`; Nitro's own hooks, such as `request`, `beforeResponse` and `error`, come from `useNitroApp().hooks` in `nitropack/runtime`.
191
+ - **Lazy handlers.** `lazyEventHandler()` comes from `h3`.
192
+
193
+ ## Server Code Only
194
+
195
+ Importing `nuxt/server` from a Vue component, a plugin or the `shared/` directory fails the build, and the error points you at `#app`, `#imports`, `$fetch` and `useFetch` instead. Its types still resolve in those contexts, which is what lets `$fetch` know what your server routes return.
196
+
197
+ ## Modules
198
+
199
+ A module whose runtime code imports only from `nuxt/server` runs under any server builder from v4.6 onwards, with no version check and no dependency on h3 or Nitro:
200
+
201
+ ```ts [runtime/server/api/status.ts]
202
+ import { defineEventHandler, useRuntimeConfig } from 'nuxt/server'
203
+
204
+ export default defineEventHandler(() => ({
205
+ version: useRuntimeConfig().myModule.version,
206
+ }))
207
+ ```
208
+
209
+ ::tip
210
+ Leave `nuxt/server` external when you bundle; it will be resolved in the Nuxt build to the right server builder utilities.
211
+ ::
212
+
213
+ Supporting Nuxt versions <4.6 takes one more step, because those projects have no `nuxt/server` to resolve. You can instead register the portable file and the one you ship today side by side, and Nuxt will pick whichever the application can run.
214
+
215
+ ::read-more{to="/docs/guide/modules/server-compatibility"}
216
+ See how to register one handler per server API.
217
+ ::
218
+
219
+ ::read-more{to="/docs/guide/going-further/builders"}
220
+ Learn how a server builder supplies the implementations behind `nuxt/server`.
221
+ ::
@@ -15,7 +15,7 @@ In Nuxt 2, this was referred to as **Nuxt context**.
15
15
 
16
16
  ## Nuxt App Interface
17
17
 
18
- ::read-more{to="/docs/4.x/guide/going-further/internals#the-nuxtapp-interface"}
18
+ ::read-more{to="/docs/guide/going-further/internals#the-nuxtapp-interface"}
19
19
  Jump over the `NuxtApp` interface documentation.
20
20
  ::
21
21
 
@@ -23,13 +23,13 @@ Jump over the `NuxtApp` interface documentation.
23
23
 
24
24
  Many composables and utilities, both built-in and user-made, may require access to the Nuxt instance. This doesn't exist everywhere on your application, because a fresh instance is created on every request.
25
25
 
26
- Currently, the Nuxt context is only accessible in [plugins](/docs/4.x/directory-structure/app/plugins), [Nuxt hooks](/docs/4.x/guide/going-further/hooks), [Nuxt middleware](/docs/4.x/directory-structure/app/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup) (in pages and components).
26
+ Currently, the Nuxt context is only accessible in [plugins](/docs/directory-structure/app/plugins), [Nuxt hooks](/docs/guide/going-further/hooks), [Nuxt middleware](/docs/directory-structure/app/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup) (in pages and components).
27
27
 
28
- If a composable is called without access to the context, you may get an error stating that 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.' In that case, you can also explicitly call functions within this context by using [`nuxtApp.runWithContext`](/docs/4.x/api/composables/use-nuxt-app#runwithcontext).
28
+ If a composable is called without access to the context, you may get an error stating that 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.' In that case, you can also explicitly call functions within this context by using [`nuxtApp.runWithContext`](/docs/api/composables/use-nuxt-app#runwithcontext).
29
29
 
30
30
  ## Accessing NuxtApp
31
31
 
32
- Within composables, plugins and components you can access `nuxtApp` with [`useNuxtApp()`](/docs/4.x/api/composables/use-nuxt-app):
32
+ Within composables, plugins and components you can access `nuxtApp` with [`useNuxtApp()`](/docs/api/composables/use-nuxt-app):
33
33
 
34
34
  ```ts [app/composables/useMyComposable.ts]
35
35
  export function useMyComposable () {
@@ -38,11 +38,11 @@ export function useMyComposable () {
38
38
  }
39
39
  ```
40
40
 
41
- If your composable does not always need `nuxtApp` or you simply want to check if it is present or not, since [`useNuxtApp`](/docs/4.x/api/composables/use-nuxt-app) throws an exception, you can use [`tryUseNuxtApp`](/docs/4.x/api/composables/use-nuxt-app#tryusenuxtapp) instead.
41
+ If your composable does not always need `nuxtApp` or you simply want to check if it is present or not, since [`useNuxtApp`](/docs/api/composables/use-nuxt-app) throws an exception, you can use [`tryUseNuxtApp`](/docs/api/composables/use-nuxt-app#tryusenuxtapp) instead.
42
42
 
43
43
  Plugins also receive `nuxtApp` as the first argument for convenience.
44
44
 
45
- :read-more{to="/docs/4.x/directory-structure/app/plugins"}
45
+ :read-more{to="/docs/directory-structure/app/plugins"}
46
46
 
47
47
  ## Providing Helpers
48
48
 
@@ -55,7 +55,7 @@ nuxtApp.provide('hello', name => `Hello ${name}!`)
55
55
  console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
56
56
  ```
57
57
 
58
- ::read-more{to="/docs/4.x/directory-structure/app/plugins#providing-helpers"}
58
+ ::read-more{to="/docs/directory-structure/app/plugins#providing-helpers"}
59
59
  It is possible to inject helpers by returning an object with a `provide` key in plugins.
60
60
  ::
61
61
 
@@ -5,9 +5,9 @@ description: Nuxt provides a powerful system that allows you to extend the defau
5
5
 
6
6
  Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.
7
7
 
8
- :read-more{to="/docs/4.x/getting-started/layers"}
8
+ :read-more{to="/docs/getting-started/layers"}
9
9
 
10
- A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) file to indicate it is a layer.
10
+ A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/directory-structure/nuxt-config) file to indicate it is a layer.
11
11
 
12
12
  ```ts [base/nuxt.config.ts]
13
13
  export default defineNuxtConfig({})
@@ -15,16 +15,16 @@ export default defineNuxtConfig({})
15
15
 
16
16
  Additionally, certain other files in the layer directory will be auto-scanned and used by Nuxt for the project extending this layer.
17
17
 
18
- - [`app/components/*`](/docs/4.x/directory-structure/app/components) - Extend the default components
19
- - [`app/composables/*`](/docs/4.x/directory-structure/app/composables) - Extend the default composables
20
- - [`app/layouts/*`](/docs/4.x/directory-structure/app/layouts) - Extend the default layouts
21
- - [`app/middleware/*`](/docs/4.x/directory-structure/app/middleware) - Extend the default middleware
22
- - [`app/pages/*`](/docs/4.x/directory-structure/app/pages) - Extend the default pages
23
- - [`app/plugins/*`](/docs/4.x/directory-structure/app/plugins) - Extend the default plugins
24
- - [`app/utils/*`](/docs/4.x/directory-structure/app/utils) - Extend the default utils
25
- - [`app/app.config.ts`](/docs/4.x/directory-structure/app/app-config) - Extend the default app config
26
- - [`server/*`](/docs/4.x/directory-structure/server) - Extend the default server endpoints & middleware
27
- - [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config)- Extend the default nuxt config
18
+ - [`app/components/*`](/docs/directory-structure/app/components) - Extend the default components
19
+ - [`app/composables/*`](/docs/directory-structure/app/composables) - Extend the default composables
20
+ - [`app/layouts/*`](/docs/directory-structure/app/layouts) - Extend the default layouts
21
+ - [`app/middleware/*`](/docs/directory-structure/app/middleware) - Extend the default middleware
22
+ - [`app/pages/*`](/docs/directory-structure/app/pages) - Extend the default pages
23
+ - [`app/plugins/*`](/docs/directory-structure/app/plugins) - Extend the default plugins
24
+ - [`app/utils/*`](/docs/directory-structure/app/utils) - Extend the default utils
25
+ - [`app/app.config.ts`](/docs/directory-structure/app/app-config) - Extend the default app config
26
+ - [`server/*`](/docs/directory-structure/server) - Extend the default server endpoints & middleware
27
+ - [`nuxt.config.ts`](/docs/directory-structure/nuxt-config)- Extend the default nuxt config
28
28
 
29
29
  ## Basic Example
30
30
 
@@ -283,7 +283,7 @@ You can also use this approach to disable modules in your own project - not just
283
283
 
284
284
  ## Multi-Layer Support for Nuxt Modules
285
285
 
286
- You can use the [`getLayerDirectories`](/docs/4.x/api/kit/layers#getlayerdirectories) utility from Nuxt Kit to support custom multi-layer handling for your modules.
286
+ You can use the [`getLayerDirectories`](/docs/api/kit/layers#getlayerdirectories) utility from Nuxt Kit to support custom multi-layer handling for your modules.
287
287
 
288
288
  ```ts [modules/my-module.ts]
289
289
  import { defineNuxtModule, getLayerDirectories } from 'nuxt/kit'
@@ -3,19 +3,19 @@ title: "Creating a Builder"
3
3
  description: "Learn how Nuxt builders work and how to author your own."
4
4
  ---
5
5
 
6
- A **builder** is the part of Nuxt responsible for bundling your application. Nuxt ships with three official builders, [Vite](https://vite.dev) (the default), [webpack](https://webpack.js.org) and [Rspack](https://rspack.dev), and you can select one with the [`builder`](/docs/4.x/api/nuxt-config#builder) option or supply your own.
6
+ A **builder** is the part of Nuxt responsible for bundling your application. Nuxt ships with three official builders, [Vite](https://vite.dev) (the default), [webpack](https://webpack.js.org) and [Rspack](https://rspack.dev), and you can select one with the [`builder`](/docs/api/nuxt-config#builder) option or supply your own.
7
7
 
8
8
  This guide explains how builders fit into the Nuxt build, what contract a builder must fulfil, and how to author one.
9
9
 
10
10
  ::note
11
- Authoring a builder is an advanced topic. Most apps never need a custom builder; if you only want to influence the bundle, a [module](/docs/4.x/guide/modules) that registers bundler plugins is usually the right tool.
11
+ Authoring a builder is an advanced topic. Most apps never need a custom builder; if you only want to influence the bundle, a [module](/docs/guide/modules) that registers bundler plugins is usually the right tool.
12
12
  ::
13
13
 
14
14
  ## What a Builder Does
15
15
 
16
16
  Nuxt separates **what** to build from **how** to build it.
17
17
 
18
- The Nuxt core (the `nuxt` context described in [How Nuxt Works](/docs/4.x/guide/going-further/internals)) and your modules generate the virtual application: the entrypoints, route table, plugins, component registry, and the rest of the [virtual file system](/docs/4.x/guide/going-further/internals#the-nuxt-interface) under `#build`. The builder takes that virtual application and turns it into real JavaScript and CSS bundles, and in development runs a dev server that serves and hot-reloads them.
18
+ The Nuxt core (the `nuxt` context described in [How Nuxt Works](/docs/guide/going-further/internals)) and your modules generate the virtual application: the entrypoints, route table, plugins, component registry, and the rest of the [virtual file system](/docs/guide/going-further/internals#the-nuxt-interface) under `#build`. The builder takes that virtual application and turns it into real JavaScript and CSS bundles, and in development runs a dev server that serves and hot-reloads them.
19
19
 
20
20
  Concretely, a builder is responsible for:
21
21
 
@@ -44,7 +44,7 @@ export interface NuxtBuilder {
44
44
  }
45
45
  ```
46
46
 
47
- Nuxt resolves the active builder from the [`builder`](/docs/4.x/api/nuxt-config#builder) option. It accepts either a module specifier that default-exports a `NuxtBuilder`, or an inline object:
47
+ Nuxt resolves the active builder from the [`builder`](/docs/api/nuxt-config#builder) option. It accepts either a module specifier that default-exports a `NuxtBuilder`, or an inline object:
48
48
 
49
49
  ```ts [nuxt.config.ts]
50
50
  export default defineNuxtConfig({
@@ -75,7 +75,7 @@ Only the three official builder specifiers (`@nuxt/vite-builder`, `@nuxt/webpack
75
75
 
76
76
  ## The Build Lifecycle
77
77
 
78
- When you run [`nuxt build`](/docs/4.x/api/commands/build) or [`nuxt dev`](/docs/4.x/api/commands/dev), Nuxt:
78
+ When you run [`nuxt build`](/docs/api/commands/build) or [`nuxt dev`](/docs/api/commands/dev), Nuxt:
79
79
 
80
80
  1. Creates the `nuxt` context and runs modules, populating `nuxt.options` and the build hooks.
81
81
  2. Generates the virtual application (templates, route table, plugins) into the `#build` virtual file system.
@@ -88,15 +88,15 @@ Your `bundle` implementation typically branches on `nuxt.options.dev`:
88
88
  - In **production**, it runs the client and (if `nuxt.options.ssr`) server builds to completion, writing artifacts to `nuxt.options.buildDir` and registering them as build outputs.
89
89
  - In **development**, it sets up a dev server, starts a watching build, assigns `nuxt.server`, and keeps running.
90
90
 
91
- A builder communicates with the rest of Nuxt almost entirely through [hooks](/docs/4.x/api/advanced/hooks). It reads build configuration off `nuxt.options` and, when appropriate, lets modules extend its bundler configuration.
91
+ A builder communicates with the rest of Nuxt almost entirely through [hooks](/docs/api/advanced/hooks). It reads build configuration off `nuxt.options` and, when appropriate, lets modules extend its bundler configuration.
92
92
 
93
93
  ### Letting Modules Extend the Bundler
94
94
 
95
- Modules influence the bundle through [Nuxt Kit](/docs/4.x/guide/going-further/kit) helpers. A builder should honour the relevant ones:
95
+ Modules influence the bundle through [Nuxt Kit](/docs/guide/going-further/kit) helpers. A builder should honour the relevant ones:
96
96
 
97
- - [`addVitePlugin`](/docs/4.x/api/kit/builder#addviteplugin) / [`addWebpackPlugin`](/docs/4.x/api/kit/builder#addwebpackplugin) register bundler-specific plugins.
98
- - [`addBuildPlugin`](/docs/4.x/api/kit/builder#addbuildplugin) registers an [unplugin](https://github.com/unjs/unplugin) factory, so a single plugin works across every builder.
99
- - [`extendViteConfig`](/docs/4.x/api/kit/builder#extendviteconfig) / [`extendWebpackConfig`](/docs/4.x/api/kit/builder#extendwebpackconfig) mutate the resolved bundler config.
97
+ - [`addVitePlugin`](/docs/api/kit/builder#addviteplugin) / [`addWebpackPlugin`](/docs/api/kit/builder#addwebpackplugin) register bundler-specific plugins.
98
+ - [`addBuildPlugin`](/docs/api/kit/builder#addbuildplugin) registers an [unplugin](https://github.com/unjs/unplugin) factory, so a single plugin works across every builder.
99
+ - [`extendViteConfig`](/docs/api/kit/builder#extendviteconfig) / [`extendWebpackConfig`](/docs/api/kit/builder#extendwebpackconfig) mutate the resolved bundler config.
100
100
 
101
101
  The official builders also emit their own hooks (for example `vite:extendConfig`, `vite:serverCreated`, `webpack:config`) so modules and Nitro can participate in the build. A custom builder may emit its own hooks, but the build output contract below is what makes it interoperate with the Nuxt server runtime.
102
102
 
@@ -156,7 +156,7 @@ The keys come in two shapes:
156
156
 
157
157
  ### Setting Build Outputs
158
158
 
159
- Use the [`setBuildOutput`](/docs/4.x/api/kit/builder#setbuildoutput) helper from `@nuxt/kit`:
159
+ Use the [`setBuildOutput`](/docs/api/kit/builder#setbuildoutput) helper from `@nuxt/kit`:
160
160
 
161
161
  ```ts
162
162
  import { setBuildOutput } from '@nuxt/kit'
@@ -164,7 +164,7 @@ import { setBuildOutput } from '@nuxt/kit'
164
164
  setBuildOutput('clientManifest', () => 'export default ' + serializedManifest)
165
165
  ```
166
166
 
167
- `setBuildOutput` writes to `nuxt.buildOutputs[key]`. From inside a bundler plugin that already holds the `nuxt` instance you can assign `nuxt.buildOutputs[key]` directly; `setBuildOutput` is the convenience for code that resolves `nuxt` via [`useNuxt()`](/docs/4.x/api/kit/context#usenuxt).
167
+ `setBuildOutput` writes to `nuxt.buildOutputs[key]`. From inside a bundler plugin that already holds the `nuxt` instance you can assign `nuxt.buildOutputs[key]` directly; `setBuildOutput` is the convenience for code that resolves `nuxt` via [`useNuxt()`](/docs/api/kit/context#usenuxt).
168
168
 
169
169
  A provider can be asynchronous and is read lazily, when the server build resolves the corresponding `nuxt/*` import. This lets a builder register the provider early (for example before the client build has finished) and have it return the finalised value once the data exists.
170
170
 
@@ -211,10 +211,34 @@ In development, a builder is also responsible for serving and hot-reloading the
211
211
 
212
212
  In dev, the build outputs are typically wired to live, in-memory sources rather than on-disk files. For instance, the SSR entry may be served from the bundler's in-memory output, and the client manifest may be computed from the dev module graph, rather than read from `nuxt.options.buildDir`.
213
213
 
214
- ::read-more{to="/docs/4.x/guide/going-further/internals"}
214
+ ## Describing the Build to a Deploy Target
215
+
216
+ A server builder describes what it produced, so that tooling that deploys or previews the build does not have to know which builder ran. The description lives on `nuxt.serverBuild`, and is read with `useServerBuild()` from `@nuxt/kit/internal`:
217
+
218
+ ```ts
219
+ import { useServerBuild } from '@nuxt/kit/internal'
220
+
221
+ const build = useServerBuild()
222
+
223
+ build.output.root() // the project root: where a target's own config file lives
224
+ build.output.dir() // the build output directory
225
+ build.output.publicDir() // the deployable static assets within it
226
+ ```
227
+
228
+ Every path is a function, because a builder may only resolve it while initialising, so call them from a hook that runs after the server builder has run.
229
+
230
+ The description also says how the server build relates to the app build. A server builder sets `buildsSeparately` to declare whether its build is a pass of its own, run after the app build (as `@nuxt/nitro-server` does), or whether the app builder is building everything and there is no separate pass (as with `@nuxt/vite-server`). Anything that needs to know reads it from the description rather than sniffing for a Nitro instance.
231
+
232
+ `output.root()` is deliberately not a bundler root. Nuxt points Vite's `root` at [`srcDir`](/docs/api/nuxt-config#srcdir), so a deploy target that resolves its configuration file (or the paths written inside it) from the bundler's root looks inside your app directory rather than at the root of your project. A target that reads the description resolves both correctly.
233
+
234
+ ::warning
235
+ `nuxt.serverBuild` and the `setServerBuild()` / `useServerBuild()` helpers are experimental and exported from `@nuxt/kit/internal`. The shape will change without a major release while a second server builder is being built out.
236
+ ::
237
+
238
+ ::read-more{to="/docs/guide/going-further/internals"}
215
239
  Learn more about the Nuxt interface and the build vs. runtime split.
216
240
  ::
217
241
 
218
- ::read-more{to="/docs/4.x/api/kit/builder"}
242
+ ::read-more{to="/docs/api/kit/builder"}
219
243
  Browse the Nuxt Kit builder utilities used to register bundler plugins and build outputs.
220
244
  ::
@@ -14,7 +14,7 @@ links:
14
14
 
15
15
  Nuxt provides the `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR.
16
16
 
17
- ::note{to="/docs/4.x/guide/going-further/experimental-features#clientfallback"}
17
+ ::note{to="/docs/guide/going-further/experimental-features#clientfallback"}
18
18
  This component is experimental and in order to use it you must enable the `experimental.clientFallback` option in your `nuxt.config`.
19
19
  ::
20
20
 
@@ -10,7 +10,7 @@ links:
10
10
 
11
11
  `<NuxtPicture>` is a drop-in replacement for the native `<picture>` tag.
12
12
 
13
- Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](/docs/4.x/api/components/nuxt-img) but it also allows serving modern formats like `webp` when possible.
13
+ Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](/docs/api/components/nuxt-img) but it also allows serving modern formats like `webp` when possible.
14
14
 
15
15
  Learn more about the [`<picture>` tag on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture).
16
16
 
@@ -40,4 +40,4 @@ The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport) ex
40
40
  </template>
41
41
  ```
42
42
 
43
- :link-example{to="/docs/4.x/examples/advanced/teleport"}
43
+ :link-example{to="/docs/examples/advanced/teleport"}