@nuxt/docs-nightly 5.0.0-29662277.ceb92e62 → 5.0.0-29662437.89c933ea
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.
- package/3.guide/4.modules/3.recipes-basics.md +5 -33
- package/3.guide/4.modules/4.module-dependencies.md +84 -0
- package/3.guide/4.modules/index.md +3 -0
- package/package.json +1 -1
- /package/3.guide/4.modules/{4.recipes-advanced.md → 5.recipes-advanced.md} +0 -0
- /package/3.guide/4.modules/{5.testing.md → 6.testing.md} +0 -0
- /package/3.guide/4.modules/{6.best-practices.md → 7.best-practices.md} +0 -0
- /package/3.guide/4.modules/{7.ecosystem.md → 8.ecosystem.md} +0 -0
|
@@ -393,47 +393,19 @@ export default defineNuxtModule({
|
|
|
393
393
|
|
|
394
394
|
## Use Other Modules
|
|
395
395
|
|
|
396
|
-
If your module depends on other modules, you can specify them using the `moduleDependencies` option
|
|
396
|
+
If your module depends on other modules, you can specify them using the `moduleDependencies` option:
|
|
397
397
|
|
|
398
398
|
```ts
|
|
399
|
-
import {
|
|
400
|
-
|
|
401
|
-
const resolver = createResolver(import.meta.url)
|
|
399
|
+
import { defineNuxtModule } from '@nuxt/kit'
|
|
402
400
|
|
|
403
|
-
export default defineNuxtModule
|
|
401
|
+
export default defineNuxtModule({
|
|
404
402
|
meta: {
|
|
405
403
|
name: 'my-module',
|
|
406
404
|
},
|
|
407
405
|
moduleDependencies: {
|
|
408
|
-
'@nuxtjs/tailwindcss': {
|
|
409
|
-
// You can specify a version constraint for the module
|
|
410
|
-
version: '>=6',
|
|
411
|
-
// Any configuration that should override `nuxt.options`
|
|
412
|
-
overrides: {
|
|
413
|
-
exposeConfig: true,
|
|
414
|
-
},
|
|
415
|
-
// Any configuration that should be set. It will override module defaults but
|
|
416
|
-
// will not override any configuration set in `nuxt.options`
|
|
417
|
-
defaults: {
|
|
418
|
-
config: {
|
|
419
|
-
darkMode: 'class',
|
|
420
|
-
content: {
|
|
421
|
-
files: [
|
|
422
|
-
resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
|
|
423
|
-
resolver.resolve('./runtime/*.{mjs,js,ts}'),
|
|
424
|
-
],
|
|
425
|
-
},
|
|
426
|
-
},
|
|
427
|
-
},
|
|
428
|
-
},
|
|
429
|
-
},
|
|
430
|
-
setup (options, nuxt) {
|
|
431
|
-
// We can inject our CSS file which includes Tailwind's directives
|
|
432
|
-
nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))
|
|
406
|
+
'@nuxtjs/tailwindcss': {},
|
|
433
407
|
},
|
|
434
408
|
})
|
|
435
409
|
```
|
|
436
410
|
|
|
437
|
-
|
|
438
|
-
The `moduleDependencies` option replaces the deprecated `installModule` function and ensures proper setup order and configuration merging.
|
|
439
|
-
::
|
|
411
|
+
:read-more{to="/docs/4.x/guide/modules/module-dependencies"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: 'Module Dependencies'
|
|
3
|
+
description: 'Declare dependencies on other modules with version constraints and configuration merging.'
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
If your module depends on other modules, you can declare them using the `moduleDependencies` option. Nuxt then ensures those modules are installed in the correct order, validates any version constraints you provide, and merges configuration you supply for them.
|
|
7
|
+
|
|
8
|
+
## Basic Usage
|
|
9
|
+
|
|
10
|
+
```ts
|
|
11
|
+
import { createResolver, defineNuxtModule } from '@nuxt/kit'
|
|
12
|
+
|
|
13
|
+
const resolver = createResolver(import.meta.url)
|
|
14
|
+
|
|
15
|
+
export default defineNuxtModule<ModuleOptions>({
|
|
16
|
+
meta: {
|
|
17
|
+
name: 'my-module',
|
|
18
|
+
},
|
|
19
|
+
moduleDependencies: {
|
|
20
|
+
'@nuxtjs/tailwindcss': {
|
|
21
|
+
// You can specify a version constraint for the module
|
|
22
|
+
version: '>=6',
|
|
23
|
+
// Any configuration that should override `nuxt.options`
|
|
24
|
+
overrides: {
|
|
25
|
+
exposeConfig: true,
|
|
26
|
+
},
|
|
27
|
+
// Any configuration that should be set. It will override module defaults but
|
|
28
|
+
// will not override any configuration set in `nuxt.options`
|
|
29
|
+
defaults: {
|
|
30
|
+
config: {
|
|
31
|
+
darkMode: 'class',
|
|
32
|
+
content: {
|
|
33
|
+
files: [
|
|
34
|
+
resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
|
|
35
|
+
resolver.resolve('./runtime/*.{mjs,js,ts}'),
|
|
36
|
+
],
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
setup (options, nuxt) {
|
|
43
|
+
// We can inject our CSS file which includes Tailwind's directives
|
|
44
|
+
nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))
|
|
45
|
+
},
|
|
46
|
+
})
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
::callout{type="info"}
|
|
50
|
+
The `moduleDependencies` option replaces the deprecated `installModule` function.
|
|
51
|
+
::
|
|
52
|
+
|
|
53
|
+
The key of each entry identifies the module to depend on. You can use an npm package name, a path to a local module directory, or a Nuxt alias such as `~` or `@`.
|
|
54
|
+
|
|
55
|
+
## Depending on Local Modules
|
|
56
|
+
|
|
57
|
+
When the dependency lives inside the [`modules/` directory](/docs/4.x/guide/directory-structure/modules), use a file path to declare the dependency:
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
import { defineNuxtModule } from '@nuxt/kit'
|
|
61
|
+
|
|
62
|
+
export default defineNuxtModule({
|
|
63
|
+
moduleDependencies: {
|
|
64
|
+
// Path relative to the project root
|
|
65
|
+
'./modules/my-local-module': {},
|
|
66
|
+
// Or using a Nuxt alias
|
|
67
|
+
'~/modules/another-local-module': {},
|
|
68
|
+
},
|
|
69
|
+
// ...
|
|
70
|
+
})
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
::important
|
|
74
|
+
**Relative paths are resolved from your project's `rootDir`**, not from the file declaring the dependency. A module at `modules/foo.ts` referencing `modules/bar.ts` must use `'./modules/bar'`, not `'./bar'`. Using a Nuxt alias such as `~/modules/bar` avoids this ambiguity.
|
|
75
|
+
::
|
|
76
|
+
|
|
77
|
+
## Options
|
|
78
|
+
|
|
79
|
+
Each entry in `moduleDependencies` accepts the following fields:
|
|
80
|
+
|
|
81
|
+
- `version`: A semver range. If the resolved module's version does not satisfy this range, Nuxt throws an error. Version checks only apply when the dependency can be resolved to a `package.json`, so they are a no-op for project-local modules.
|
|
82
|
+
- `overrides`: Configuration applied on top of `nuxt.options`, taking precedence over user configuration.
|
|
83
|
+
- `defaults`: Configuration applied below `nuxt.options`. User configuration takes precedence over these.
|
|
84
|
+
- `optional`: If `true`, the module is not installed automatically when missing. `overrides` and `defaults` are still applied if the module is installed elsewhere.
|
|
@@ -21,6 +21,9 @@ With modules, you can encapsulate, properly test, and share custom solutions as
|
|
|
21
21
|
::card{icon="i-lucide-code" title="Add Plugins, Components & More" to="/docs/4.x/guide/modules/recipes-basics"}
|
|
22
22
|
Learn how to inject plugins, components, composables and server routes from your module.
|
|
23
23
|
::
|
|
24
|
+
::card{icon="i-lucide-link" title="Depend on Other Modules" to="/docs/4.x/guide/modules/module-dependencies"}
|
|
25
|
+
Declare dependencies on other modules with version constraints and configuration merging.
|
|
26
|
+
::
|
|
24
27
|
::card{icon="i-lucide-layers" title="Use Hooks & Extend Types" to="/docs/4.x/guide/modules/recipes-advanced"}
|
|
25
28
|
Master lifecycle hooks, virtual files and TypeScript declarations in your modules.
|
|
26
29
|
::
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|