custom-event-name-casing.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/custom-event-name-casing	enforce custom event names always use "kebab-case"

vue/custom-event-name-casing

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".

📖 Rule Details

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), so v-on:myEvent would become v-on:myevent – making myEvent 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>

🔧 Options

Nothing.

📚 Further Reading

• Guide - Custom Events

🔍 Implementation

• Rule source
• Test source