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 05cb5a653e..88330c37a5 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 ``` +## 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 `` and not ``. + ## Dynamic Components If you want to use the Vue `` syntax, then you will need to use the `resolveComponent` helper provided by Vue.