Skip to content

vue/v-on-event-hyphenation โ€‹

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

  • โš™๏ธ This rule is included in all of "plugin:vue/vue3-strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/vue3-recommended" and *.configs["flat/recommended"].
  • ๐Ÿ”ง The --fix option on the command line 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.

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.

Now loading...

"never" โ€‹

It errors on hyphens.

Now loading...

"never", { "ignore": ["custom-event"] } โ€‹

Don't use hyphenated name but allow custom event names

Now loading...

๐Ÿ“š Further Reading โ€‹

๐Ÿš€ Version โ€‹

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

๐Ÿ” Implementation โ€‹