Introducing Vue JSX Vapor: New Syntax and Enhanced Developer Experience

Why existing Vue JSX is limited

Most Vue projects still use template because JSX cannot use Vue's built‑in directives, sacrifices template conveniences, and often requires deeply nested h() calls that become hard to read and maintain.

h('div', {}, [
  h('span', {}, 'text'),
  h('button', { onClick: handleClick }, 'click')
])

The nesting quickly leads to infinite levels, poor readability, and reluctance to modify the code.

What Vue JSX Vapor is

Vue JSX Vapor is a JSX compilation mode that runs on Vue's Vapor rendering system. It produces the same compiler output as Vue's template compiler, follows the same compilation chain, and supports both Virtual DOM and Vapor DOM targets.

Key technical features

Identical compiler output to the official Vue template compiler, enabling the same optimization strategy and reuse of ecosystem tools.

Two compilation targets :

Virtual DOM – the traditional Vue rendering path.

Vapor DOM – a no‑virtual‑DOM mode.

Compile‑time decision between the two targets, with no runtime compromise.

Full directive support in JSX: v-if, v-else, v-for, v-model, v-slot, v-once, v-text, v-html.

Type safety via TS Macro + Volar, plus an official ESLint plugin for code style and maintainability.

Engineered for large codebases , monorepos, and CI builds.

Performance

The compiler is written in Rust and built on the Oxc parser. Official benchmarks state that Vue JSX Vapor is up to 20× faster than the Babel JSX plugin, providing tangible speed gains for large projects, monorepos, and CI pipelines.

Quick start with Vite

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

export default {
  plugins: [vueJsxVapor()]
}

After adding the plugin, TSX/JSX files are compiled in Vapor mode automatically.

Typical JSX scenario

When a small widget needs dynamic rendering without creating a separate component, JSX eliminates the need for a new component and the template + h boilerplate.

function renderBadge(type: 'success' | 'warning') {
  if (type === 'success') {
    return <span class="badge success">成功</span>
  }
  return <span class="badge warning">警告</span>
}

export default () => (
  <div>{renderBadge('success')}</div>
)

Benefits of the JSX + Vapor approach

No need to create a new component for tiny UI fragments.

Avoids the template + h pattern entirely.

Logic and structure are naturally bound together.

Code readability is dramatically improved.

Tooling support

TS Macro + Volar provides complete type inference for TSX/JSX.

Official ESLint plugin enforces consistent style and helps maintainability.

Overall impact

Vue JSX Vapor unifies template and JSX under a single high‑performance compilation pipeline, preserving Vue's directive capabilities while offering the flexibility of JSX. It delivers the same output as the template compiler, supports both Virtual DOM and Vapor DOM, and achieves up to 20× faster compilation compared to Babel‑based JSX solutions.