Directives

Vue JSX Vapor provides full support for Vue's built-in directives within JSX syntax.

Directive	Vue	Volar
v-if, v-else-if, v-else	✅	✅
v-slot, v-slots	✅	✅
v-for	✅	✅
v-model	✅	✅
v-html, v-text	✅	/
v-once	✅	/

Dynamic Arguments

Variables can be used as directive arguments. Since JSX does not support the [] syntax used in Vue templates, use $ as a substitute.

Modifiers

Modifiers are special postfixes denoted by _ that indicate a directive should be bound in a particular way. Since JSX does not support the . character in attribute names, use _ as a substitute.

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

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

Conditional rendering directives work seamlessly with proper type narrowing support.

export default ({  = 0 }) => {
  return (
    <>
      < v-if={ === 0}>{}</>

      < v-else-if={ === 1}>{}</>

      < v-else>{}</>
    </>
  )
}

v-for

List rendering directive for iterating over arrays or ranges.

export default () => (
  < v-for={(, ) in 4} ={}>
    {}
  </>
)

v-slot, v-slots

WARNING

Default parameter values in slot scope destructuring (e.g., v-slot={({ foo = '' })}) are not supported due to AST generation limitations.

v-slot

const  = () => {
  <{
    : () => any
    : (: { : number }) => any
    : (: { : boolean }) => any
  }>()
   < />
}

export default () => (
  <>
    default slot
    <template v-slot:s={{  }}>
      {}
    </template>
  </>
)

v-slots

const  = () => {
  <{
    : () => any
    : (: { : number }) => any
    : (: { : boolean }) => any
  }>()
   < />
}

export default () => (
  <
    ={{
      : () => <>default slot</>,
      : ({  }) => <>{}</>,
    }}
  />
)

v-model

Two-way binding directive with support for dynamic model names and modifiers.

import {  } from 'vue'

const  = () => {
  const  = <string>('model')
  const  = <string[]>('models')
   < />
}

export default () => {
  const  = ('')
  const  = ('model')
  return (
    <
      v-model:$_$={.}
      v-model:m={.}
    />
  )
}