@nuxt/docs-nightly 4.2.3-29422039.47e05245 → 4.2.3-29425455.7d502292

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 (43) hide show
  1. package/1.getting-started/02.installation.md +1 -3
  2. package/1.getting-started/06.styling.md +1 -1
  3. package/1.getting-started/17.testing.md +1 -1
  4. package/1.getting-started/18.upgrade.md +1 -1
  5. package/2.directory-structure/1.modules.md +1 -1
  6. package/3.guide/0.index.md +8 -2
  7. package/3.guide/1.concepts/5.modules.md +1 -1
  8. package/3.guide/1.concepts/8.typescript.md +2 -2
  9. package/3.guide/4.modules/.navigation.yml +3 -0
  10. package/3.guide/4.modules/1.getting-started.md +103 -0
  11. package/3.guide/4.modules/2.module-anatomy.md +138 -0
  12. package/3.guide/4.modules/3.recipes-basics.md +299 -0
  13. package/3.guide/4.modules/4.recipes-advanced.md +231 -0
  14. package/3.guide/4.modules/5.testing.md +76 -0
  15. package/3.guide/4.modules/6.best-practices.md +104 -0
  16. package/3.guide/4.modules/7.ecosystem.md +32 -0
  17. package/3.guide/4.modules/index.md +36 -0
  18. package/3.guide/{5.going-further → 6.going-further}/1.internals.md +3 -3
  19. package/3.guide/{5.going-further → 6.going-further}/2.hooks.md +1 -1
  20. package/3.guide/{5.going-further → 6.going-further}/4.kit.md +1 -1
  21. package/4.api/2.composables/use-head.md +16 -1
  22. package/4.api/4.commands/add.md +1 -1
  23. package/5.community/4.contribution.md +3 -3
  24. package/5.community/5.framework-contribution.md +1 -1
  25. package/7.migration/2.configuration.md +2 -2
  26. package/7.migration/20.module-authors.md +2 -2
  27. package/package.json +1 -1
  28. package/3.guide/5.going-further/3.modules.md +0 -968
  29. /package/3.guide/{4.recipes → 5.recipes}/.navigation.yml +0 -0
  30. /package/3.guide/{4.recipes → 5.recipes}/1.custom-routing.md +0 -0
  31. /package/3.guide/{4.recipes → 5.recipes}/2.vite-plugin.md +0 -0
  32. /package/3.guide/{4.recipes → 5.recipes}/3.custom-usefetch.md +0 -0
  33. /package/3.guide/{4.recipes → 5.recipes}/4.sessions-and-authentication.md +0 -0
  34. /package/3.guide/{5.going-further → 6.going-further}/.navigation.yml +0 -0
  35. /package/3.guide/{5.going-further → 6.going-further}/1.events.md +0 -0
  36. /package/3.guide/{5.going-further → 6.going-further}/1.experimental-features.md +0 -0
  37. /package/3.guide/{5.going-further → 6.going-further}/1.features.md +0 -0
  38. /package/3.guide/{5.going-further → 6.going-further}/10.runtime-config.md +0 -0
  39. /package/3.guide/{5.going-further → 6.going-further}/11.nightly-release-channel.md +0 -0
  40. /package/3.guide/{5.going-further → 6.going-further}/6.nuxt-app.md +0 -0
  41. /package/3.guide/{5.going-further → 6.going-further}/7.layers.md +0 -0
  42. /package/3.guide/{5.going-further → 6.going-further}/9.debugging.md +0 -0
  43. /package/3.guide/{5.going-further → 6.going-further}/index.md +0 -0
