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

interface Options {
  /**
   * @default '$'
   */
  prefix?: '::' | '$' | '*'
}

Usage

$ Dollar Sign (Default)

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

:: Double Binding

<template>
  <!-- prettier-ignore -->
  <input ::="msg" />
  <!-- => <input v-model="msg" /> -->
  <demo ::msg="msg" />
  <!-- => <input v-model:msg="msg" /> -->
</template>

* Asterisk Sign

<template>
  <input *="msg" />
  <!-- => <input v-model="msg" /> -->
  <demo *msg="msg" />
  <!-- => <input v-model:msg="msg" /> -->
</template>

Volar Configuration

// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/short-vmodel",
      // ...
    ],
    "vueMacros": {
      "shortVmodel": {
        "prefix": "$",
      },
    },
  },
}

Known Issues

• Prettier will format ::= to := (e.g. <div ::="msg" /> -> <div :="msg" />). The comment <!-- prettier-ignore --> is required if prefix is ::.