Remove suffix (.component.vue)

[selimdoyranli]

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?