快速上手

Vue JSX 是一个高性能的 Vue JSX 编译器，使用 Rust 编写并基于 Oxc 构建。它默认生成 Vue Virtual DOM 代码，也可以按需生成 Vapor Mode 代码。

本指南假设你已经熟悉 Vue。

环境要求

• Virtual DOM 模式支持 Vue 3。
• Vapor 模式需要 Vue 3.6 或更高版本。

安装

# 插件
pnpm add vue-jsx

# 运行时
pnpm add [email protected]

Vite 配置

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

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

默认情况下，普通 .jsx 和 .tsx 文件会被编译为 Vue Virtual DOM。需要生成 Vapor 代码时，请阅读 Vapor 模式。

TypeScript 配置

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

jsxImportSource 用来选择 JSX 类型和自动 JSX runtime 声明。

默认没有全局 JSX namespace。在类型位置使用类型、恢复全局 JSX namespace，以及通过模块增强扩展类型，请参阅 配置。

可选语法转换及其类型支持请阅读宏和指令章节。