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
{ "vueCompilerOptions": { "plugins": ["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::
.