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.

const Comp = defineComponent(({ foo }) => {
  return <>{foo}</>
})
// Will be convert to:
const Comp = defineComponent((_props) => {
  return <>{_props.foo}</>
}, { props: ['foo'] })

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

Vite

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

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

Example: playground/

Rollup

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

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

Webpack

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

Nuxt

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

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

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

esbuild

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

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