v-bind-style.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/v-bind-style	enforce `v-bind` directive style

vue/v-bind-style

enforce v-bind directive 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 --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule enforces v-bind directive style which you should use shorthand or long form.

<template>
  <!-- ✓ GOOD -->
  <div :foo="bar"/>

  <!-- ✗ BAD -->
  <div v-bind:foo="bar"/>
</template>

🔧 Options

Default is set to shorthand.

{
  "vue/v-bind-style": ["error", "shorthand" | "longform"]
}

• "shorthand" (default) ... requires using shorthand.
• "longform" ... requires using long form.

"longform"

<template>
  <!-- ✓ GOOD -->
  <div v-bind:foo="bar"/>

  <!-- ✗ BAD -->
  <div :foo="bar"/>
</template>

📚 Further Reading

• Style guide - Directive shorthands

🔍 Implementation

• Rule source
• Test source