Prefer using kebab-case for custom event names JS-0605

Prefer kebab-case when naming events in Vue templates. Other cases can become less readable in the resulting markup.

HTML is case insensitive, so the v-on listeners will be converted to lowercase in the DOM. An event named 'myEvent' would then become 'myevent', hurting readability. Event names are never used as variable or property names in JavaScript, so there’s no reason to use camelCase or PascalCase.

What is kebab-case? Kebab case or kebab-case is a variable naming convention where a developer replaces the spaces between words with a dash. Two or more words are often required to properly convey a resource's meaning. However, most programming languages don't allow spaces between words. The kebab case naming convention attempts to overcome this limitation by replacing spaces between words with a dash.

Bad Practice

<button @click="$emit('myEvent')" />

Recommended

<button @click="$emit('my-event')" />