# @vitejs/plugin-vue-jsx

> Provides Vue 3 JSX & TSX support with HMR.

Latest version **5.1.6** (published 2026-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vitejs/plugin-vue-jsx
pnpm add @vitejs/plugin-vue-jsx
yarn add @vitejs/plugin-vue-jsx
bun add @vitejs/plugin-vue-jsx
```

## Health

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

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 5.1.6 |
| Published | 2026-06-23 |
| First published | 2021-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | ^20.19.0 \|\| >=22.12.0 |
| Dependencies | 5 |
| Unpacked size | 14.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 681 |
| Author | Evan You |
| Maintainers | yyx990803, vitebot, sxzz |
| Keywords | vite, vite-plugin, vue |

## Links

- npm: https://www.npmjs.com/package/@vitejs/plugin-vue-jsx
- Repository: https://github.com/vitejs/vite-plugin-vue
- Homepage: https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx#readme
- Issues: https://github.com/vitejs/vite-plugin-vue/issues
- npm.io page: https://npm.io/package/@vitejs/plugin-vue-jsx

## Dependencies (5)

- [@babel/core](https://npm.io/package/@babel/core.md) ^7.29.0
- [@rolldown/pluginutils](https://npm.io/package/@rolldown/pluginutils.md) ^1.0.1
- [@vue/babel-plugin-jsx](https://npm.io/package/@vue/babel-plugin-jsx.md) ^2.0.1
- [@babel/plugin-syntax-typescript](https://npm.io/package/@babel/plugin-syntax-typescript.md) ^7.29.7
- [@babel/plugin-transform-typescript](https://npm.io/package/@babel/plugin-transform-typescript.md) ^7.29.7

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 5.1.6 (latest) — 2026-06-23
- 5.0.0-beta.0 (beta) — 2025-06-06
- 3.0.0-alpha.0 (alpha) — 2022-11-30
- 5.1.5 — 2026-03-12
- 5.1.4 — 2026-02-02
- 5.1.3 — 2025-12-24
- 5.1.2 — 2025-11-19
- 5.1.1 — 2025-08-28
- 5.1.0 — 2025-08-25
- 5.0.1 — 2025-06-30
- 5.0.0 — 2025-06-24
- 4.2.0 — 2025-05-20
- 4.1.2 — 2025-03-17
- 4.1.1 — 2024-11-26
- 4.1.0 — 2024-11-11
- … 40 more at https://npm.io/package/@vitejs/plugin-vue-jsx/versions

## README

# @vitejs/plugin-vue-jsx [![npm](https://img.shields.io/npm/v/@vitejs/plugin-vue-jsx.svg)](https://npmjs.com/package/@vitejs/plugin-vue-jsx)

Provides Vue 3 JSX & TSX support with HMR.

```js
// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    }),
  ],
}
```

## Options

### include

Type: `(string | RegExp)[] | string | RegExp | null`

Default: `/\.[jt]sx$/`

A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files the plugin should operate on.

### exclude

Type: `(string | RegExp)[] | string | RegExp | null`

Default: `undefined`

A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files to be ignored by the plugin.

> See [@vue/babel-plugin-jsx](https://github.com/vuejs/jsx-next) for other options.

### defineComponentName

Type: `string[]`

Default: `['defineComponent']`

The name of the function to be used for defining components. This is useful when you have a custom `defineComponent` function.

### tsTransform

Type: `'babel' | 'built-in'`

Default: `'babel'`

Defines how `typescript` transformation is handled for `.tsx` files.

`'babel'` - `typescript` transformation is handled by `@babel/plugin-transform-typescript` during `babel` invocation for JSX transformation.

`'built-in'` - `babel` is invoked only for JSX transformation and then `typescript` transformation is handled by the same toolchain used for `.ts` files (currently `esbuild`).

### babelPlugins

Type: `any[]`

Default: `undefined`

Provide additional plugins for `babel` invocation for JSX transformation.

### tsPluginOptions

Type: `any`

Default: `undefined`

Defines options for `@babel/plugin-transform-typescript` plugin.

## HMR Detection

This plugin supports HMR of Vue JSX components. The detection requirements are:

- The component must be exported.
- The component must be declared by calling `defineComponent` or the name specified in `defineComponentName` via a root-level statement, either variable declaration or export declaration.

### Supported patterns

```jsx
import { defineComponent } from 'vue'

// named exports w/ variable declaration: ok
export const Foo = defineComponent({})

// named exports referencing variable declaration: ok
const Bar = defineComponent({ render() { return <div>Test</div> }})
export { Bar }

// default export call: ok
export default defineComponent({ render() { return <div>Test</div> }})

// default export referencing variable declaration: ok
const Baz = defineComponent({ render() { return <div>Test</div> }})
export default Baz
```

### Non-supported patterns

```jsx
// not using `defineComponent` call
export const Bar = { ... }

// not exported
const Foo = defineComponent(...)
```

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