From 5a6dfd884747325f761cd5da86654db59abe642a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20=C4=8Cern=C3=BD?=
 <112722215+CernyMatej@users.noreply.github.com>
Date: Thu, 19 Oct 2023 22:21:52 +0200
Subject: [PATCH] docs: add example of auto-importing components from npm
 package (#23792)

---
 .../2.directory-structure/1.components.md     | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md
index 91efbc2fdb..eba64a77ce 100644
--- a/docs/2.guide/2.directory-structure/1.components.md
+++ b/docs/2.guide/2.directory-structure/1.components.md
@@ -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.
 ::