pageClass | sidebarDepth | title | description |
---|---|---|---|
rule-details |
0 |
vue/custom-event-name-casing |
enforce custom event names always use "kebab-case" |
enforce custom event names always use "kebab-case"
- ⚙️ This rule is included in all of
"plugin:vue/vue3-essential"
,"plugin:vue/essential"
,"plugin:vue/vue3-strongly-recommended"
,"plugin:vue/strongly-recommended"
,"plugin:vue/vue3-recommended"
and"plugin:vue/recommended"
.
This rule enforces using kebab-case custom event names.
Event names will never be used as variable or property names in JavaScript, so there’s no reason to use camelCase or PascalCase. Additionally,
v-on
event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), sov-on:myEvent
would becomev-on:myevent
– makingmyEvent
impossible to listen to.For these reasons, we recommend you always use kebab-case for event names.
See Guide - Custom Events for more details.
<template>
<!-- ✓ GOOD -->
<button @click="$emit('my-event')" />
<!-- ✗ BAD -->
<button @click="$emit('myEvent')" />
</template>
<script>
export default {
methods: {
onClick () {
/* ✓ GOOD */
this.$emit('my-event')
this.$emit('update:myProp', myProp)
/* ✗ BAD */
this.$emit('myEvent')
}
}
}
</script>
Nothing.