shortVmodel
Stability:
stable
A shorthand for v-model
.
v-model
-> ::
/ $
/ *
If you have any questions about this feature, you can comment on RFC Discussion.
Features | Supported |
---|---|
Vue 3 | ✅ |
Nuxt 3 | ✅ |
Vue 2 | ❌ |
Volar Plugin | ✅ |
Options
ts
interface Options {
/**
* @default '$'
*/
prefix?: '::' | '$' | '*'
}
Usage
$
Dollar Sign (Default)
vue
<template>
<input $="msg" />
<!-- => <input v-model="msg" /> -->
<demo $msg="msg" />
<!-- => <input v-model:msg="msg" /> -->
</template>
::
Double Binding
vue
<template>
<!-- prettier-ignore -->
<input ::="msg" />
<!-- => <input v-model="msg" /> -->
<demo ::msg="msg" />
<!-- => <input v-model:msg="msg" /> -->
</template>
*
Asterisk Sign
vue
<template>
<input *="msg" />
<!-- => <input v-model="msg" /> -->
<demo *msg="msg" />
<!-- => <input v-model:msg="msg" /> -->
</template>
Volar Configuration
jsonc
// tsconfig.json
{
"vueCompilerOptions": {
"plugins": ["unplugin-vue-macros/volar"],
"vueMacros": {
"shortVmodel": {
"prefix": "$",
},
},
},
}
Known Issues
- Prettier will format
::=
to:=
(e.g.<div ::="msg" />
-><div :="msg" />
). The comment<!-- prettier-ignore -->
is required if prefix is::
.