@nuxt/docs 4.2.2 → 4.3.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 (91) hide show
  1. package/1.getting-started/02.installation.md +2 -5
  2. package/1.getting-started/03.configuration.md +5 -5
  3. package/1.getting-started/06.styling.md +6 -2
  4. package/1.getting-started/07.routing.md +1 -1
  5. package/1.getting-started/08.seo-meta.md +4 -0
  6. package/1.getting-started/12.error-handling.md +12 -6
  7. package/1.getting-started/14.layers.md +47 -13
  8. package/1.getting-started/15.prerendering.md +14 -0
  9. package/1.getting-started/16.deployment.md +1 -0
  10. package/1.getting-started/17.testing.md +12 -2
  11. package/1.getting-started/18.upgrade.md +14 -1
  12. package/2.directory-structure/1.app/1.components.md +4 -0
  13. package/2.directory-structure/1.app/1.layouts.md +32 -0
  14. package/2.directory-structure/1.app/1.pages.md +21 -0
  15. package/2.directory-structure/1.app/1.plugins.md +3 -0
  16. package/2.directory-structure/1.app/3.error.md +9 -5
  17. package/2.directory-structure/1.layers.md +87 -0
  18. package/2.directory-structure/1.modules.md +12 -2
  19. package/2.directory-structure/1.node_modules.md +1 -1
  20. package/2.directory-structure/1.server.md +31 -11
  21. package/2.directory-structure/2.nuxtrc.md +3 -0
  22. package/2.directory-structure/3.tsconfig.md +1 -0
  23. package/2.directory-structure/index.md +4 -0
  24. package/3.guide/0.index.md +8 -2
  25. package/3.guide/1.concepts/1.rendering.md +5 -0
  26. package/3.guide/1.concepts/2.nuxt-lifecycle.md +1 -1
  27. package/3.guide/1.concepts/5.modules.md +14 -1
  28. package/3.guide/1.concepts/8.typescript.md +6 -2
  29. package/3.guide/3.ai/1.mcp.md +22 -0
  30. package/3.guide/4.modules/.navigation.yml +3 -0
  31. package/3.guide/4.modules/1.getting-started.md +103 -0
  32. package/3.guide/4.modules/2.module-anatomy.md +138 -0
  33. package/3.guide/4.modules/3.recipes-basics.md +420 -0
  34. package/3.guide/4.modules/4.recipes-advanced.md +243 -0
  35. package/3.guide/4.modules/5.testing.md +76 -0
  36. package/3.guide/4.modules/6.best-practices.md +104 -0
  37. package/3.guide/4.modules/7.ecosystem.md +32 -0
  38. package/3.guide/4.modules/index.md +36 -0
  39. package/3.guide/{4.recipes → 5.recipes}/2.vite-plugin.md +4 -0
  40. package/3.guide/{4.recipes → 5.recipes}/3.custom-usefetch.md +1 -1
  41. package/3.guide/{4.recipes → 5.recipes}/4.sessions-and-authentication.md +2 -2
  42. package/3.guide/{5.going-further → 6.going-further}/1.experimental-features.md +15 -0
  43. package/3.guide/{5.going-further → 6.going-further}/1.internals.md +3 -3
  44. package/3.guide/{5.going-further → 6.going-further}/10.runtime-config.md +1 -1
  45. package/3.guide/{5.going-further → 6.going-further}/2.hooks.md +2 -2
  46. package/3.guide/{5.going-further → 6.going-further}/4.kit.md +1 -1
  47. package/3.guide/{5.going-further → 6.going-further}/7.layers.md +26 -0
  48. package/4.api/1.components/1.nuxt-client-fallback.md +4 -0
  49. package/4.api/1.components/3.nuxt-layout.md +2 -2
  50. package/4.api/1.components/8.nuxt-island.md +9 -2
  51. package/4.api/2.composables/use-async-data.md +3 -3
  52. package/4.api/2.composables/use-error.md +2 -2
  53. package/4.api/2.composables/use-fetch.md +2 -2
  54. package/4.api/2.composables/use-head.md +16 -1
  55. package/4.api/2.composables/use-nuxt-app.md +2 -0
  56. package/4.api/2.composables/use-route-announcer.md +1 -1
  57. package/4.api/2.composables/use-state.md +10 -0
  58. package/4.api/3.utils/create-error.md +6 -6
  59. package/4.api/3.utils/define-nuxt-route-middleware.md +1 -1
  60. package/4.api/3.utils/define-page-meta.md +8 -1
  61. package/4.api/3.utils/set-page-layout.md +36 -0
  62. package/4.api/3.utils/set-response-status.md +2 -2
  63. package/4.api/3.utils/show-error.md +3 -3
  64. package/4.api/4.commands/add.md +2 -2
  65. package/4.api/5.kit/1.modules.md +15 -2
  66. package/4.api/5.kit/11.nitro.md +6 -2
  67. package/4.api/5.kit/14.builder.md +14 -2
  68. package/4.api/5.kit/4.autoimports.md +5 -1
  69. package/4.api/6.nuxt-config.md +40 -23
  70. package/5.community/4.contribution.md +5 -5
  71. package/5.community/5.framework-contribution.md +1 -1
  72. package/5.community/6.roadmap.md +4 -4
  73. package/5.community/7.changelog.md +10 -0
  74. package/6.bridge/1.overview.md +8 -0
  75. package/6.bridge/4.plugins-and-middleware.md +1 -1
  76. package/6.bridge/8.nitro.md +4 -0
  77. package/7.migration/11.server.md +1 -1
  78. package/7.migration/2.configuration.md +2 -2
  79. package/7.migration/20.module-authors.md +2 -2
  80. package/7.migration/7.component-options.md +1 -1
  81. package/package.json +1 -1
  82. package/3.guide/5.going-further/3.modules.md +0 -968
  83. /package/3.guide/{4.recipes → 5.recipes}/.navigation.yml +0 -0
  84. /package/3.guide/{4.recipes → 5.recipes}/1.custom-routing.md +0 -0
  85. /package/3.guide/{5.going-further → 6.going-further}/.navigation.yml +0 -0
  86. /package/3.guide/{5.going-further → 6.going-further}/1.events.md +0 -0
  87. /package/3.guide/{5.going-further → 6.going-further}/1.features.md +0 -0
  88. /package/3.guide/{5.going-further → 6.going-further}/11.nightly-release-channel.md +0 -0
  89. /package/3.guide/{5.going-further → 6.going-further}/6.nuxt-app.md +0 -0
  90. /package/3.guide/{5.going-further → 6.going-further}/9.debugging.md +0 -0
  91. /package/3.guide/{5.going-further → 6.going-further}/index.md +0 -0
