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

{
  "vue/custom-event-name-casing": ["error", {
    "ignores": []
  }]
}

• ignores (string[]) ... The event names to ignore. Sets the event name to allow. For example, custom event names, Vue components event with special name, or Vue library component event name. You can set the regexp by writing it like "/^name/" or update:input or fooBar.

📚 Further Reading

• Guide - Custom Events

🔍 Implementation

• Rule source
• Test source