JS.VUE.V.ON.EVENT.HYPHENATION

Rule Details

This rule enforces using hyphenated v-on event names on custom components in Vue templates.

{'vue/v-on-event-hyphenation': ['error', 'always', { autofix: true }]}

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

{'vue/v-on-event-hyphenation': ['error', 'always', { autofix: true }]}

<template>
  <!-- GOOD -->
  <MyComponent v-on:custom-event="handleEvent"/>

  <!-- BAD -->
  <MyComponent v-on:customEvent="handleEvent"/>
</template>

"never"

It errors on hyphens.

{'vue/v-on-event-hyphenation': ['error', 'never', { autofix: true }]}

<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

{'vue/v-on-event-hyphenation': ['error', 'never', { ignore: ['custom-event'], autofix: true }]}

<template>
  <!-- GOOD -->
  <MyComponent v-on:custom-event="handleEvent"/>
  <MyComponent v-on:myEvent="handleEvent"/>

  <!-- BAD -->
  <MyComponent v-on:my-event="handleEvent"/>
</template>

Further Reading

• https://v3.vuejs.org/guide/component-custom-events.html