[SOLVED] How can I use kebab-case for naming components in Vue?

How can I use kebab-case for naming components in Vue?

I'd like to use snake_case on the names of components when I call its name on the tag within the template. I just tried:

<script>
import footer-goodfooter from "@/comp/footer/c_footer.vue";
^^^^^^^^^^^^^^                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// 'import ... =' can only be used in TypeScript files.Vetur(8002)

export default {
  name: 'App',
  components: {
    footer-goodfooter,
          ^
// ',' expected.Vetur(1005)
  },

But I want my component(in this case, footer-goodfooter) below inside the template like this:

<main>
   <header-bigheader />
   <content-fat-superfat-hallelujah />
   <footer-goodfooter />
</main>

How can I achieve this? Thank you.

Solution

Components are PascalCase in Vue, but in the template they can be called via kebab-case

<template>
  <footer-good-footer />
</template>

<script lang="ts">
import FooterGoodFooter from "@/comp/footer/c_footer.vue";

export default {
  name: 'App',
  components: {
    FooterGoodFooter, // OR 'custom-name': footerGoodFooter
  }
}
</script>

AFAIK the file name should not matter here.

See: https://v2.vuejs.org/v2/guide/components-registration.html#Local-Registration