Interop

vue-jsx-vapor provides seamless interoperability between Virtual DOM and Vapor DOM rendering modes. When the interop option is set to true, JSX code within defineVaporComponent compiles to Vapor DOM, while JSX outside of defineVaporComponent compiles to Virtual DOM.

Embedding Vapor Components in Virtual DOM

Playground

vite.config.ts

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

export default defineConfig({
  plugins: [
    vueJsxVapor({
      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),
  })
   <> x 2 = </>
})

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

Embedding Virtual DOM Components 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),
  })
   <> x 2 = </>
})

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