mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-13 09:33:54 +00:00
docs: add info about extensions and pathPrefix keys
Co-authored-by: Mike Laumann Bellika <5175031+MikeBellika@users.noreply.github.com>
This commit is contained in:
parent
912eafbbf6
commit
28a2a91b64
@ -27,6 +27,22 @@ Nuxt automatically imports any components in your `components/` directory (along
|
|||||||
</template>
|
</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
|
## Component Names
|
||||||
|
|
||||||
If you have a component in nested directories such as:
|
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`.)
|
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
|
## 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.
|
If you want to use the Vue `<component :is="someComputedComponent">` syntax, then you will need to use the `resolveComponent` helper provided by Vue.
|
||||||
|
Loading…
Reference in New Issue
Block a user