docs: add instruction on how to use other modules in a module (#22081)

This commit is contained in:
Ali Azimi 2023-07-18 12:26:43 +02:00 committed by GitHub
parent a6b4c3c9d8
commit 646137a63a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -411,6 +411,37 @@ export default defineNuxtModule({
}) })
``` ```
#### Using Other Modules in Your Module
If your module depends on other modules, you can add them by using Nuxt Kit's `installModule` utility. For example, if you wanted to use Nuxt Tailwind in your module, you could add it as below:
```ts
import { defineNuxtModule, createResolver, installModule } from '@nuxt/kit'
export default defineNuxtModule<ModuleOptions>({
async setup (options, nuxt) {
const { resolve } = createResolver(import.meta.url)
// We can inject our CSS file which includes Tailwind's directives
nuxt.options.css.push(resolve('./runtime/assets/styles.css'))
await installModule('@nuxtjs/tailwindcss', {
// module configuration
exposeConfig: true,
config: {
darkMode: 'class',
content: {
files: [
resolve('./runtime/components/**/*.{vue,mjs,ts}'),
resolve('./runtime/*.{mjs,js,ts}')
]
}
}
})
}
})
```
#### Using Hooks #### Using Hooks
[Lifecycle hooks](/docs/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. [Lifecycle hooks](/docs/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.