vue-jsx-vapor

library3.2.14jsnpmunverified

A high-performance JSX compiler for Vue 3 that implements Vapor Mode, providing a Rust-based (Oxc) transformer that is 35-50× faster than Babel alternatives like @vue/babel-plugin-jsx. Current stable version is 3.2.14. Fully supports Vue built-in directives (v-if, v-for, v-model, etc.) and Vue macros (defineProps, defineEmits) in JSX syntax. Integrates with Vite, Rollup, Webpack, Nuxt, esbuild, and Vue CLI. Includes a Volar plugin for TypeScript support via TS Macro (VSCode) and an ESLint plugin. Peer dependency on Vue 3+. Actively maintained under the vuejs GitHub organization.

devops

npm install vue-jsx-vapor

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-JSX-VAPOR

vue-jsx-vapor

devopsjavascriptv3.2.14

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueJsxVapor (Vite plugin)

✓ import VueJsxVapor from 'vue-jsx-vapor/vite'

✗ import VueJsxVapor from 'vue-jsx-vapor'

The default export from 'vue-jsx-vapor' is not the Vite plugin; you must import from 'vue-jsx-vapor/vite' for Vite usage.

VueJsxVapor (Rollup plugin)

✓ import VueJsxVapor from 'vue-jsx-vapor/rollup'

✗ const VueJsxVapor = require('vue-jsx-vapor')

CommonJS require will not resolve subpath exports correctly in some bundlers. Use ESM import for Rollup.

VueJsxVapor (Webpack plugin)

✓ const VueJsxVapor = require('vue-jsx-vapor/webpack')

✗ import VueJsxVapor from 'vue-jsx-vapor/webpack'

Webpack configs are typically CommonJS. The webpack export is available via subpath './webpack'.

VueJsxVapor (Nuxt module)

✓ modules: ['vue-jsx-vapor/nuxt']

✗ import VueJsxVapor from 'vue-jsx-vapor/nuxt'

Nuxt modules are specified as strings in the modules array, not imported directly.

VueJsxVapor (esbuild plugin)

✓ import VueJsxVapor from 'vue-jsx-vapor/esbuild'

✗ const VueJsxVapor = require('vue-jsx-vapor/esbuild')

esbuild plugins are typically ESM; if using CJS, use dynamic import or require with .default.

Basic Vite setup with vue-jsx-vapor plugin and a simple counter component using JSX render function.

// vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import VueJsxVapor from 'vue-jsx-vapor/vite' export default defineConfig({ plugins: [ vue(), VueJsxVapor() ] }) // App.vue (or .jsx/.tsx) import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { const count = ref(0) const increment = () => count.value++ return () => ( <div> <p>Count: {count.value}</p> <button onClick={increment}>+</button> </div> ) } })

Debug

Known issues

breakingVersion 3.x changes the import paths from package root to subpath exports (e.g., 'vue-jsx-vapor/vite' instead of 'vue-jsx-vapor').

fix

Update all imports to use full subpath: 'vue-jsx-vapor/vite', 'vue-jsx-vapor/rollup', etc.

affects: >=3.0.0

deprecatedThe Babel-based JSX transform (@vue/babel-plugin-jsx) is not compatible with this plugin; this is a standalone Rust-based compiler.

fix

Remove @vue/babel-plugin-jsx from babel config. This plugin replaces it entirely.

affects: *

gotchaVue Vapor Mode (reactivity transform) is experimental and may have edge cases with complex v-model bindings.

fix

Test your v-model usage thoroughly, especially custom components with modelValue and @update:modelValue.

affects: >=3.0.0

gotchaTypeScript support requires VS Code extension 'TS Macro' for Volar integration, not the default Volar plugin.

fix

Install 'TS Macro' VS Code extension to enable type checking of macros like defineProps in JSX.

affects: *

gotchaNuxt module only works with Nuxt 3 or Nuxt Vite (Nuxt 2 with bridge). Not compatible with Nuxt 2 without Vite.

fix

Ensure Nuxt project uses Vite (Nuxt 3 or Nuxt 2 with @nuxtjs/vite module).

affects: *

Errors

Common errors & fixes

The plugin 'vue-jsx-vapor' is not compatible with Vite 2.

vue-jsx-vapor requires Vite >=3 as per peer dependencies.

fix

Upgrade Vite to version 3 or later.

Cannot find module 'vue-jsx-vapor/vite' or its corresponding type declarations.

Import path is incorrect; must use subpath import.

fix

Change import to 'vue-jsx-vapor/vite'.

Uncaught SyntaxError: Unexpected token '<' (in browser console when using JSX without transformation).

JSX is not being transformed; plugin not properly configured.

fix

Check that the plugin is correctly added to vite.config.ts or other build tool configuration.

Upgrade

Version history

3.2.14latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/vuejs/vue-jsx-vapor ↗

packagevue-jsx-vapor ↗

homepagehttps://github.com/vuejs/vue-jsx-vapor#readme ↗