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

Commit

Permalink
docs: add testing and addComponent to modules and update `addImport…
Browse files Browse the repository at this point in the history
…s` (#7543)
  • Loading branch information
Lexpeartha authored Sep 15, 2022
1 parent b2f147d commit 4d91ede
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 2 deletions.
32 changes: 32 additions & 0 deletions docs/content/2.guide/4.going-further/3.modules.md
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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

0 comments on commit 4d91ede

Please sign in to comment.