shortBind

Stability: experimental ⚠️ Experimental feature, use at your risk

A shorthand for binding prop with the same data name.

:value -> :value="value"

If you have any questions about this feature, you can comment on RFC Discussion.

Features	Supported
Vue 3	✅
Nuxt 3	✅
Vue 2	❌
Volar Plugin	✅

Usage

Basic Usage

<template>
  <input :msg />
  <!-- => <input :msg="msg" /> -->
  <demo $msg />
  <!-- => <input $msg="msg" /> -->
</template>

With shortVmodel

<template>
  <input ::msg />
  <!-- => <input ::msg="msg" /> => <input v-model:msg="msg" /> -->
  <demo $msg />
  <!-- => <input $msg="msg" /> => <input v-model:msg="msg" /> -->
  <demo *msg />
  <!-- => <input *msg="msg" /> => <input v-model:msg="msg" /> -->
</template>

Volar Configuration

// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/short-bind"
      // ...
    ]
  }
}

ESLint Configuration

// .eslintrc
{
  "rules": {
    "vue/valid-v-bind": "off"
  }
}