I am trying to understand the vue documentation on ponents. 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 ponents:
----------------------------------------------------------------------------------------------------
<!-- 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-ponent></myponent> so can someone explain when and why I would ever NEED to use kebab case?

Here is the Documentation

I am trying to understand the vue documentation on ponents. 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 ponents:
----------------------------------------------------------------------------------------------------
<!-- 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-ponent></myponent> so can someone explain when and why I would ever NEED to use kebab case?

Here is the Documentation

• javascript
• vue.js
• vue-ponent
• vuejs3

Share Follow edited Sep 20, 2022 at 20:06 kissu 46.9k1616 gold badges9090 silver badges189189 bronze badges asked Sep 20, 2022 at 15:22 mcoolmcool 78511 gold badge1212 silver badges5151 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

For me, all the limitations listed here: https://vuejs/guide/essentials/ponent-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/style-guide/rules-strongly-remended.html#ponent-name-casing-in-templates

In Vue 3 the generally remended way is PascalCase.

PascalCase names are valid JavaScript identifiers. This makes it easier to import and register ponents in JavaScript. It also helps IDEs with auto-pletion.

<PascalCase /> makes it more obvious that this is a Vue ponent instead of a native HTML element in templates. It also differentiates Vue ponents from custom elements (web ponents).

This is the remended style when working with SFC or string templates. However, as discussed in in-DOM Template Parsing Caveats, PascalCase tags are not usable in in-DOM templates.

https://vuejs/guide/ponents/registration.html#ponent-name-casing

Technically, you can use either kebab-case or PascalCase. But it's strongly remended using kebab inside DOM template in order to have syntax consistency with other html tags.

Please refer to official Vue style guide: https://v2.vuejs/v2/style-guide/?redirect=true#Component-name-casing-in-templates-strongly-remended