diff --git a/docs/content/2.guide/4.going-further/3.modules.md b/docs/content/2.guide/4.going-further/3.modules.md index ed63c69aa48..7901dd6516d 100644 --- a/docs/content/2.guide/4.going-further/3.modules.md +++ b/docs/content/2.guide/4.going-further/3.modules.md @@ -174,6 +174,18 @@ By moving your modules to [nuxt-community](https://github.com/nuxt-community), t If you have an already published and working module and want to transfer it to nuxt-community, open an issue in [nuxt/modules](https://github.com/nuxt/modules/issues/new). +## Testing + +### `@nuxt/test-utils` + +Nuxt 3 has a testing library for testing Nuxt apps and modules. You can check out [testing modules](/getting-started/testing#testing-modules) for more information and examples. + +### Testing Externally + +If you wish to test your module outside of the module playground before publishing to npm, you can use [`npm pack`](https://docs.npmjs.com/cli/v7/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: `"nuxt-module-name": "file:/path/to/tarball.tgz"`. + +After that, you should be able to reference `nuxt-module-name` like in any regular project. + ## Examples ### Provide Nuxt Plugins @@ -210,6 +222,26 @@ export default defineNuxtModule({ }) ``` +### Adding Vue Components + +If your module should provide Vue components, you can use the `addComponent` utility to add them as auto-imports for Nuxt to resolve. + +```ts +import { defineNuxtModule, addComponent } from '@nuxt/kit' + +export default defineNuxtModule({ + setup(options, nuxt) { + addComponent({ + name: 'MyComponent', // name of the component to be used in vue templates + export: 'MyAwesomeComponent', // (optional) if the component is a named (rather than default) export + // filePath should be package name or resolved path + // if the component is created locally, preferably in `runtime` dir + filePath: '@vue/awesome-components' // resolve(runtimeDir, 'components', 'MyComponent.vue') + }) + } +}) +``` + ### 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: diff --git a/docs/content/3.api/4.advanced/2.kit.md b/docs/content/3.api/4.advanced/2.kit.md index ede041d8a64..fa45bd981b8 100644 --- a/docs/content/3.api/4.advanced/2.kit.md +++ b/docs/content/3.api/4.advanced/2.kit.md @@ -34,8 +34,8 @@ [source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/imports.ts) -- `addAutoImport(imports)` -- `addAutoImportDir(autoImportDirs)` +- `addImports(imports)` +- `addImportsDir(autoImportDirs)` ### Components