Skip to content

jsxDirective

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

Vue built-in directives for JSX.

DirectiveVue 3Vue 2Volar
v-if
v-else-if
v-else
v-for
v-on
v-slot
v-html/
v-once/
v-memo/

Usage

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

vue
<script setup lang="tsx">
const { 
foo
} =
defineProps
<{
foo
: number
}>() export default () => ( <> <
div
v-if={
foo
=== 0}>{
foo
}</
div
>
<
div
v-else-if={
foo
=== 1}>{
foo
}</
div
>
<
div
v-else>{
foo
}</
div
>
</> ) </script>

v-for

vue
<script setup lang="tsx">
export default () => (
  <
div
v-for={(
item
,
index
) in 4}
key
={
index
}>
{
item
}
</
div
>
) </script>

v-slot

vue
<script lang="tsx" setup>
import { 
Comp
} from './Comp.tsx'
export default () => ( <
Comp
>
default slot... <template v-slot:s
lot
={{
bar
}}>
{
bar
}
</template> </
Comp
>
) </script>
tsx
import type { FunctionalComponent } from 'vue'

export const Comp: FunctionalComponent<
  {},
  {},
  {
    default: () => any
    slot: (scope: { bar: number }) => any
    slots: (scope: { baz: boolean }) => any
  }
> = () => <div />

v-on

WARNING

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

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

Dynamic Arguments

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

v-model

vue
<script setup lang="tsx">
import { 
Comp
} from './Comp.tsx'
const
name
=
ref
('model')
const
model
=
defineModel
<string>()
export default () => ( <
Comp
v-model:$
name
$={
model
.
value
}
v-model:m
odel
={
model
.
value
}
/> ) </script>
tsx
import { type FunctionalComponent, ref } from 'vue'

export const Comp: FunctionalComponent<
  {
    model: string
    models: string[]
  },
  {
    'update:model': [value: string]
    'update:models': [value: string[]]
  }
> = () => <div />

v-slot

vue
<script setup lang="tsx">
import { 
Comp
} from './Comp.tsx'
const
slots
=
defineSlots
<{
default
: (
scope
: {
foo
: string }) => any
title
: (
scope
: {
bar
: number }) => any
}>() export default () => ( <
Comp
>
<template v-for={(
Slot
,
name
) in
slots
} v-slot:$
name
$={
scope
}>
<
Slot
{...
scope
} />
</template> </
Comp
>
) </script>
tsx
import type { FunctionalComponent } from 'vue'

export const Comp: FunctionalComponent<
  {},
  {},
  {
    default: (scope: { foo: string }) => any
    title: (scope: { bar: number }) => any
  }
> = () => <div />

Modifiers

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

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

Volar Configuration

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

Contributors

The avatar of contributor named as Kevin Deng Kevin Deng

Changelog