Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

docs: add addComponent and testing to modules and update addImports #7543

Merged
merged 6 commits into from Sep 15, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
32 changes: 32 additions & 0 deletions docs/content/2.guide/4.going-further/3.modules.md
Expand Up @@ -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
Expand Down Expand Up @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions docs/content/3.api/4.advanced/2.kit.md
Expand Up @@ -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

Expand Down