mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 05:35:13 +00:00
docs: add example of auto-importing components from npm package (#23792)
This commit is contained in:
parent
59ff865b13
commit
5a6dfd8847
@ -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
|
||||
Any nested directories need to be added first as they are scanned in order.
|
||||
::
|
||||
|
Loading…
Reference in New Issue
Block a user