# @rsbuild/plugin-vue2-jsx

Latest version **1.0.6** (published 2026-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rsbuild/plugin-vue2-jsx
pnpm add @rsbuild/plugin-vue2-jsx
yarn add @rsbuild/plugin-vue2-jsx
bun add @rsbuild/plugin-vue2-jsx
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2026-05-28 |
| First published | 2023-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 7 |
| Maintainers | chenjiahan, hardfist |

## Links

- npm: https://www.npmjs.com/package/@rsbuild/plugin-vue2-jsx
- Repository: https://github.com/rstackjs/rsbuild-plugin-vue2-jsx
- npm.io page: https://npm.io/package/@rsbuild/plugin-vue2-jsx

## Dependencies (2)

- [@rsbuild/plugin-babel](https://npm.io/package/@rsbuild/plugin-babel.md) ^1.1.2
- [@vue/babel-preset-jsx](https://npm.io/package/@vue/babel-preset-jsx.md) ^1.4.0

## Recent versions

- 1.0.6 (latest) — 2026-05-28
- 0.0.0-next-20240729023126 (next) — 2024-07-29
- 1.0.0-alpha.3 (alpha) — 2024-07-04
- 0.7.0-beta.9 (beta) — 2024-05-24
- 0.0.0-nightly-20240114070311 (nightly) — 2024-01-14
- 1.0.5 — 2026-01-15
- 1.0.4 — 2025-08-04
- 1.0.3 — 2024-12-18
- 1.0.2 — 2024-09-03
- 1.0.1 — 2024-08-29
- 1.0.1-beta.14 — 2024-08-15
- 1.0.1-beta.13 — 2024-08-14
- 1.0.1-beta.12 — 2024-08-14
- 1.0.1-beta.11 — 2024-08-08
- 1.0.1-beta.10 — 2024-08-05
- … 192 more at https://npm.io/package/@rsbuild/plugin-vue2-jsx/versions

## README

# @rsbuild/plugin-vue2-jsx

Provides support for Vue 2 JSX / TSX syntax. The plugin internally integrates [@vue/babel-preset-jsx](https://github.com/vuejs/jsx-vue2).

<p>
  <a href="https://npmjs.com/package/@rsbuild/plugin-vue2-jsx">
   <img src="https://img.shields.io/npm/v/@rsbuild/plugin-vue2-jsx?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
  </a>
  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
</p>

## Usage

Install:

```bash
npm add @rsbuild/plugin-vue2-jsx -D
```

Add plugin to your `rsbuild.config.ts`:

```ts
// rsbuild.config.ts
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginVue2 } from '@rsbuild/plugin-vue2';
import { pluginVue2Jsx } from '@rsbuild/plugin-vue2-jsx';

export default {
  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
    }),
    pluginVue2(),
    pluginVue2Jsx(),
  ],
};
```

Since the Vue JSX plugin relies on Babel for compilation, you need to additionally add the [@rsbuild/plugin-babel](https://www.npmjs.com/package/@rsbuild/plugin-babel).

Babel compilation will introduce extra overhead, in the example above, we use `include` to match `.jsx` and `.tsx` files, thereby reducing the performance cost brought by Babel.

After registering the plugin, you can use Vue's [JSX / TSX syntax](https://github.com/vuejs/jsx-vue2) in `.jsx`, `.tsx`, and `.vue` files.

## Vue SFC

When using JSX in Vue SFC, you need to add `lang="jsx"` or `lang="tsx"` to the `<script>` tag.

- JSX:

```html title="App.vue"
<script lang="jsx">
  const vnode = <div>hello</div>;
</script>
```

- TSX:

```html title="App.vue"
<script lang="tsx">
  const vnode = <div>hello</div>;
</script>
```

## Options

If you need to customize the compilation behavior of Vue JSX, you can use the following configs.

### vueJsxOptions

Options passed to `@vue/babel-preset-jsx`, please refer to the [@vue/babel-preset-jsx documentation](https://github.com/vuejs/jsx-vue2) for detailed usage.

- **Type:**

```ts
type VueJSXPresetOptions = {
  compositionAPI?: boolean | string;
  functional?: boolean;
  injectH?: boolean;
  vModel?: boolean;
  vOn?: boolean;
};
```

- **Default:**

```ts
const defaultOptions = {
  injectH: true,
};
```

- **Example:**

```ts
pluginVue2Jsx({
  vueJsxOptions: {
    injectH: false,
  },
});
```

## License

[MIT](./LICENSE).

---
_Source: https://npm.io/package/@rsbuild/plugin-vue2-jsx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._