shortBind 
Stability:
stable:value -> :value="value"
Same-name shorthand for binding prop. If the attribute has the same name with the JavaScript value being bound, the syntax can be further shortened to omit the attribute value.
For Vue >= 3.4, this feature will be turned off by default.
| Features | Supported |
|---|---|
| Vue 3 | ✅ |
| Nuxt 3 | ✅ |
| Vue 2 | ❌ |
| Volar Plugin | ✅ |
Usage
Basic Usage
vue
<script setup>
const value = 'foo'
</script>
<template>
<input :value />
<!-- => <input :foo="value" /> -->
</template>With shortVmodel
vue
<template>
<Comp ::value />
<!-- => <Comp ::foo="foo" /> => <Comp v-model:foo="foo" /> -->
<Comp $foo />
<!-- => <Comp $foo="foo" /> => <Comp v-model:foo="foo" /> -->
<Comp *foo />
<!-- => <Comp *foo="foo" /> => <Comp v-model:foo="foo" /> -->
</template>Volar Configuration
jsonc
{
"vueCompilerOptions": {
"plugins": ["unplugin-vue-macros/volar"],
},
}
Kevin Deng
zhiyuanzmj
Leo