eslint-plugin-vue

Appearance

Return to top
On this page

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. (Default is camelCase.)

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 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 for more details.

This rule enforces camelCase by default.

Now loading...

🔧 Options

json
{
  "vue/custom-event-name-casing": ["error",
    "camelCase" | "kebab-case",
    {
      "ignores": []
    }
  ]
}
  • "camelCase" (default) ... Enforce custom event names to camelCase.
  • "kebab-case" ... Enforce custom event names to kebab-case.
  • 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"

Now loading...

"camelCase"

Now loading...

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

Now loading...

📚 Further Reading

🚀 Version

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

🔍 Implementation