mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-31 07:40:33 +00:00
docs: add testing and addComponent
to modules and update addImports
(#7543)
This commit is contained in:
parent
b2f147d5e2
commit
4d91ededb1
@ -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:
|
||||
|
@ -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
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user