Directives

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

Type Support

Directive transforms work at compile time without additional editor tooling. To get directive type support in the editor or during command-line type checking, see Volar Plugin.

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

A default value in slot scope destructuring is only applied when the property is renamed, e.g. v-slot={({ foo: bar = '' })}. The shorthand form v-slot={({ foo = '' })} is not supported, since the scope expression is parsed as an object literal, where { foo = '' } is not valid syntax.

v-slot

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

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

v-slots

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

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')
  return < />
}

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

v-slot

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

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