@@ -32,6 +32,7 @@ interface PageMeta {
32
32
  path?: string
33
33
  props?: RouteRecordRaw['props']
34
34
  alias?: string | string[]
35
+ groups?: string[]
35
36
  pageTransition?: boolean | TransitionProps
36
37
  layoutTransition?: boolean | TransitionProps
37
38
  viewTransition?: boolean | 'always'
@@ -76,6 +77,12 @@ interface PageMeta {
76
77
 
77
78
  Aliases for the record. Allows defining extra paths that will behave like a copy of the record. Allows having paths shorthands like `/users/:id` and `/u/:id`. All `alias` and `path` values must share the same params.
78
79
 
80
+ **`groups`**
81
+
82
+ - **Type**: `string[]`
83
+
84
+ Route groups the page belongs to, based on the folder structure. Automatically populated for pages within [route groups](/docs/4.x/guide/directory-structure/app/pages#route-groups).
85
+
79
86
  **`keepalive`**
80
87
 
81
88
  - **Type**: `boolean` | [`KeepAliveProps`](https://vuejs.org/api/built-in-components#keepalive)
@@ -130,7 +137,7 @@ interface PageMeta {
130
137
 
131
138
  - **Type**: `(route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>`
132
139
 
133
- Validate whether a given route can validly be rendered with this page. Return true if it is valid, or false if not. If another match can't be found, this will mean a 404. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked).
140
+ Validate whether a given route can validly be rendered with this page. Return true if it is valid, or false if not. If another match can't be found, this will mean a 404. You can also directly return an object with `status`/`statusText` to respond immediately with an error (other matches will not be checked).
134
141
 
135
142
  **`scrollToTop`**
136
143
 
@@ -19,6 +19,42 @@ export default defineNuxtRouteMiddleware((to) => {
19
19
  })
20
20
  ```
21
21
 
22
+ ## Passing Props to Layouts
23
+
24
+ You can pass props to the layout by providing an object as the second argument:
25
+
26
+ ```ts [app/middleware/admin-layout.ts]
27
+ export default defineNuxtRouteMiddleware((to) => {
28
+ setPageLayout('admin', {
29
+ sidebar: true,
30
+ title: 'Dashboard',
31
+ })
32
+ })
33
+ ```
34
+
35
+ The layout can then receive these props:
36
+
37
+ ```vue [app/layouts/admin.vue]
38
+ <script setup lang="ts">
39
+ const props = defineProps<{
40
+ sidebar?: boolean
41
+ title?: string
42
+ }>()
43
+ </script>
44
+
45
+ <template>
46
+ <div>
47
+ <aside v-if="sidebar">
48
+ Sidebar
49
+ </aside>
50
+ <main>
51
+ <h1>{{ title }}</h1>
52
+ <slot />
53
+ </main>
54
+ </div>
55
+ </template>
56
+ ```
57
+
22
58
  ::note
23
59
  If you choose to set the layout dynamically on the server side, you _must_ do so before the layout is rendered by Vue (that is, within a plugin or route middleware) to avoid a hydration mismatch.
24
60
  ::
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  title: 'setResponseStatus'
3
- description: setResponseStatus sets the statusCode (and optionally the statusMessage) of the response.
3
+ description: setResponseStatus sets the status (and optionally the statusText) of the response.
4
4
  links:
5
5
  - label: Source
6
6
  icon: i-simple-icons-github
@@ -10,7 +10,7 @@ links:
10
10
 
11
11
  Nuxt provides composables and utilities for first-class server-side-rendering support.
12
12
 
13
- `setResponseStatus` sets the statusCode (and optionally the statusMessage) of the response.
13
+ `setResponseStatus` sets the status (and optionally the statusText) of the response.
14
14
 
15
15
  ::important
16
16
  `setResponseStatus` can only be called in the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-context).
@@ -12,13 +12,13 @@ Within the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-contex
12
12
 
13
13
  **Parameters:**
14
14
 
15
- - `error`: `string | Error | Partial<{ cause, data, message, name, stack, statusCode, statusMessage }>`
15
+ - `error`: `string | Error | Partial<{ cause, data, message, name, stack, status, statusText }>`
16
16
 
17
17
  ```ts
18
18
  showError('😱 Oh no, an error has been thrown.')
19
19
  showError({
20
- statusCode: 404,
21
- statusMessage: 'Page Not Found',
20
+ status: 404,
21
+ statusText: 'Page Not Found',
22
22
  })
23
23
  ```
24
24
 
@@ -4,7 +4,7 @@ description: "Scaffold an entity into your Nuxt application."
4
4
  links:
5
5
  - label: Source
6
6
  icon: i-simple-icons-github
7
- to: https://github.com/nuxt/cli/blob/main/packages/nuxi/src/commands/add.ts
7
+ to: https://github.com/nuxt/cli/blob/main/packages/nuxi/src/commands/add-template.ts
8
8
  size: xs
9
9
  ---
10
10
 
@@ -23,7 +23,7 @@ npx nuxt add <TEMPLATE> <NAME> [--cwd=<directory>] [--logLevel=<silent|info|verb
23
23
  | `NAME` | Specify name of the generated file |
24
24
  <!--/add-args-->
25
25
 
26
- ### Options
26
+ ## Options
27
27
 
28
28
  <!--add-opts-->
29
29
  | Option | Default | Description |
@@ -64,7 +64,7 @@ export function defineNuxtModule<TOptions extends ModuleOptions> (): {
64
64
  | `hooks` | `Partial<NuxtHooks>`{lang="ts"} | `false` | Hooks to be installed for the module. If provided, the module will install the hooks. |
65
65
  | `moduleDependencies` | `Record<string, ModuleDependency> \| ((nuxt: Nuxt) => Record<string, ModuleDependency>)`{lang="ts"} | `false` | Dependencies on other modules with version constraints and configuration. Can be an object or a function that receives the Nuxt instance. See [example](/docs/4.x/api/kit/modules#specifying-module-dependencies). |
66
66
  | `onInstall` | `(nuxt: Nuxt) => Awaitable<void>`{lang="ts"} | `false` | Lifecycle hook called when the module is first installed. Requires `meta.name` and `meta.version` to be defined. |
67
- | `onUpgrade` | `(options: T, nuxt: Nuxt, previousVersion: string) => Awaitable<void>`{lang="ts"} | `false` | Lifecycle hook called when the module is upgraded to a newer version. Requires `meta.name` and `meta.version` to be defined. |
67
+ | `onUpgrade` | `(nuxt: Nuxt, options: T, previousVersion: string) => Awaitable<void>`{lang="ts"} | `false` | Lifecycle hook called when the module is upgraded to a newer version. Requires `meta.name` and `meta.version` to be defined. |
68
68
  | `setup` | `(this: void, resolvedOptions: T, nuxt: Nuxt) => Awaitable<void \| false \| ModuleSetupInstallResult>`{lang="ts"} | `false` | Setup function for the module. If provided, the module will call the setup function. |
69
69
 
70
70
  ### Examples
@@ -103,6 +103,19 @@ export default defineNuxtConfig({
103
103
  })
104
104
  ```
105
105
 
106
+ Users can also completely disable a module by setting the config key to `false`. This prevents the module's setup function from running while still generating types for module options.
107
+
108
+ ```ts
109
+ export default defineNuxtConfig({
110
+ // Disable the module entirely
111
+ myModule: false,
112
+ })
113
+ ```
114
+
115
+ ::tip
116
+ This is particularly useful when you want to disable modules inherited from [Nuxt layers](/docs/4.x/guide/going-further/layers#disabling-modules-from-layers).
117
+ ::
118
+
106
119
  #### Defining Module Compatibility Requirements
107
120
 
108
121
  If you're developing a Nuxt module and using APIs that are only supported in specific Nuxt versions, it's highly recommended to include `compatibility.nuxt`.
@@ -216,7 +229,7 @@ export default defineNuxtModule({
216
229
  // - Perform initial data migration
217
230
  },
218
231
 
219
- onUpgrade (options, nuxt, previousVersion) {
232
+ onUpgrade (nuxt, options, previousVersion) {
220
233
  // This runs when the module is upgraded to a newer version
221
234
  console.log(`Upgrading my-awesome-module from ${previousVersion} to 1.2.0`)
222
235
 
@@ -301,6 +301,10 @@ function addPrerenderRoutes (routes: string | string[]): void
301
301
 
302
302
  Add imports to the server. It makes your imports available in Nitro without the need to import them manually.
303
303
 
304
+ ::warning
305
+ If you want to provide a utility that works in both server and client contexts and is usable in the [`shared/`](/docs/4.x/directory-structure/shared) directory, the function must be imported from the same source file for both [`addImports`](/docs/4.x/api/kit/autoimports#addimports) and `addServerImports` and should have identical signature. That source file should not import anything context-specific (i.e., Nitro context, Nuxt app context) or else it might cause errors during type-checking.
306
+ ::
307
+
304
308
  ### Usage
305
309
 
306
310
  ```ts twoslash
@@ -422,10 +426,10 @@ export default defineEventHandler(() => {
422
426
  ## `addServerScanDir`
423
427
 
424
428
  Add directories to be scanned by Nitro. It will check for subdirectories, which will be registered
425
- just like the `~/server` folder is.
429
+ just like the `~~/server` folder is.
426
430
 
427
431
  ::note
428
- Only `~/server/api`, `~/server/routes`, `~/server/middleware`, and `~/server/utils` are scanned.
432
+ Only `~~/server/api`, `~~/server/routes`, `~~/server/middleware`, and `~~/server/utils` are scanned.
429
433
  ::
430
434
 
431
435
  ### Usage
@@ -207,7 +207,19 @@ See [Vite website](https://vite.dev/guide/api-plugin) for more information about
207
207
 
208
208
  ### Parameters
209
209
 
210
- **`pluginOrGetter`**: A Vite plugin instance or an array of Vite plugin instances. If a function is provided, it must return a Vite plugin instance or an array of Vite plugin instances.
210
+ **`pluginOrGetter`**: A Vite plugin instance or an array of Vite plugin instances. If a function is provided, it must return a Vite plugin instance or an array of Vite plugin instances. The function can also be async or return a Promise, which is useful for lazy-loading plugins:
211
+
212
+ ```ts twoslash
213
+ // @errors: 2307
214
+ import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
215
+
216
+ export default defineNuxtModule({
217
+ setup () {
218
+ // Lazy load the plugin - only imported when the build actually runs
219
+ addVitePlugin(() => import('my-vite-plugin').then(r => r.default()))
220
+ },
221
+ })
222
+ ```
211
223
 
212
224
  **`options`**: Options to pass to the callback function. This object can have the following properties:
213
225
 
@@ -266,7 +278,7 @@ See [webpack website](https://webpack.js.org/concepts/plugins/) for more informa
266
278
 
267
279
  ### Parameters
268
280
 
269
- **`pluginOrGetter`**: A webpack plugin instance or an array of webpack plugin instances. If a function is provided, it must return a webpack plugin instance or an array of webpack plugin instances.
281
+ **`pluginOrGetter`**: A webpack plugin instance or an array of webpack plugin instances. If a function is provided, it must return a webpack plugin instance or an array of webpack plugin instances. The function can also be async or return a Promise, enabling lazy-loading of plugins.
270
282
 
271
283
  **`options`**: Options to pass to the callback function. This object can have the following properties:
272
284
 
@@ -24,7 +24,11 @@ Watch Vue School video about Auto-imports Nuxt Kit utilities.
24
24
 
25
25
  ## `addImports`
26
26
 
27
- Add imports to the Nuxt application. It makes your imports available in the Nuxt application without the need to import them manually.
27
+ Add imports to the Nuxt application. It makes your imports available in the Nuxt app context without the need to import them manually.
28
+
29
+ ::tip
30
+ To add imports for the Nitro server context, refer to the [`addServerImports`](/docs/4.x/api/kit/nitro#addserverimports) function.
31
+ ::
28
32
 
29
33
  ### Usage
30
34
 
@@ -13,12 +13,13 @@ You can improve your DX by defining additional aliases to access custom director
13
13
  - **Default**
14
14
  ```json
15
15
  {
16
- "~": "/<srcDir>",
17
- "@": "/<srcDir>",
16
+ "~": "/<rootDir>/app",
17
+ "@": "/<rootDir>/app",
18
18
  "~~": "/<rootDir>",
19
19
  "@@": "/<rootDir>",
20
20
  "#shared": "/<rootDir>/shared",
21
- "assets": "/<srcDir>/assets",
21
+ "#server": "/<rootDir>/server",
22
+ "assets": "/<rootDir>/app/assets",
22
23
  "public": "/<rootDir>/public",
23
24
  "#build": "/<rootDir>/.nuxt",
24
25
  "#internal/nuxt/paths": "/<rootDir>/.nuxt/paths.mjs"
@@ -210,7 +211,7 @@ Default values for layout transitions.
210
211
 
211
212
  This can be overridden with `definePageMeta` on an individual page. Only JSON-serializable values are allowed.
212
213
 
213
- - **Type**: `boolean`
214
+ - **Type**: `boolean | TransitionProps`
214
215
  - **Default:** `false`
215
216
 
216
217
  **See**: [Vue Transition docs](https://vuejs.org/api/built-in-components#transition)
@@ -221,7 +222,7 @@ Default values for page transitions.
221
222
 
222
223
  This can be overridden with `definePageMeta` on an individual page. Only JSON-serializable values are allowed.
223
224
 
224
- - **Type**: `boolean`
225
+ - **Type**: `boolean | TransitionProps`
225
226
  - **Default:** `false`
226
227
 
227
228
  **See**: [Vue Transition docs](https://vuejs.org/api/built-in-components#transition)
@@ -372,7 +373,7 @@ export default defineNuxtConfig({
372
373
  build: {
373
374
  templates: [
374
375
  {
375
- src: '~/modules/support/plugin.js', // `src` can be absolute or relative
376
+ src: '~~/modules/support/plugin.js', // `src` can be absolute or relative
376
377
  dst: 'support.js', // `dst` is relative to project `.nuxt` dir
377
378
  },
378
379
  ],
@@ -880,7 +881,7 @@ Defaults to 'silent' when running in CI or when a TTY is not available. This opt
880
881
  Modules are Nuxt extensions which can extend its core functionality and add endless integrations.
881
882
 
882
883
  Each module is either a string (which can refer to a package, or be a path to a file), a tuple with the module as first string and the options as a second object, or an inline module function.
883
- Nuxt tries to resolve each item in the modules array using node require path (in `node_modules`) and then will be resolved from project `srcDir` if `~` alias is used.
884
+ Nuxt tries to resolve each item in the modules array using node require path (in `node_modules`) and then will be resolved from project `rootDir` if `~~` alias is used.
884
885
 
885
886
  - **Type**: `array`
886
887
 
@@ -895,8 +896,8 @@ export default defineNuxtConfig({
895
896
  modules: [
896
897
  // Using package name
897
898
  '@nuxt/scripts',
898
- // Relative to your project srcDir
899
- '~/custom-modules/awesome.js',
899
+ // Relative to your project rootDir
900
+ '~~/custom-modules/awesome.js',
900
901
  // Providing options
901
902
  ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
902
903
  // Inline definition
@@ -1013,8 +1014,12 @@ Options passed directly to the transformer from `unctx` that preserves async con
1013
1014
 
1014
1015
  Functions to inject a key for.
1015
1016
 
1016
- As long as the number of arguments passed to the function is less than `argumentLength`, an additional magic string will be injected that can be used to deduplicate requests between server and client. You will need to take steps to handle this additional key.
1017
- The key will be unique based on the location of the function being invoked within the file.
1017
+ As long as the number of arguments passed to the function is less than `argumentLength`, an additional magic string will be injected as the last argument. This key is stable between SSR and client-side hydration. You will need to take steps to handle this additional key.
1018
+ The key is unique based on the location of the function being invoked within the file.
1019
+
1020
+ ::read-more{to="/docs/4.x/guide/modules/recipes-basics#add-keyed-functions"}
1021
+ Learn more about keyed functions.
1022
+ ::
1018
1023
 
1019
1024
  - **Type**: `array`
1020
1025
  - **Default**
@@ -1022,31 +1027,38 @@ The key will be unique based on the location of the function being invoked withi
1022
1027
  [
1023
1028
  {
1024
1029
  "name": "callOnce",
1025
- "argumentLength": 3
1030
+ "argumentLength": 3,
1031
+ "source": "#app/composables/once"
1026
1032
  },
1027
1033
  {
1028
1034
  "name": "defineNuxtComponent",
1029
- "argumentLength": 2
1035
+ "argumentLength": 2,
1036
+ "source": "#app/composables/component"
1030
1037
  },
1031
1038
  {
1032
1039
  "name": "useState",
1033
- "argumentLength": 2
1040
+ "argumentLength": 2,
1041
+ "source": "#app/composables/state"
1034
1042
  },
1035
1043
  {
1036
1044
  "name": "useFetch",
1037
- "argumentLength": 3
1045
+ "argumentLength": 3,
1046
+ "source": "#app/composables/fetch"
1038
1047
  },
1039
1048
  {
1040
1049
  "name": "useAsyncData",
1041
- "argumentLength": 3
1050
+ "argumentLength": 3,
1051
+ "source": "#app/composables/asyncData"
1042
1052
  },
1043
1053
  {
1044
1054
  "name": "useLazyAsyncData",
1045
- "argumentLength": 3
1055
+ "argumentLength": 3,
1056
+ "source": "#app/composables/asyncData"
1046
1057
  },
1047
1058
  {
1048
1059
  "name": "useLazyFetch",
1049
- "argumentLength": 3
1060
+ "argumentLength": 3,
1061
+ "source": "#app/composables/fetch"
1050
1062
  }
1051
1063
  ]
1052
1064
  ```
@@ -1297,7 +1309,7 @@ Define the server directory of your Nuxt application, where Nitro routes, middle
1297
1309
  If a relative path is specified, it will be relative to your `rootDir`.
1298
1310
 
1299
1311
  - **Type**: `string`
1300
- - **Default:** `"/<srcDir>/server"`
1312
+ - **Default:** `"/<rootDir>/server"`
1301
1313
 
1302
1314
  ## serverHandlers
1303
1315
 
@@ -1318,7 +1330,7 @@ Each handler accepts the following options:
1318
1330
  ```ts
1319
1331
  export default defineNuxtConfig({
1320
1332
  serverHandlers: [
1321
- { route: '/path/foo/**:name', handler: '~/server/foohandler.ts' },
1333
+ { route: '/path/foo/**:name', handler: '#server/foohandler.ts' },
1322
1334
  ],
1323
1335
  })
1324
1336
  ```
@@ -1408,22 +1420,27 @@ export default defineNuxtConfig({
1408
1420
  srcDir: 'app/',
1409
1421
  })
1410
1422
  ```
1423
+
1411
1424
  This expects the following folder structure:
1412
1425
  ```bash
1413
1426
  -| app/
1414
1427
  ---| assets/
1415
1428
  ---| components/
1429
+ ---| composables/
1416
1430
  ---| layouts/
1417
1431
  ---| middleware/
1418
1432
  ---| pages/
1419
1433
  ---| plugins/
1434
+ ---| utils/
1420
1435
  ---| app.config.ts
1421
1436
  ---| app.vue
1422
1437
  ---| error.vue
1423
1438
  -| server/
1439
+ -| shared/
1424
1440
  -| public/
1425
1441
  -| modules/
1426
- -| nuxt.config.js
1442
+ -| layers/
1443
+ -| nuxt.config.ts
1427
1444
  -| package.json
1428
1445
  ```
1429
1446
 
@@ -1692,7 +1709,7 @@ Please note that not all vite options are supported in Nuxt.
1692
1709
  ### `root`
1693
1710
 
1694
1711
  - **Type**: `string`
1695
- - **Default:** `"/<srcDir>"`
1712
+ - **Default:** `"/<rootDir>"`
1696
1713
 
1697
1714
  ### `server`
1698
1715
 
@@ -1705,7 +1722,7 @@ Please note that not all vite options are supported in Nuxt.
1705
1722
  ```json
1706
1723
  [
1707
1724
  "/<rootDir>/.nuxt",
1708
- "/<srcDir>",
1725
+ "/<rootDir>/app",
1709
1726
  "/<rootDir>",
1710
1727
  "/<workspaceDir>"
1711
1728
  ]
@@ -11,7 +11,7 @@ There is a range of different ways you might be able to contribute to the Nuxt e
11
11
  The Nuxt ecosystem includes many different projects and organizations:
12
12
 
13
13
  * [nuxt/](https://github.com/nuxt) - core repositories for the Nuxt framework itself. [**nuxt/nuxt**](https://github.com/nuxt/nuxt) contains the Nuxt framework (both versions 2 and 3).
14
- * [nuxt-modules/](https://github.com/nuxt-modules) - community-contributed and maintained modules and libraries. There is a [process to migrate a module](/docs/4.x/guide/going-further/modules/#joining-nuxt-modules-and-nuxtjs) to `nuxt-modules`. While these modules have individual maintainers, they are not dependent on a single person.
14
+ * [nuxt-modules/](https://github.com/nuxt-modules) - community-contributed and maintained modules and libraries. There is a [process to migrate a module](/docs/4.x/guide/modules/ecosystem) to `nuxt-modules`. While these modules have individual maintainers, they are not dependent on a single person.
15
15
  * [unjs/](https://github.com/unjs) - many of these libraries are used throughout the Nuxt ecosystem. They are designed to be universal libraries that are framework- and environment-agnostic. We welcome contributions and usage by other frameworks and projects.
16
16
 
17
17
  ## How To Contribute
@@ -100,7 +100,7 @@ Our aim is ensuring quality and maintaining the joy of collaborating and communi
100
100
 
101
101
  ### Create a Module
102
102
 
103
- If you've built something with Nuxt that's cool, why not [extract it into a module](/docs/4.x/guide/going-further/modules), so it can be shared with others? We have [many excellent modules already](/modules), but there's always room for more.
103
+ If you've built something with Nuxt that's cool, why not [extract it into a module](/docs/4.x/guide/modules), so it can be shared with others? We have [many excellent modules already](/modules), but there's always room for more.
104
104
 
105
105
  If you need help while building it, feel free to [check in with us](/docs/4.x/community/getting-help).
106
106
 
@@ -126,7 +126,7 @@ The following conventions are _required_ within the `nuxt/` organization and rec
126
126
 
127
127
  #### Module Conventions
128
128
 
129
- Modules should follow the [Nuxt module template](https://github.com/nuxt/starter/tree/module). See [module guide](/docs/4.x/guide/going-further/modules) for more information.
129
+ Modules should follow the [Nuxt module template](https://github.com/nuxt/starter/tree/module). See [module guide](/docs/4.x/guide/modules) for more information.
130
130
 
131
131
  #### Use Core `unjs/` Libraries
132
132
 
@@ -134,7 +134,7 @@ We recommend the following libraries which are used throughout the ecosystem:
134
134
 
135
135
  * [pathe](https://github.com/unjs/pathe) - universal path utilities (replacement for node `path`)
136
136
  * [ufo](https://github.com/unjs/ufo) - URL parsing and joining utilities
137
- * [unbuild](https://github.com/unjs/unbuild) - rollup-powered build system
137
+ * [obuild](https://github.com/unjs/obuild) - rolldown-powered build system
138
138
  * ... check out the rest of the [unjs/](https://github.com/unjs) organization for many more!
139
139
 
140
140
  #### Use ESM Syntax and Default to `type: module`
@@ -172,7 +172,7 @@ We recommend using [VS Code](https://code.visualstudio.com) along with the [ESLi
172
172
 
173
173
  #### No Prettier
174
174
 
175
- Since ESLint is already configured to format the code, there is no need to duplicate the functionality with Prettier. To format the code, you can run `yarn lint --fix`, `pnpm lint --fix`, or `bun run lint --fix` or referring the [ESLint section](/docs/4.x/community/contribution#use-eslint) for IDE Setup.
175
+ Since ESLint is already configured to format the code, there is no need to duplicate the functionality with Prettier. To format the code, you can run `yarn lint --fix`, `pnpm lint --fix`, `bun run lint --fix`, or `deno run lint --fix` or referring the [ESLint section](/docs/4.x/community/contribution#use-eslint) for IDE Setup.
176
176
 
177
177
  If you have Prettier installed in your editor, we recommend you disable it when working on the project to avoid conflict.
178
178
 
@@ -8,7 +8,7 @@ Once you've read the [general contribution guide](/docs/4.x/community/contributi
8
8
 
9
9
  ## Monorepo Guide
10
10
 
11
- - `packages/kit`: Toolkit for authoring Nuxt Modules, published as [`@nuxt/kit`](https://www.npmjs.com/package/@nuxt/kit).
11
+ - `packages/kit`: Toolkit for authoring Nuxt modules, published as [`@nuxt/kit`](https://www.npmjs.com/package/@nuxt/kit).
12
12
  - `packages/nuxt`: The core of Nuxt, published as [`nuxt`](https://www.npmjs.com/package/nuxt).
13
13
  - `packages/schema`: Cross-version Nuxt typedefs and defaults, published as [`@nuxt/schema`](https://www.npmjs.com/package/@nuxt/schema).
14
14
  - `packages/rspack`: The [Rspack](https://rspack.rs) bundler for Nuxt, published as [`@nuxt/rspack-builder`](https://www.npmjs.com/package/@nuxt/rspack-builder).
@@ -42,7 +42,7 @@ In addition to the Nuxt framework, there are modules that are vital for the ecos
42
42
  |----------------------------------------|--------------|--------------|-------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
43
43
  | [Scripts](https://scripts.nuxt.com) | Public Beta | 3.x, 4.x | [nuxt/scripts](https://github.com/nuxt/scripts) | Easy 3rd party script management. |
44
44
  | Auth Utils | Planned | 4.x, 5.x | `nuxt/auth-utils` to be announced | The temporary repository [atinux/nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils) is available while awaiting its official integration into Nuxt via RFC. |
45
- | A11y | Planned | 4.x, 5.x | `nuxt/a11y` to be announced | Accessibility hinting and utilities [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255) |
45
+ | [a11y](https://github.com/nuxt/a11y) | Public Alpha | 3.x, 4.x | [nuxt/a11y](https://github.com/nuxt/a11y). | Real-time accessibility feedback and automated testing in your browser during development (see [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255)). |
46
46
  | [Hints](https://github.com/nuxt/hints) | Public Alpha | 4.x, 5.x | [nuxt/hints](https://github.com/nuxt/hints) | Guidance and suggestions for enhancing development practices. |
47
47
 
48
48
  ## Release Cycle
@@ -61,15 +61,15 @@ We commit to support each major version of Nuxt for a minimum of six months afte
61
61
 
62
62
  The current active version of [Nuxt](https://nuxt.com) is **v4** which is available as `nuxt` on npm with the `latest` tag.
63
63
 
64
- Nuxt 3 will continue to receive maintenance updates (both bug fixes and backports of features from Nuxt 4) until the end of January 2026.
64
+ Nuxt 3 will continue to receive maintenance updates (bug fixes and security patches) until the end of July 2026.
65
65
 
66
66
  Each active version has its own nightly releases which are generated automatically. For more about enabling the Nuxt nightly release channel, see [the nightly release channel docs](/docs/4.x/guide/going-further/nightly-release-channel).
67
67
 
68
68
  | Release | | Initial release | End Of Life | Docs |
69
69
  |-----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------|----------------------------|-------------------------------------------------------------------|
70
- | **5.x** (scheduled) | | Q4 2025 (estimated) | TBA | &nbsp; |
70
+ | **5.x** (scheduled) | | Q1 2026 (estimated) | TBA | &nbsp; |
71
71
  | **4.x** (stable) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt latest version" src="https://img.shields.io/npm/v/nuxt.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2025-07-16 | 6 months after 5.x release | [nuxt.com](/docs/4.x/getting-started/introduction) |
72
- | **3.x** (maintenance) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 3.x version" src="https://img.shields.io/npm/v/nuxt/3x.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2022-11-16 | 2026-01-31 | [nuxt.com](/docs/3.x/getting-started/introduction) |
72
+ | **3.x** (maintenance) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 3.x version" src="https://img.shields.io/npm/v/nuxt/3x.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2022-11-16 | 2026-07-31 | [nuxt.com](/docs/3.x/getting-started/introduction) |
73
73
  | **2.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 2.x version" src="https://img.shields.io/npm/v/nuxt/2x.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2018-09-21 | 2024-06-30 | [v2.nuxt.com](https://v2.nuxt.com/docs/get-started/installation/) |
74
74
  | **1.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 1.x version" src="https://img.shields.io/npm/v/nuxt/1x.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2018-01-08 | 2019-09-21 | &nbsp; |
75
75
 
@@ -28,6 +28,16 @@ navigation.icon: i-lucide-bell-dot
28
28
  ::card
29
29
  ---
30
30
  icon: i-simple-icons-github
31
+ title: nuxt/a11y
32
+ to: https://github.com/nuxt/a11y/releases
33
+ target: _blank
34
+ ui.icon.base: text-black dark:text-white
35
+ ---
36
+ Nuxt A11y releases.
37
+ ::
38
+ ::card
39
+ ---
40
+ icon: i-simple-icons-github
31
41
  title: nuxt/content
32
42
  to: https://github.com/nuxt/content/releases
33
43
  target: _blank
@@ -46,6 +46,10 @@ pnpm install
46
46
  bun install
47
47
  ```
48
48
 
49
+ ```bash [deno]
50
+ deno install
51
+ ```
52
+
49
53
  ::
50
54
 
51
55
  ::note
@@ -74,6 +78,10 @@ pnpm add -D @nuxt/bridge nuxi
74
78
  bun add -D @nuxt/bridge nuxi
75
79
  ```
76
80
 
81
+ ```bash [deno]
82
+ deno add -D npm:@nuxt/bridge npm:nuxi
83
+ ```
84
+
77
85
  ::
78
86
 
79
87
  ### Update `nuxt.config`
@@ -46,7 +46,7 @@ Use of `defineNuxtRouteMiddleware` is not supported outside of the `app/middlewa
46
46
 
47
47
  You can also use [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) in Nuxt Bridge.
48
48
 
49
- You can be enabled with the `macros.pageMeta` option in your configuration file
49
+ It can be enabled with the `macros.pageMeta` option in your configuration file
50
50
 
51
51
  ```ts [nuxt.config.ts]
52
52
  import { defineNuxtConfig } from '@nuxt/bridge'
@@ -45,6 +45,10 @@ pnpm add -D nuxi
45
45
  bun add -D nuxi
46
46
  ```
47
47
 
48
+ ```bash [deno]
49
+ deno add -D npm:nuxi
50
+ ```
51
+
48
52
  ::
49
53
 
50
54
  ### Nuxi
@@ -10,7 +10,7 @@ In a built Nuxt 3 application, there is no runtime Nuxt dependency. That means y
10
10
  ## Steps
11
11
 
12
12
  1. Remove the `render` key in your `nuxt.config`.
13
- 2. Any files in `~/server/api` and `~/server/middleware` will be automatically registered; you can remove them from your `serverMiddleware` array.
13
+ 2. Any files in `~~/server/api` and `~~/server/middleware` will be automatically registered; you can remove them from your `serverMiddleware` array.
14
14
  3. Update any other items in your `serverMiddleware` array to point to files or npm packages directly, rather than using inline functions.
15
15
 
16
16
  :read-more{to="/docs/4.x/directory-structure/server"}
@@ -115,7 +115,7 @@ Nuxt has built-in support for loading `.env` files. Avoid directly importing it
115
115
 
116
116
  ## Modules
117
117
 
118
- Nuxt and Nuxt Modules are now build-time-only.
118
+ Nuxt and Nuxt modules are now build-time-only.
119
119
 
120
120
  ### Migration
121
121
 
@@ -133,7 +133,7 @@ Nuxt and Nuxt Modules are now build-time-only.
133
133
  ```
134
134
 
135
135
  ::tip
136
- If you are a module author, you can check out [more information about module compatibility](/docs/4.x/migration/module-authors) and [our module author guide](/docs/4.x/guide/going-further/modules).
136
+ If you are a module author, you can check out [more information about module compatibility](/docs/4.x/migration/module-authors) and [our module author guide](/docs/4.x/guide/modules).
137
137
  ::
138
138
 
139
139
  ## Directory Changes
@@ -7,7 +7,7 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 modules.'
7
7
 
8
8
  Nuxt 3 has a basic backward compatibility layer for Nuxt 2 modules using `@nuxt/kit` auto wrappers. But there are usually steps to follow to make modules compatible with Nuxt 3 and sometimes, using Nuxt Bridge is required for cross-version compatibility.
9
9
 
10
- We have prepared a [Dedicated Guide](/docs/4.x/guide/going-further/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatible with Nuxt 3.
10
+ We have prepared a [Dedicated Guide](/docs/4.x/guide/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatible with Nuxt 3.
11
11
 
12
12
  ::tip{icon="i-lucide-puzzle" to="/modules"}
13
13
  Explore Nuxt 3 compatible modules.
@@ -78,7 +78,7 @@ Your module should work even if it's only added to [`buildModules`](/docs/4.x/ap
78
78
  (*) Unless it is for `nuxt dev` purpose only and guarded with `if (nuxt.options.dev) { }`.
79
79
 
80
80
  ::tip
81
- Continue reading about Nuxt 3 modules in the [Modules Author Guide](/docs/4.x/guide/going-further/modules).
81
+ Continue reading about Nuxt 3 modules in the [Modules Author Guide](/docs/4.x/guide/modules).
82
82
  ::
83
83
 
84
84
  ### Use TypeScript (Optional)
@@ -124,7 +124,7 @@ Similar to `key`, specify it within the [`definePageMeta`](/docs/4.x/api/utils/d
124
124
 
125
125
  ## `validate`
126
126
 
127
- The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as in Nuxt 2, you can return a boolean value. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked).
127
+ The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as in Nuxt 2, you can return a boolean value. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `status`/`statusText` to respond immediately with an error (other matches will not be checked).
128
128
 
129
129
  ```diff [app/pages/users/[id\\].vue]
130
130
  - <script>