From 28a2a91b64e16d499c69da1a1fb54871992b3b14 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 19 Jan 2023 13:06:13 +0000
Subject: [PATCH] docs: add info about extensions and pathPrefix keys

Co-authored-by: Mike Laumann Bellika <5175031+MikeBellika@users.noreply.github.com>
---
 .../2.directory-structure/1.components.md     | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/docs/content/1.docs/2.guide/2.directory-structure/1.components.md b/docs/content/1.docs/2.guide/2.directory-structure/1.components.md
index 05cb5a653e2..88330c37a50 100644
--- a/docs/content/1.docs/2.guide/2.directory-structure/1.components.md
+++ b/docs/content/1.docs/2.guide/2.directory-structure/1.components.md
@@ -27,6 +27,22 @@ Nuxt automatically imports any components in your `components/` directory (along
 </template>
 ```
 
+## Component extensions
+
+By default, any file with an extension specified in the [extensions key of `nuxt.config.ts`](/api/configuration/nuxt-config#extensions) is treated as a component.
+If you need to restrict the file extensions that should be registered as components, you can use the extended form of the components directory declaration and its `extensions` key:
+
+```diff
+export default defineNuxtModule({
+  components: [
+    {
+      path: '~/components',
++     extensions: ['.vue'],
+    }
+  ]
+})
+```
+
 ## Component Names
 
 If you have a component in nested directories such as:
@@ -48,6 +64,21 @@ If you have a component in nested directories such as:
 For clarity, we recommend that the component's filename matches its name. (So, in the example above, you could rename `Button.vue` to be `BaseFooButton.vue`.)
 ::
 
+If you want to auto-import components based only on its name, not path, then you need to set `pathPrefix` option to `false` using extended form of the configuration object:
+
+```diff
+export default defineNuxtConfig({
+  components: [
+    {
+      path: '~/components/',
++     pathPrefix: false,
+    },
+  ],
+});
+```
+
+This registers the components using the same strategy as used in Nuxt 2. For example, `~/components/Some/MyComponent.vue` will be usable as `<MyComponent>` and not `<SomeMyComponent>`.
+
 ## Dynamic Components
 
 If you want to use the Vue `<component :is="someComputedComponent">` syntax, then you will need to use the `resolveComponent` helper provided by Vue.