Vue Macros

English

简体中文

English

简体中文

Appearance

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.

FeaturesSupported
Vue 3✅
Nuxt 3✅
Vue 2❌
Volar Plugin✅

Usage ​

Basic Usage ​

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

With shortVmodel ​

vue
<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>
<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 ​

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

ESLint Configuration ​

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