diff --git a/docs/2.guide/3.going-further/3.modules.md b/docs/2.guide/3.going-further/3.modules.md index a22cacb0e5..a17a430d2c 100644 --- a/docs/2.guide/3.going-further/3.modules.md +++ b/docs/2.guide/3.going-further/3.modules.md @@ -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({ + 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 [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.