unplugin-vue-jsx-vapor

Convert JSX to Template for compiler-vapor.

Install

npm i unplugin-vue-jsx-vapor

Vite

// vite.config.ts
import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'
import { compile } from 'vue/vapor'
// or
// import { compile } from '@vue/compiler-dom'

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

Example: playground/

Rollup

// rollup.config.js
import VueJsxVapor from 'unplugin-vue-jsx-vapor/rollup'
import { compile } from 'vue/vapor'
// or
// import { compile } from '@vue/compiler-dom'

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

Webpack

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

Nuxt

// nuxt.config.js
import { compile } from 'vue/vapor'
// or
// import { compile } from '@vue/compiler-dom'
export default defineNuxtConfig({
  modules: [
    [
      'unplugin-vue-jsx-vapor/nuxt',
      {
        compile
      },
    ],
  ],
})

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')({
        compile: require('vue/vapor')
        // or
        // compile: require('@vue/compiler-dom')
      }),
    ],
  },
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import VueJsxVapor from 'unplugin-vue-jsx-vapor/esbuild'
import { compile } from 'vue/vapor'
// or
// import { compile } from '@vue/compiler-dom'

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