unplugin-vue-jsx-vapor

Convert Vue JSX to Vapor.

Playground

Install

npm i unplugin-vue-jsx-vapor

[!CAUTION] ❌ The destructuring of props in a functional component will cause loss of reactivity.

function Comp({ foo }) {
  return <div>{foo}</div>
}

const foo = ref('foo')
export default <Comp foo={foo.value} />

Two Solutions

1. ✅ Pass a ref variable as prop:

function Comp({ foo }) {
  return <div>{foo.value}</div>
}

const foo = ref('foo')
export default <Comp foo={foo} />

2. ✅ Use the defineComponent macro from @vue-macros/jsx-macros to wrapping.

defineComponent(({ foo }) => {
  return <div>{ foo }<div>
})

function Comp({ foo }) {
  return <div>{foo}</div>
}
// Will be convert to:
function Comp(_ctx0) {
  return <div>{_ctx0.foo}</div>
}

const foo = ref('foo')
export default <Comp foo={foo.value} />

// vite.config.ts
import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'

export default defineConfig({
  plugins: [VueJsxVapor()],
})

Example: playground/

// rollup.config.js
import VueJsxVapor from 'unplugin-vue-jsx-vapor/rollup'

export default {
  plugins: [VueJsxVapor()],
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require('unplugin-vue-jsx-vapor/webpack')()],
}

// nuxt.config.js
export default defineNuxtConfig({
  modules: ['unplugin-vue-jsx-vapor/nuxt'],
})

This module works for both Nuxt 2 and Nuxt Vite

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [require('unplugin-vue-jsx-vapor/webpack')()],
  },
}

// esbuild.config.js
import { build } from 'esbuild'
import VueJsxVapor from 'unplugin-vue-jsx-vapor/esbuild'

build({
  plugins: [VueJsxVapor()],
})