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	✅	/

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</>,
      : ({  }) => <>{}</>,
    }}
  />
)

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>

Dynamic Arguments

Variables can be used as directive argument by passing it as the second element of the array value. The third element of the array is used for directive modifiers.

v-model

import {  } from 'vue'

const  = () => {
  const  = <string, 'm1' | 'm2'>('model')
  const  = <string>('models')
   < />
}

export default () => {
  const  = ('')
  const  = ('model')
  return (
    <
      v-model={[., ., ['m1', 'm2']]}
      v-model:m={.}
    />
  )
}

v-slot

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

export default (, {  }: { : { : () => any } }) => (
  <>
    <template v-for={(, ) in } v-slot={[, ]}>
      < {...} />
    </template>
  </>
)