Remove suffix (.component.vue)
selimdoyranli opened this issue · comments
Under /components directory I have component structure like this
components
┣ Button
┃ ┣ PaperButton
┃ ┃ ┣ PaperButton.component.scss
┃ ┃ ┣ PaperButton.component.types.ts
┃ ┃ ┗ PaperButton.component.vue
┃ ┗ index.ts
┣ ButtonGroup
┃ ┣ ApplicationNavButtonGroup
┃ ┃ ┣ ApplicationNavButtonGroup.component.scss
┃ ┃ ┣ ApplicationNavButtonGroup.component.types.ts
┃ ┃ ┗ ApplicationNavButtonGroup.component.vue
┃ ┗ index.ts
┣ Card
┃ ┣ ReplyCard
┃ ┃ ┣ ReplyCard.component.scss
┃ ┃ ┣ ReplyCard.component.types.ts
┃ ┃ ┗ ReplyCard.component.vue
┃ ┣ ReviewCard
┃ ┃ ┣ ReviewCard.component.scss
┃ ┃ ┣ ReviewCard.component.types.ts
┃ ┃ ┗ ReviewCard.component.vue
┃ ┗ index.ts
...
My components config in nuxt.config.ts is like this:
components: [
{
path: '@/components',
pathPrefix: false,
extensions: ['vue']
}
]
When I use a folder structure and config in this way, for example, this PaperButton is exported with the name PaperButtonComponent. It looks like this:
export { default as PaperButtonComponent } from '../..\\components\\Button\\PaperButton\\PaperButton.component.vue'
I looked at this from the components output in the .nuxt directory.
For this reason, where I want to use this component, I have to add Component expression to the end.
<template lang="pug">
.page.home-page
.col-lg-7.mx-auto
h1.home-page__title(v-html="$t('hero.home.title')")
h2.home-page__description {{ $t('hero.home.description') }}
ReviewCardComponent
</template>
But I don't want that. How can I do this while my component naming remains .component.vue?