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

by

4👍

✅

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

👤S.Visser

0👍

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.

👤StevenSiebert

Leave a comment