Interop

vue-jsx-vapor supports Virtual DOM and Vapor DOM co-usage. After setting interop to true, JSX within defineVaporComponent will be compiled to Vapor DOM, while JSX outside defineVaporComponent will be compiled to Virtual DOM .

Vapor in Virtual DOM

Playground

vite.config.ts

import { defineConfig } from 'vite'
import vueJsxVapor from 'vue-jsx-vapor/vite'

export default defineConfig({
  plugins: [
    vueJsxVapor({
      macros: true,
      interop: true,
    }),
  ],
})

main.ts

import { createApp, vaporInteropPlugin } from 'vue'
import App from './App.tsx'
createApp(App).use(vaporInteropPlugin).mount('#app')

App.tsx

import {
  ,
  ,
  ,
  ,
} from 'vue'
import {  } from 'vue-jsx-vapor'

const  = (({  = 0 }) => {
  ({
    : (() =>  * 2),
  })
  return <> x 2 = </>
})

export default (() => {
  const  = (1)
  const  = ()
  return () => (
    <>
      < ={.} />
      < ={.} ={}></>
      {.?.}
    </>
  )
})

Virtual DOM in Vapor

Playground

vite.config.ts

import { defineConfig } from 'vite'
import vueJsxVapor from 'vue-jsx-vapor/vite'

export default defineConfig({
  plugins: [
    vueJsxVapor({
      macros: true,
      interop: true,
    }),
  ],
})

main.ts

import { createVaporApp, vaporInteropPlugin } from 'vue'
import App from './App.tsx'
createVaporApp(App).use(vaporInteropPlugin).mount('#app')

App.tsx

import {
  ,
  ,
  ,
  ,
} from 'vue'
import {  } from 'vue-jsx-vapor'

const  = (({  = 0 }) => {
  ({
    : (() =>  * 2),
  })
  return <> x 2 = </>
})

export default (() => {
  const  = (1)
  const  = ()
  return () => (
    <>
      < ={.}/>
      < ={.} ={}></>
      {.?.}
    </>
  )
})