Vue Macros

English

简体中文

English

简体中文

Appearance

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-slot✅✅✅
v-html✅✅/
v-once✅❌/
v-memo✅❌/

Usage ​

vue
<script setup lang="tsx">
import Child from './Child.vue'

const { foo, list } = defineProps<{
  foo: number
  list: number[]
}>()

defineRender(() => (
  <>
    <div v-if={foo === 0}>
      <div v-if={foo === 0}>0-0</div>
      <div v-else-if={foo === 1}>0-1</div>
      <div v-else>0-2</div>
    </div>

    <div v-for={(i, index) in list} v-memo={[foo === i]} key={index}>
      {i}
    </div>

    <Child v-slot={props}>{props}</Child>
  </>
))
</script>
<script setup lang="tsx">
import Child from './Child.vue'

const { foo, list } = defineProps<{
  foo: number
  list: number[]
}>()

defineRender(() => (
  <>
    <div v-if={foo === 0}>
      <div v-if={foo === 0}>0-0</div>
      <div v-else-if={foo === 1}>0-1</div>
      <div v-else>0-2</div>
    </div>

    <div v-for={(i, index) in list} v-memo={[foo === i]} key={index}>
      {i}
    </div>

    <Child v-slot={props}>{props}</Child>
  </>
))
</script>

Volar Configuration ​

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