jsxDirective

Stability: experimental ⚠️ Experimental feature, use at your risk

Vue built-in directives for JSX.

Directive	Vue 3	Vue 2	Volar
v-if	✅	✅	✅
v-else-if	✅	✅	✅
v-else	✅	✅	✅
v-for	✅	✅	✅
v-on	✅	✅	✅
v-slot	✅	✅	✅
v-html	✅	✅	/
v-once	✅	❌	/
v-memo	✅	❌	/

Usage

v-on

WARNING

v-on only supports binding to an object of event / listener pairs without an argument.

<form v-on={{ submit }} />

v-if, v-else-if, v-else

<div v-if={foo === 0}>
  <div v-if={foo === 0}>0-0</div>
  <div v-else-if={foo === 1}>0-1</div>
  <div v-else>0-2</div>
</div>

v-for, v-memo

<div v-for={(item, index) in list} key={index} v-memo={[foo === item]}>
  {item}
</div>

v-slot

<Child>
  default slot
  <template v-slot:bottom={{ bar }}>
    <span>{bar}</span>
  </template>
</Child>

Dynamic Arguments

It is also possible to use a JavaScript expression in a directive argument by wrapping it with a pair of $:

v-model

<Comp v-model:$name$={value} />

v-slot

<Comp>
  <template v-for={(Slot, slotName) in slots} v-slot:$slotName$={scope}>
    <Slot {...scope} />
  </template>
</Comp>

Modifiers

Modifiers are special postfixes denoted by a _, which indicate that a directive should be bound in some special way.

<form onSubmit_prevent>
  <input v-model_number={value} />
</form>

Volar Configuration

// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3,
    "plugins": [
      "@vue-macros/volar/jsx-directive",
      // ...more feature
    ],
  },
}