# vue/v-on-style
enforce
v-ondirective style
- ⚙️ This rule is included in all of
"plugin:vue/vue3-strongly-recommended","plugin:vue/strongly-recommended","plugin:vue/vue3-recommended"and"plugin:vue/recommended". - 🔧 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 v-on directive style which you should use shorthand or long form.
<template>
<!-- ✓ GOOD -->
<div @click="foo"/>
<!-- ✗ BAD -->
<div v-on:click="foo"/>
</template>
# 🔧 Options
Default is set to shorthand.
{
"vue/v-on-style": ["error", "shorthand" | "longform"]
}
"shorthand"(default) ... requires using shorthand."longform"... requires using long form.
# "longform"
<template>
<!-- ✓ GOOD -->
<div v-on:click="foo"/>
<!-- ✗ BAD -->
<div @click="foo"/>
</template>
# 📚 Further Reading
# 🚀 Version
This rule was introduced in eslint-plugin-vue v3.0.0