# vue/custom-event-name-casing

enforce specific casing for custom event name

Define a style for custom event name casing for consistency purposes.

# 📖 Rule Details

This rule aims to warn the custom event names other than the configured casing.

Vue 2 recommends using kebab-case for 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 (for v2) - Custom Events (opens new window) for more details.

In Vue 3, using either camelCase or kebab-case for your custom event name does not limit its use in v-on. However, following JavaScript conventions, camelCase is more natural.

See Guide - Custom Events (opens new window) for more details.

This rule enforces kebab-case by default.

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

Now loading...

# 🔧 Options

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

"kebab-case" (default) ... Enforce custom event names to kebab-case.
"camelCase" ... Enforce custom event names to camelCase.
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 click:row or fooBar.

# `"kebab-case"`

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

  <!-- ✗ BAD -->
  <button @click="$emit('myEvent')" />
</template>
<script>
export default {
  methods: {
    onClick () {
      /* ✓ GOOD */
      this.$emit('my-event')

      /* ✗ BAD */
      this.$emit('myEvent')
    }
  }
}
</script>

Now loading...

# `"camelCase"`

<template>
  <!-- ✓ GOOD -->
  <button @click="$emit('myEvent')" />

  <!-- ✗ BAD -->
  <button @click="$emit('my-event')" />
</template>
<script>
export default {
  methods: {
    onClick () {
      /* ✓ GOOD */
      this.$emit('myEvent')

      /* ✗ BAD */
      this.$emit('my-event')
    }
  }
}
</script>

Now loading...

# `"ignores": ["fooBar", "/^[a-z]+(?:-[a-z]+):[a-z]+(?:-[a-z]+)$/u"]`

<template>
  <!-- ✓ GOOD -->
  <button @click="$emit('click:row')" />
  <button @click="$emit('fooBar')" />

  <!-- ✗ BAD -->
  <button @click="$emit('myEvent')" />
</template>
<script>
export default {
  methods: {
    onClick () {
      /* ✓ GOOD */
      this.$emit('click:row')
      this.$emit('fooBar')

      /* ✗ BAD */
      this.$emit('myEvent')
    }
  }
}
</script>

Now loading...

# 📚 Further Reading

# 🚀 Version

This rule was introduced in eslint-plugin-vue v7.0.0

# 🔍 Implementation

← vue/component-name-in-template-casing vue/html-button-has-type →

# vue/custom-event-name-casing

# 📖 Rule Details

# 🔧 Options

# "kebab-case"

# "camelCase"

# "ignores": ["fooBar", "/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u"]

# 📚 Further Reading

# 👫 Related Rules

# 🚀 Version

# 🔍 Implementation

# `"kebab-case"`

# `"camelCase"`

# `"ignores": ["fooBar", "/^[a-z]+(?:-[a-z]+):[a-z]+(?:-[a-z]+)$/u"]`