Skip to content

shortVmodel NPM Version

Stability: stable

A shorthand for v-model.

v-model -> :: / $ / *

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

FeaturesSupported
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

tsconfig.json
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 ::.

Contributors

Changelog