---
title: "@farmfe/plugin-vue-jsx"
locale: "zh"
version: "current"
canonicalUrl: "https://farmfe.org/zh/docs/plugins/official-plugins/vue-jsx"
publicationStatus: "prerelease"
---

<a id="farmfeplugin-vue-jsx"></a>
# @farmfe/plugin-vue-jsx


Transform Vue JSX/TSX at build time — converts directives (` v-model `, ` v-show `, etc.) into Vue 3 runtime calls. Written in Rust with zero JS overhead.


This plugin is the Farm-native equivalent of ` @vitejs/plugin-vue-jsx `, ported from ` swc-plugin-vue-jsx `.


<a id="installation"></a>
## Installation


**npm**

```javascript
npm install @farmfe/plugin-vue-jsx
```


**yarn**

```javascript
yarn add @farmfe/plugin-vue-jsx
```


**pnpm**

```javascript
pnpm add @farmfe/plugin-vue-jsx
```



<a id="usage"></a>
## Usage


```ts
import { defineConfig } from "@farmfe/core";
import vueJsx from "@farmfe/plugin-vue-jsx";

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


With options:


```ts
export default defineConfig({
  plugins: [
    vueJsx({
      optimize: true,
      transformOn: true,
      resolveType: true,
    }),
  ],
});
```


<a id="options"></a>
## Options


| Option | Type | Default | Description |
| --- | --- | --- | --- |
| ` transformOn ` | ` boolean ` | ` false ` | Convert ` on ` / ` nativeOn ` attrs via ` @vue/babel-helper-vue-transform-on ` |
| ` optimize ` | ` boolean ` | ` false ` | Inject Vue PatchFlags for optimized VNode updates |
| ` customElementPatterns ` | ` string[] ` | ` [] ` | Regex patterns for custom element tags |
| ` mergeProps ` | ` boolean ` | ` true ` | Merge attribute objects with Vue's ` mergeProps ` |
| ` enableObjectSlots ` | ` boolean ` | ` true ` | Enable object slot detection |
| ` pragma ` | ` string ` | ` undefined ` | Custom pragma (e.g. ` h `), overrides ` createVNode ` |
| ` resolveType ` | ` boolean ` | ` false ` | Resolve TypeScript types for ` defineComponent ` props/emits |


<a id="transformon"></a>
## transformOn


When enabled, ` on ` and ` nativeOn ` attributes are converted using ` @vue/babel-helper-vue-transform-on `. You must install this package in your project:


```bash
pnpm add @vue/babel-helper-vue-transform-on
```