mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 21:55:11 +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
|
::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.
|
||||||
::
|
::
|
||||||
|
Loading…
Reference in New Issue
Block a user