@@ -0,0 +1,231 @@
1
+ ---
2
+ title: "Use Hooks & Extend Types"
3
+ description: "Master lifecycle hooks, virtual files and TypeScript declarations in your modules."
4
+ ---
5
+
6
+ Here are some advanced patterns for authoring modules, including hooks, templates, and type augmentation.
7
+
8
+ ## Use Lifecycle Hooks
9
+
10
+ [Lifecycle hooks](/docs/4.x/guide/going-further/hooks) allow you to expand almost every aspect of Nuxt. Modules can hook to them programmatically or through the `hooks` map in their definition.
11
+
12
+ ```js
13
+ import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
14
+
15
+ export default defineNuxtModule({
16
+ // Hook to the `app:error` hook through the `hooks` map
17
+ hooks: {
18
+ 'app:error': (err) => {
19
+ console.info(`This error happened: ${err}`)
20
+ },
21
+ },
22
+ setup (options, nuxt) {
23
+ // Programmatically hook to the `pages:extend` hook
24
+ nuxt.hook('pages:extend', (pages) => {
25
+ console.info(`Discovered ${pages.length} pages`)
26
+ })
27
+ },
28
+ })
29
+ ```
30
+
31
+ :read-more{to="/docs/4.x/api/advanced/hooks"}
32
+
33
+ ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/nuxt-lifecycle-hooks?friend=nuxt" target="_blank"}
34
+ Watch Vue School video about using Nuxt lifecycle hooks in modules.
35
+ ::
36
+
37
+ ::note
38
+ **Module cleanup**
39
+ :br
40
+ :br
41
+ If your module opens, handles, or starts a watcher, you should close it when the Nuxt lifecycle is done. The `close` hook is available for this.
42
+
43
+ ```ts
44
+ import { defineNuxtModule } from '@nuxt/kit'
45
+
46
+ export default defineNuxtModule({
47
+ setup (options, nuxt) {
48
+ nuxt.hook('close', async (nuxt) => {
49
+ // Your custom code here
50
+ })
51
+ },
52
+ })
53
+ ```
54
+ ::
55
+
56
+ ### Create Custom Hooks
57
+
58
+ Modules can also define and call their own hooks, which is a powerful pattern for making your module extensible.
59
+
60
+ If you expect other modules to be able to subscribe to your module's hooks, you should call them in the `modules:done` hook. This ensures that all other modules have had a chance to be set up and register their listeners to your hook during their own `setup` function.
61
+
62
+ ```ts
63
+ // my-module/module.ts
64
+ import { defineNuxtModule } from '@nuxt/kit'
65
+
66
+ export interface ModuleHooks {
67
+ 'my-module:custom-hook': (payload: { foo: string }) => void
68
+ }
69
+
70
+ export default defineNuxtModule({
71
+ setup (options, nuxt) {
72
+ // Call your hook in `modules:done`
73
+ nuxt.hook('modules:done', async () => {
74
+ const payload = { foo: 'bar' }
75
+ await nuxt.callHook('my-module:custom-hook', payload)
76
+ })
77
+ },
78
+ })
79
+ ```
80
+
81
+ ## Add Virtual Files
82
+
83
+ If you need to add a virtual file that can be imported into the user's app, you can use the `addTemplate` utility.
84
+
85
+ ```ts
86
+ import { addTemplate, defineNuxtModule } from '@nuxt/kit'
87
+
88
+ export default defineNuxtModule({
89
+ setup (options, nuxt) {
90
+ // The file is added to Nuxt's internal virtual file system and can be imported from '#build/my-module-feature.mjs'
91
+ addTemplate({
92
+ filename: 'my-module-feature.mjs',
93
+ getContents: () => 'export const myModuleFeature = () => "hello world !"',
94
+ })
95
+ },
96
+ })
97
+ ```
98
+
99
+ For the server, you should use the `addServerTemplate` utility instead.
100
+
101
+ ```ts
102
+ import { addServerTemplate, defineNuxtModule } from '@nuxt/kit'
103
+
104
+ export default defineNuxtModule({
105
+ setup (options, nuxt) {
106
+ // The file is added to Nitro's virtual file system and can be imported in the server code from 'my-server-module.mjs'
107
+ addServerTemplate({
108
+ filename: 'my-server-module.mjs',
109
+ getContents: () => 'export const myServerModule = () => "hello world !"',
110
+ })
111
+ },
112
+ })
113
+ ```
114
+
115
+ ## Update Virtual Files
116
+
117
+ If you need to update your templates/virtual files, you can leverage the `updateTemplates` utility like this:
118
+
119
+ ```ts
120
+ nuxt.hook('builder:watch', (event, path) => {
121
+ if (path.includes('my-module-feature.config')) {
122
+ // This will reload the template that you registered
123
+ updateTemplates({ filter: t => t.filename === 'my-module-feature.mjs' })
124
+ }
125
+ })
126
+ ```
127
+
128
+ ## Add Type Declarations
129
+
130
+ You might also want to add a type declaration to the user's project (for example, to augment a Nuxt interface
131
+ or provide a global type of your own). For this, Nuxt provides the `addTypeTemplate` utility that both
132
+ writes a template to the disk and adds a reference to it in the generated `nuxt.d.ts` file.
133
+
134
+ If your module should augment types handled by Nuxt, you can use `addTypeTemplate` to perform this operation:
135
+
136
+ ```js
137
+ import { addTemplate, addTypeTemplate, defineNuxtModule } from '@nuxt/kit'
138
+
139
+ export default defineNuxtModule({
140
+ setup (options, nuxt) {
141
+ addTypeTemplate({
142
+ filename: 'types/my-module.d.ts',
143
+ getContents: () => `// Generated by my-module
144
+ interface MyModuleNitroRules {
145
+ myModule?: { foo: 'bar' }
146
+ }
147
+ declare module 'nitropack/types' {
148
+ interface NitroRouteRules extends MyModuleNitroRules {}
149
+ interface NitroRouteConfig extends MyModuleNitroRules {}
150
+ }
151
+ export {}`,
152
+ })
153
+ },
154
+ })
155
+ ```
156
+
157
+ If you need more granular control, you can use the `prepare:types` hook to register a callback that will inject your types.
158
+
159
+ ```ts
160
+ const template = addTemplate({ /* template options */ })
161
+ nuxt.hook('prepare:types', ({ references }) => {
162
+ references.push({ path: template.dst })
163
+ })
164
+ ```
165
+
166
+ ## Extend TypeScript Config
167
+
168
+ There are multiple ways to extend the TypeScript configuration of the user's project from your module.
169
+
170
+ The simplest way is to modify the Nuxt configuration directly like this:
171
+
172
+ <!-- @case-police-ignore tsConfig -->
173
+ ```ts
174
+ // extend tsconfig.app.json
175
+ nuxt.options.typescript.tsConfig.include ??= []
176
+ nuxt.options.typescript.tsConfig.include.push(resolve('./augments.d.ts'))
177
+
178
+ // extend tsconfig.shared.json
179
+ nuxt.options.typescript.sharedTsConfig.include ??= []
180
+ nuxt.options.typescript.sharedTsConfig.include.push(resolve('./augments.d.ts'))
181
+
182
+ // extend tsconfig.node.json
183
+ nuxt.options.typescript.nodeTsConfig.include ??= []
184
+ nuxt.options.typescript.nodeTsConfig.include.push(resolve('./augments.d.ts'))
185
+
186
+ // extend tsconfig.server.json
187
+ nuxt.options.nitro.typescript ??= {}
188
+ nuxt.options.nitro.typescript.tsConfig ??= {}
189
+ nuxt.options.nitro.typescript.tsConfig.include ??= []
190
+ nuxt.options.nitro.typescript.tsConfig.include.push(resolve('./augments.d.ts'))
191
+ ```
192
+
193
+ Alternatively, you can use the `prepare:types` and `nitro:prepare:types` hooks to extend the TypeScript references for specific type contexts, or modify the TypeScript configuration similar to the example above.
194
+
195
+ ```ts
196
+ nuxt.hook('prepare:types', ({ references, sharedReferences, nodeReferences }) => {
197
+ // extend app context
198
+ references.push({ path: resolve('./augments.d.ts') })
199
+ // extend shared context
200
+ sharedReferences.push({ path: resolve('./augments.d.ts') })
201
+ // extend node context
202
+ nodeReferences.push({ path: resolve('./augments.d.ts') })
203
+ })
204
+
205
+ nuxt.hook('nitro:prepare:types', ({ references }) => {
206
+ // extend server context
207
+ references.push({ path: resolve('./augments.d.ts') })
208
+ })
209
+ ```
210
+
211
+ ::note
212
+ TypeScript references add files to the type context [without being affected by the `exclude` option in `tsconfig.json`](https://www.typescriptlang.org/tsconfig/#exclude).
213
+ ::
214
+
215
+ ## Augment Types
216
+
217
+ Nuxt automatically includes your module's directories in the appropriate type contexts. To augment types from your module, all you need to do is place the type declaration file in the appropriate directory based on the augmented type context. Alternatively, you can [extend the TypeScript configuration](#extend-typescript-config) to augment from an arbitrary location.
218
+
219
+ - `my-module/runtime/` - app type context (except for the `runtime/server` directory)
220
+ - `my-module/runtime/server/` - server type context
221
+ - `my-module/` - node type context (except for the `runtime/` and `runtime/server` directories)
222
+
223
+ ```bash [Directory Structure]
224
+ -| my-module/ # node type context
225
+ ---| runtime/ # app type context
226
+ ------| augments.app.d.ts
227
+ ------| server/ # server type context
228
+ ---------| augments.server.d.ts
229
+ ---| module.ts
230
+ ---| augments.node.d.ts
231
+ ```
@@ -0,0 +1,76 @@
1
+ ---
2
+ title: "Test Your Module"
3
+ description: "Learn how to test your Nuxt module with unit, integration and E2E tests."
4
+ ---
5
+
6
+ Testing helps ensure your module works as expected given various setups. Find in this section how to perform various kinds of tests against your module.
7
+
8
+ ## Write Unit Tests
9
+
10
+ ::tip
11
+ We're still discussing and exploring how to ease unit and integration testing on Nuxt modules.
12
+ :br :br
13
+ [Check out this RFC to join the conversation](https://github.com/nuxt/nuxt/discussions/18399).
14
+ ::
15
+
16
+ ## Write E2E Tests
17
+
18
+ [Nuxt Test Utils](/docs/4.x/getting-started/testing) is the go-to library to help you test your module in an end-to-end way. Here's the workflow to adopt with it:
19
+
20
+ 1. Create a Nuxt application to be used as a "fixture" inside `test/fixtures/*`
21
+ 2. Setup Nuxt with this fixture inside your test file
22
+ 3. Interact with the fixture using utilities from `@nuxt/test-utils` (e.g. fetching a page)
23
+ 4. Perform checks related to this fixture (e.g. "HTML contains ...")
24
+ 5. Repeat
25
+
26
+ In practice, the fixture:
27
+
28
+ ```ts [test/fixtures/ssr/nuxt.config.ts]
29
+ // 1. Create a Nuxt application to be used as a "fixture"
30
+ import MyModule from '../../../src/module'
31
+
32
+ export default defineNuxtConfig({
33
+ ssr: true,
34
+ modules: [
35
+ MyModule,
36
+ ],
37
+ })
38
+ ```
39
+
40
+ And its test:
41
+
42
+ ```ts [test/rendering.ts]
43
+ import { describe, expect, it } from 'vitest'
44
+ import { fileURLToPath } from 'node:url'
45
+ import { $fetch, setup } from '@nuxt/test-utils/e2e'
46
+
47
+ describe('ssr', async () => {
48
+ // 2. Setup Nuxt with this fixture inside your test file
49
+ await setup({
50
+ rootDir: fileURLToPath(new URL('./fixtures/ssr', import.meta.url)),
51
+ })
52
+
53
+ it('renders the index page', async () => {
54
+ // 3. Interact with the fixture using utilities from `@nuxt/test-utils`
55
+ const html = await $fetch('/')
56
+
57
+ // 4. Perform checks related to this fixture
58
+ expect(html).toContain('<div>ssr</div>')
59
+ })
60
+ })
61
+
62
+ // 5. Repeat
63
+ describe('csr', async () => { /* ... */ })
64
+ ```
65
+
66
+ ::tip
67
+ An example of such a workflow is available on [the module starter](https://github.com/nuxt/starter/blob/module/test/basic.test.ts).
68
+ ::
69
+
70
+ ## Test Manually
71
+
72
+ Having a playground Nuxt application to test your module when developing it is really useful. [The module starter integrates one for that purpose](/docs/4.x/guide/modules/getting-started#develop-your-module).
73
+
74
+ You can test your module with other Nuxt applications (applications that are not part of your module repository) locally. To do so, you can use [`npm pack`](https://docs.npmjs.com/cli/commands/npm-pack/) command, or your package manager equivalent, to create a tarball from your module. Then in your test project, you can add your module to `package.json` packages as: `"my-module": "file:/path/to/tarball.tgz"`.
75
+
76
+ After that, you should be able to reference `my-module` like in any regular project.
@@ -0,0 +1,104 @@
1
+ ---
2
+ title: "Follow Best Practices"
3
+ description: "Build performant and maintainable Nuxt modules with these guidelines."
4
+ ---
5
+
6
+ With great power comes great responsibility. While modules are powerful, here are some best practices to keep in mind while authoring modules to keep applications performant and developer experience great.
7
+
8
+ ## Handle Async Setup
9
+
10
+ As we've seen, Nuxt modules can be asynchronous. For example, you may want to develop a module that needs fetching some API or calling an async function.
11
+
12
+ However, be careful with asynchronous behaviors as Nuxt will wait for your module to setup before going to the next module and starting the development server, build process, etc. Prefer deferring time-consuming logic to Nuxt hooks.
13
+
14
+ ::warning
15
+ If your module takes more than **1 second** to setup, Nuxt will emit a warning about it.
16
+ ::
17
+
18
+ ## Prefix Your Exports
19
+
20
+ Nuxt modules should provide an explicit prefix for any exposed configuration, plugin, API, composable, component, or server route to avoid conflicts with other modules, Nuxt internals, or user-defined code.
21
+
22
+ Ideally, prefix them with your module's name. For example, if your module is called `nuxt-foo`:
23
+
24
+ | Type | ❌ Avoid | ✅ Prefer |
25
+ | --- | --- | --- |
26
+ | Components | `<Button>`, `<Modal>` | `<FooButton>`, `<FooModal>` |
27
+ | Composables | `useData()`, `useModal()` | `useFooData()`, `useFooModal()` |
28
+ | Server routes | `/api/track`, `/api/data` | `/api/_foo/track`, `/api/_foo/data` |
29
+
30
+ ### Server Routes
31
+
32
+ This is particularly important for server routes, where common paths like `/api/auth`, `/api/login`, or `/api/user` are very likely already used by the application.
33
+
34
+ Use a unique prefix based on your module name:
35
+ - `/api/_foo/...` (using underscore prefix)
36
+ - `/_foo/...` (for non-API routes)
37
+
38
+ ## Use Lifecycle Hooks
39
+
40
+ When your module needs to perform one-time setup tasks (like generating configuration files, setting up databases, or installing dependencies), use lifecycle hooks instead of running the logic in your main `setup` function.
41
+
42
+ ```ts
43
+ import { addServerHandler, defineNuxtModule } from 'nuxt/kit'
44
+ import semver from 'semver'
45
+
46
+ export default defineNuxtModule({
47
+ meta: {
48
+ name: 'my-database-module',
49
+ version: '1.0.0',
50
+ },
51
+ async onInstall (nuxt) {
52
+ // One-time setup: create database schema, generate config files, etc.
53
+ await generateDatabaseConfig(nuxt.options.rootDir)
54
+ },
55
+ async onUpgrade (options, nuxt, previousVersion) {
56
+ // Handle version-specific migrations
57
+ if (semver.lt(previousVersion, '1.0.0')) {
58
+ await migrateLegacyData()
59
+ }
60
+ },
61
+ setup (options, nuxt) {
62
+ // Regular setup logic that runs on every build
63
+ addServerHandler({ /* ... */ })
64
+ },
65
+ })
66
+ ```
67
+
68
+ This pattern prevents unnecessary work on every build and provides a better developer experience. See the [lifecycle hooks documentation](/docs/4.x/api/kit/modules#using-lifecycle-hooks-for-module-installation-and-upgrade) for more details.
69
+
70
+ ## Be TypeScript Friendly
71
+
72
+ Nuxt has first-class TypeScript integration for the best developer experience.
73
+
74
+ Exposing types and using TypeScript to develop modules benefits users even when not using TypeScript directly.
75
+
76
+ ## Use ESM Syntax
77
+
78
+ Nuxt relies on native ESM. Please read [Native ES Modules](/docs/4.x/guide/concepts/esm) for more information.
79
+
80
+ ## Document Your Module
81
+
82
+ Consider documenting module usage in the readme file:
83
+
84
+ - Why use this module?
85
+ - How to use this module?
86
+ - What does this module do?
87
+
88
+ Linking to the integration website and documentation is always a good idea.
89
+
90
+ ## Provide a Demo
91
+
92
+ It's a good practice to make a minimal reproduction with your module and [StackBlitz](https://nuxt.new/s/v4) that you add to your module readme.
93
+
94
+ This not only provides potential users of your module a quick and easy way to experiment with the module but also an easy way for them to build minimal reproductions they can send you when they encounter issues.
95
+
96
+ ## Stay Version Agnostic
97
+
98
+ Nuxt, Nuxt Kit, and other new toolings are made to have both forward and backward compatibility in mind.
99
+
100
+ Please use "X for Nuxt" instead of "X for Nuxt 3" to avoid fragmentation in the ecosystem and prefer using `meta.compatibility` to set Nuxt version constraints.
101
+
102
+ ## Follow Starter Conventions
103
+
104
+ The module starter comes with a default set of tools and configurations (e.g. ESLint configuration). If you plan on open-sourcing your module, sticking with those defaults ensures your module shares a consistent coding style with other [community modules](/modules) out there, making it easier for others to contribute.
@@ -0,0 +1,32 @@
1
+ ---
2
+ title: "Publish & Share Your Module"
3
+ description: "Join the Nuxt module ecosystem and publish your module to npm."
4
+ ---
5
+
6
+ The [Nuxt module ecosystem](/modules) represents more than 35 million monthly NPM downloads and provides extended functionalities and integrations with all sort of tools. You can be part of this ecosystem!
7
+
8
+ ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/exploring-nuxt-modules-ecosystem-and-module-types?friend=nuxt" target="_blank"}
9
+ Watch Vue School video about Nuxt module types.
10
+ ::
11
+
12
+ ## Understand Module Types
13
+
14
+ **Official modules** are modules prefixed (scoped) with `@nuxt/` (e.g. [`@nuxt/content`](https://content.nuxt.com)). They are made and maintained actively by the Nuxt team. Like with the framework, contributions from the community are more than welcome to help make them better!
15
+
16
+ **Community modules** are modules prefixed (scoped) with `@nuxtjs/` (e.g. [`@nuxtjs/tailwindcss`](https://tailwindcss.nuxtjs.org)). They are proven modules made and maintained by community members. Again, contributions are welcome from anyone.
17
+
18
+ **Third-party and other community modules** are modules (often) prefixed with `nuxt-`. Anyone can make them, using this prefix allows these modules to be discoverable on npm. This is the best starting point to draft and try an idea!
19
+
20
+ **Private or personal modules** are modules made for your own use case or company. They don't need to follow any naming rules to work with Nuxt and are often seen scoped under an npm organization (e.g. `@my-company/nuxt-auth`)
21
+
22
+ ## List Your Module
23
+
24
+ Any community modules are welcome to be listed on [the module list](/modules). To be listed, [open an issue in the nuxt/modules](https://github.com/nuxt/modules/issues/new?template=module_request.yml) repository. The Nuxt team can help you to apply best practices before listing.
25
+
26
+ ## Join nuxt-modules
27
+
28
+ By moving your modules to [nuxt-modules](https://github.com/nuxt-modules), there is always someone else to help, and this way, we can join forces to make one perfect solution.
29
+
30
+ If you have an already published and working module, and want to transfer it to `nuxt-modules`, [open an issue in nuxt/modules](https://github.com/nuxt/modules/issues/new).
31
+
32
+ By joining `nuxt-modules` we can rename your community module under the `@nuxtjs/` scope and provide a subdomain (e.g. `my-module.nuxtjs.org`) for its documentation.
@@ -0,0 +1,36 @@
1
+ ---
2
+ title: 'Module Author Guide'
3
+ titleTemplate: '%s'
4
+ description: 'Learn how to create a Nuxt module to integrate, enhance or extend any Nuxt applications.'
5
+ navigation: false
6
+ surround: false
7
+ ---
8
+
9
+ Nuxt's [configuration](/docs/4.x/api/nuxt-config) and [hooks](/docs/4.x/guide/going-further/hooks) systems make it possible to customize every aspect of Nuxt and add any integration you might need (Vue plugins, CMS, server routes, components, logging, etc.).
10
+
11
+ **Nuxt modules** are functions that sequentially run when starting Nuxt in development mode using `nuxt dev` or building a project for production with `nuxt build`.
12
+ With modules, you can encapsulate, properly test, and share custom solutions as npm packages without adding unnecessary boilerplate to your project, or requiring changes to Nuxt itself.
13
+
14
+ ::card-group{class="sm:grid-cols-1"}
15
+ ::card{icon="i-lucide-rocket" title="Create Your First Module" to="/docs/4.x/guide/modules/getting-started"}
16
+ Learn how to create your first Nuxt module using the official starter template.
17
+ ::
18
+ ::card{icon="i-lucide-box" title="Understand Module Structure" to="/docs/4.x/guide/modules/module-anatomy"}
19
+ Learn how Nuxt modules are structured and how to define them.
20
+ ::
21
+ ::card{icon="i-lucide-code" title="Add Plugins, Components & More" to="/docs/4.x/guide/modules/recipes-basics"}
22
+ Learn how to inject plugins, components, composables and server routes from your module.
23
+ ::
24
+ ::card{icon="i-lucide-layers" title="Use Hooks & Extend Types" to="/docs/4.x/guide/modules/recipes-advanced"}
25
+ Master lifecycle hooks, virtual files and TypeScript declarations in your modules.
26
+ ::
27
+ ::card{icon="i-lucide-test-tube" title="Test Your Module" to="/docs/4.x/guide/modules/testing"}
28
+ Learn how to test your Nuxt module with unit, integration and E2E tests.
29
+ ::
30
+ ::card{icon="i-lucide-medal" title="Follow Best Practices" to="/docs/4.x/guide/modules/best-practices"}
31
+ Build performant and maintainable Nuxt modules with these guidelines.
32
+ ::
33
+ ::card{icon="i-lucide-globe" title="Publish & Share Your Module" to="/docs/4.x/guide/modules/ecosystem"}
34
+ Join the Nuxt module ecosystem and publish your module to npm.
35
+ ::
36
+ ::
@@ -16,7 +16,7 @@ allowing different components to communicate with each other. You can think of i
16
16
  This context is globally available to be used with [Nuxt Kit](/docs/4.x/guide/going-further/kit) composables.
17
17
  Therefore only one instance of Nuxt is allowed to run per process.
18
18
 
19
- To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt Modules](/docs/4.x/guide/going-further/modules).
19
+ To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt modules](/docs/4.x/guide/modules).
20
20
 
21
21
  For more details, check out [the source code](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/core/nuxt.ts).
22
22
 
@@ -77,6 +77,6 @@ Nuxt builds and bundles project using Node.js but also has a runtime side.
77
77
 
78
78
  While both areas can be extended, that runtime context is isolated from build-time. Therefore, they are not supposed to share state, code, or context other than runtime configuration!
79
79
 
80
- `nuxt.config` and [Nuxt Modules](/docs/4.x/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/4.x/directory-structure/app/plugins) can be used to extend runtime.
80
+ `nuxt.config` and [Nuxt modules](/docs/4.x/guide/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/4.x/directory-structure/app/plugins) can be used to extend runtime.
81
81
 
82
- When building an application for production, `nuxt build` will generate a standalone build in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/4.x/guide/going-further/modules).
82
+ When building an application for production, `nuxt build` will generate a standalone build in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/4.x/guide/modules).
@@ -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/going-further/modules) and build context.
12
+ These hooks are available for [Nuxt modules](/docs/4.x/guide/modules) and build context.
13
13
 
14
14
  ### Within `nuxt.config.ts`
15
15
 
@@ -3,7 +3,7 @@ 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/going-further/modules) super easy.
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.
7
7
 
8
8
  ::read-more{to="/docs/4.x/api/kit"}
9
9
  Discover all Nuxt Kit utilities.
@@ -38,7 +38,7 @@ The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `rea
38
38
  ## Type
39
39
 
40
40
  ```ts [Signature]
41
- export function useHead (meta: MaybeComputedRef<MetaObject>): void
41
+ export function useHead (meta: MaybeComputedRef<MetaObject>): ActiveHeadEntry<UseHeadInput>
42
42
 
43
43
  interface MetaObject {
44
44
  title?: string
@@ -52,6 +52,21 @@ interface MetaObject {
52
52
  htmlAttrs?: HtmlAttributes
53
53
  bodyAttrs?: BodyAttributes
54
54
  }
55
+
56
+ interface ActiveHeadEntry<Input> {
57
+ /**
58
+ * Updates the entry with new input.
59
+ *
60
+ * Will first clear any side effects for previous input.
61
+ */
62
+ patch: (input: Input) => void
63
+ /**
64
+ * Dispose the entry, removing it from the active head.
65
+ *
66
+ * Will queue side effects for removal.
67
+ */
68
+ dispose: () => void
69
+ }
55
70
  ```
56
71
 
57
72
  See [@unhead/schema](https://github.com/unjs/unhead/blob/main/packages/vue/src/types/schema.ts) for more detailed types.
@@ -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 |
@@ -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
 
@@ -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).
@@ -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)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuxt/docs-nightly",
3
- "version": "4.2.3-29422039.47e05245",
3
+ "version": "4.2.3-29425455.7d502292",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/nuxt/nuxt.git",