diff --git a/docs/2.guide/3.going-further/3.modules.md b/docs/2.guide/3.going-further/3.modules.md index ee35df1ea5..1588fa49af 100644 --- a/docs/2.guide/3.going-further/3.modules.md +++ b/docs/2.guide/3.going-further/3.modules.md @@ -294,6 +294,42 @@ export default defineNuxtModule({ }) ``` +### Adding Composables + +If your module should provide composables, you can use the `addImports` utility to add them as auto-imports for Nuxt to resolve. + +```ts +import { defineNuxtModule, addImports, createResolver } from '@nuxt/kit' + +export default defineNuxtModule({ + setup(options, nuxt) { + const resolver = createResolver(import.meta.url) + addImports({ + name: 'useComposable', // name of the composable to be used + as: 'useComposable', + from: resolver.resolve('runtime/composables/useComposable') // path of composable + }) + } +}) +``` + +Alternatively, you can add an entire directory by using `addImportsDir`. + +```ts +import { defineNuxtModule, addImportsDir, createResolver } from '@nuxt/kit' + +export default defineNuxtModule({ + setup(options, nuxt) { + const resolver = createResolver(import.meta.url) + addImportsDir(resolver.resolve('runtime/composables')) + } +}) +``` + +::alert +Note that auto-imports are not enabled for files within `node_modules` for performance reasons, so the module starter [deliberately disables them](https://github.com/nuxt/starter/blob/module/.nuxtrc#L1) while developing a module. If you are using the module starter, auto-imports will not be enabled in your playground either. +:: + ### Clean Up Module If your module opens, handles or starts a watcher, you should close it when the Nuxt lifecycle is done. For this, use the `close` hook: