jsxDirective

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

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

Usage

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

<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

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

v-slot

App.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>

Child.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.

<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.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>

Comp.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.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>

Comp.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.

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

Volar Configuration

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

Contributors

github-actions[bot]

Changelog

Last edited 3 days ago

View full history

e9cc423-chore: bump versions (#742)