vue-jsx-vapor

Vapor Mode of Vue JSX.

Features

• ⚡️ High Performance: It has the same performance as Vue Vapor!
• ⚒️ Directives: Support all build-in directives of Vue.
• ✨ Macros: Support most macros of Vue, Friendly to JSX.
• 🌈 Hot Module Replacement: Support functional components or defined by defineComponent.
• 🦾 Type Safe: Provide Volar plugin support by install TS Macro (VSCode plugin).
• ⚙️ ESLint: Provide an ESLint plugin for vue-jsx-vapor to automatically format code.

Installation

npm i vue-jsx-vapor

Usage

• 📜 Documentation
• 🛰️ Playground

Vite

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

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

Example: playground/

Rollup

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

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

Webpack

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

Nuxt

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

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

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

esbuild

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

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