# vue/v-on-event-hyphenation
enforce v-on event naming style on custom components in template
- 🔧 The
--fixoption on the command line (opens new window) can automatically fix some of the problems reported by this rule.
# 📖 Rule Details
This rule enforces using hyphenated v-on event names on custom components in Vue templates.
<template>
<!-- ✓ GOOD -->
<MyComponent v-on:custom-event="handleEvent"/>
<MyComponent @custom-event="handleEvent"/>
<!-- ✗ BAD -->
<MyComponent v-on:customEvent="handleEvent"/>
<MyComponent @customEvent="handleEvent"/>
</template>
# 🔧 Options
{
"vue/v-on-event-hyphenation": ["error", "always" | "never", {
"autofix": false,
"ignore": []
}]
}
"always"(default) ... Use hyphenated name."never"... Don't use hyphenated name."ignore"... Array of ignored names"autofix"... Iftrue, enable autofix. If you are using Vue 2, we recommend that you do not use it due to its side effects.
# "always"
It errors on upper case letters.
<template>
<!-- ✓ GOOD -->
<MyComponent v-on:custom-event="handleEvent"/>
<!-- ✗ BAD -->
<MyComponent v-on:customEvent="handleEvent"/>
</template>
# "never"
It errors on hyphens.
<template>
<!-- ✓ GOOD -->
<MyComponent v-on:customEvent="handleEvent"/>
<!-- ✗ BAD -->
<MyComponent v-on:custom-event="handleEvent"/>
</template>
# "never", { "ignore": ["custom-event"] }
Don't use hyphenated name but allow custom event names
<template>
<!-- ✓ GOOD -->
<MyComponent v-on:custom-event="handleEvent"/>
<MyComponent v-on:myEvent="handleEvent"/>
<!-- ✗ BAD -->
<MyComponent v-on:my-event="handleEvent"/>
</template>
# 📚 Further Reading
# 👫 Related Rules
# 🚀 Version
This rule was introduced in eslint-plugin-vue v7.4.0