docs: add example of auto-importing components from npm package (#23792)

This commit is contained in:
Matej Černý 2023-10-19 22:21:52 +02:00 committed by GitHub
parent 59ff865b13
commit 5a6dfd8847
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -166,6 +166,38 @@ export default defineNuxtConfig({
}) })
``` ```
## npm Packages
If you want to auto-import components from an npm package, you can use [`addComponent`](/docs/api/kit/components#addcomponent) in a [local module](/docs/guide/directory-structure/modules) to register them.
::code-group
```ts [~/modules/register-component.ts]
import { addComponent, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup() {
// import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
addComponent({
name: 'MyAutoImportedComponent',
export: 'MyComponent',
filePath: 'my-npm-package',
})
},
})
```
```vue [app.vue]
<template>
<div>
<!-- the component uses the name we specified and is auto-imported -->
<MyAutoImportedComponent />
</div>
</template>
```
::
::callout ::callout
Any nested directories need to be added first as they are scanned in order. Any nested directories need to be added first as they are scanned in order.
:: ::