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

Question

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.

score 4 · Accepted Answer · edited Jul 15 '22 at 01:27

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

score 0 · Answer 2 · edited Jul 16 '22 at 04:37

I really don´t know if I understand your question. But if you want to achieve to call a component in your template like:

<single-filter-container></single-filter-container>

... then just do the export in the singleFilterContainer.vue like:

export default {
   name: "singleFilterContainer"
}

... import this component into it´s parent like:

import SingleFilterContainer from "@/components/singleFilterContainer";

... and use it in your template like:

<single-filter-container></single-filter-container>

As far es I know, this is a normal usecase, so there shouldn´t be any workaround needed. It is recommended in the Style Guide of Vue.js. Please try it as I mentioned and give some feedback, if it doesn´t work.

If so, we can check if there is any problem with one of your modules or your IDE have a plugin for autocomplete this for you. I am using Vue 3 and working on IntelliJ with Vue.js plugin.

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

2 Answers2