Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

Commit

Permalink
docs: add info about extensions and pathPrefix keys
Browse files Browse the repository at this point in the history
Co-authored-by: Mike Laumann Bellika <5175031+MikeBellika@users.noreply.github.com>
  • Loading branch information
danielroe and MikeBellika committed Jan 19, 2023
1 parent 912eafb commit 28a2a91
Showing 1 changed file with 31 additions and 0 deletions.
31 changes: 31 additions & 0 deletions docs/content/1.docs/2.guide/2.directory-structure/1.components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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.
Expand Down

0 comments on commit 28a2a91

Please sign in to comment.