eslint-plugin-vue

# vue/v-on-event-hyphenation

enforce v-on event naming style on custom components in template

  • ⚙️ This rule is included in "plugin:vue/vue3-strongly-recommended" and "plugin:vue/vue3-recommended".
  • 🔧 The --fix option 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>
Now loading...

# 🔧 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" ... If true, 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>
Now loading...

# "never"

It errors on hyphens.

<template> <!-- ✓ GOOD --> <MyComponent v-on:customEvent="handleEvent"/> <!-- ✗ BAD --> <MyComponent v-on:custom-event="handleEvent"/> </template>
Now loading...

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

# 📚 Further Reading

# 🚀 Version

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

# 🔍 Implementation

← vue/attributes-order →