Directives

Vue built-in directives for JSX.

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

It is also possible to use a variable in a directive argument. Because JSX doesn't support [] keyword, use $ instead.

Modifiers

Modifiers are special postfixes denoted by a _, which indicate that a directive should be bound in some special way. Because JSX doesn't support . keyword, use _ instead.

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

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

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

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

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

v-for

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

v-slot, v-slots

WARNING

Due to the inability to generate a correct AST for directive expressions with default values (e.g., v-slot={({ foo = '' })}), so default values are not supported.

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

import {  } from 'vue'

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

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