kebab-case in MDB components for Vue

Question

The Vue documentation (here) states that you need to use kebab-case to connect components in the DOM... I use Material Design for Bootstrap 5 & Vue 3 and the components are written using PascaleCase (although kebab-case is used for Bootstrap 4).

Question: based on the Vue documentation, is it necessary to connect components using kebab-case:

components: {
  ...
  "mdb-tab": MDBTab,
  ...
},

or leave it as it is, which will be strange since I connect my components via kebab-case:

...
<my-first-component />
<MDBTab></MDBTab>
<my-last-component />
...

Answer 1

There is no huge differences between using

<my-cool-component></my-cool-component>
<MyCoolComponent />
<my-cool-component /> <!-- this one is less correct HTML-wise but still works thanks to compiler -->

Simply try to stick to one convention.

To get more details on the little differences, you can read the style guide and use kebab-case if you want to avoid some minor limitations.