PascalCase or kebab-case usage in Vue's DOM content?

mcool 0
Viewed 46

I am trying to understand the vue documentation on components. I came across this paragraph in the documentation:

If you are authoring your templates directly in a DOM (e.g. as the content of a native <template> element), the 
template will be subject to the browser's native HTML parsing behavior. 
In such cases, you will need to use kebab-case and explicit closing tags for components:
----------------------------------------------------------------------------------------------------
<!-- if this template is written in the DOM -->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>

I don't fully understand what this means. In my project I am able to use pascal case OR kebab case without problems. Why does the documentation say In such cases, you will need to use kebab-case?

What case is it referring to?

In my template, I can do <MyComponent/> and I can also do <my-component></mycomponent> so can someone explain when and why I would ever NEED to use kebab case?

Here is the Documentation

vue-component vuejs3 vue.js javascript
2 Answers
userqiK910

For me, all the limitations listed here: https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats

Are only for the cases when you use Vue via a CDN. You are probably using SFC files, in that situation you don't really need to worry about those limitations.

Keep in mind that consistency is quite important tho, so try to not mix both of them (stick to only one form). AFAIK, most Vue devs are using kebab-case (myself too).

There is no hard argument for one or the other, there are benefits and downsides to both. Quite some answers regarding this kind of style guide are detailed here: https://vuejs.org/style-guide/rules-strongly-recommended.html#component-name-casing-in-templates

kissu0
Related