Getting Started

Vue JSX is a high-performance JSX compiler for Vue, written in Rust and powered by Oxc. It generates Vue Virtual DOM code by default and can optionally generate code for Vapor Mode.

This guide assumes familiarity with Vue and Vite.

Requirements

• Virtual DOM mode supports Vue 3.
• Vapor mode requires Vue 3.6 or later.

Installation

pnpm add vue-jsx

Vite Configuration

import { defineConfig } from 'vite'
import vueJsx from 'vue-jsx/vite'

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

This configuration compiles regular .jsx and .tsx files to Vue Virtual DOM. See Vapor Mode when you want Vapor output.

TypeScript Configuration

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "vue-jsx"
  }
}

jsxImportSource selects the JSX types and automatic JSX runtime declarations.

There is no global JSX namespace by default. For using the types in type positions, restoring a global JSX namespace, or extending the types with module augmentation, see TypeScript Configuration.

See Macros and Directives for optional syntax transforms and their type support.