Note

This is a documentation for version 7.0.0-beta.2.
To check version 6.2.2 go here. To check previous releases go here.

# 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>
Now loading...

# πŸ”§ Options

Nothing.

# πŸ“š Further Reading

# πŸ” Implementation