jsxDirective

Stability: stable

Vue built-in directives for JSX.

Directive	Vue 3	Vue 2	Volar
`v-if`	✅	✅	✅
`v-else-if`	✅	✅	✅
`v-else`	✅	✅	✅
`v-for`	✅	✅	✅
`v-on`	✅	✅	✅
`v-slot`	✅	✅	✅
`v-html`	✅	✅	/
`v-once`	✅	❌	/
`v-memo`	✅	❌	/

Options

interface Options {
  /**
   * @default 'v-'
   */
  prefix?: string
}

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`

App.vueChild.tsx

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

App.vueComp.tsx

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 { ref, type FunctionalComponent } from 'vue'

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

v-slot

App.vueComp.tsx

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

tsconfig.json

jsonc

{
  "vueCompilerOptions": {
    "plugins": ["unplugin-vue-macros/volar"],
  },
}

Contributors

zhiyuanzmj

Kevin Deng

Leo

Changelog

Last edited 30 days ago

View full history

jsxDirective ​

Options ​

Usage ​

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

v-for ​

v-slot ​

v-on ​

Dynamic Arguments ​

Modifiers ​

Volar Configuration ​