Vue.js 2 Cookbook

Kebab case and camel case

Kebab case is written like works are put in a shish-kebab--like-this-for-example. Camel case uses capitalization instead of spaces--capitalizationLooksLikeThis. Since HTML is case insensitive, it cannot use camel case. However, JavaScript is all about camel case; how do we make the two work together?

What Vue does is that it converts all the camel case into kebab case once it has to go in HTML. This is relevant to props because they are used in HTML.

Suppose, for a second, that our level variable is now called soundLevel:

props: ['soundLevel']

Consider that you try to use it as is in the HTML:

<sound-icon :soundLevel="soundLevel"></sound-icon>

It won't work because the variable is now called sound-level in the ...