@nuxt/docs 4.2.2 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) 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 +5 -1
  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 +6 -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 +24 -4
  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 +1 -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 +330 -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 +1 -1
  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 +1 -1
  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-state.md +10 -0
  57. package/4.api/3.utils/create-error.md +6 -6
  58. package/4.api/3.utils/define-nuxt-route-middleware.md +1 -1
  59. package/4.api/3.utils/define-page-meta.md +8 -1
  60. package/4.api/3.utils/set-page-layout.md +36 -0
  61. package/4.api/3.utils/set-response-status.md +2 -2
  62. package/4.api/3.utils/show-error.md +3 -3
  63. package/4.api/4.commands/add.md +1 -1
  64. package/4.api/5.kit/1.modules.md +15 -2
  65. package/4.api/5.kit/14.builder.md +14 -2
  66. package/4.api/6.nuxt-config.md +2 -2
  67. package/5.community/4.contribution.md +5 -5
  68. package/5.community/5.framework-contribution.md +1 -1
  69. package/5.community/6.roadmap.md +1 -1
  70. package/5.community/7.changelog.md +10 -0
  71. package/6.bridge/1.overview.md +8 -0
  72. package/6.bridge/4.plugins-and-middleware.md +1 -1
  73. package/6.bridge/8.nitro.md +4 -0
  74. package/7.migration/2.configuration.md +2 -2
  75. package/7.migration/20.module-authors.md +2 -2
  76. package/7.migration/7.component-options.md +1 -1
  77. package/package.json +1 -1
  78. package/3.guide/5.going-further/3.modules.md +0 -968
  79. /package/3.guide/{4.recipes → 5.recipes}/.navigation.yml +0 -0
  80. /package/3.guide/{4.recipes → 5.recipes}/1.custom-routing.md +0 -0
  81. /package/3.guide/{5.going-further → 6.going-further}/.navigation.yml +0 -0
  82. /package/3.guide/{5.going-further → 6.going-further}/1.events.md +0 -0
  83. /package/3.guide/{5.going-further → 6.going-further}/1.features.md +0 -0
  84. /package/3.guide/{5.going-further → 6.going-further}/11.nightly-release-channel.md +0 -0
  85. /package/3.guide/{5.going-further → 6.going-further}/6.nuxt-app.md +0 -0
  86. /package/3.guide/{5.going-further → 6.going-further}/9.debugging.md +0 -0
  87. /package/3.guide/{5.going-further → 6.going-further}/index.md +0 -0
@@ -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
 
@@ -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
 
@@ -210,7 +210,7 @@ Default values for layout transitions.
210
210
 
211
211
  This can be overridden with `definePageMeta` on an individual page. Only JSON-serializable values are allowed.
212
212
 
213
- - **Type**: `boolean`
213
+ - **Type**: `boolean | TransitionProps`
214
214
  - **Default:** `false`
215
215
 
216
216
  **See**: [Vue Transition docs](https://vuejs.org/api/built-in-components#transition)
@@ -221,7 +221,7 @@ Default values for page transitions.
221
221
 
222
222
  This can be overridden with `definePageMeta` on an individual page. Only JSON-serializable values are allowed.
223
223
 
224
- - **Type**: `boolean`
224
+ - **Type**: `boolean | TransitionProps`
225
225
  - **Default:** `false`
226
226
 
227
227
  **See**: [Vue Transition docs](https://vuejs.org/api/built-in-components#transition)
@@ -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
@@ -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
@@ -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>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuxt/docs",
3
- "version": "4.2.2",
3
+ "version": "4.3.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/nuxt/nuxt.git",