\n\n## Usage\n\nInstall:\n\n```bash\nnpm add @rsbuild/plugin-vue-jsx @rsbuild/plugin-babel -D\n```\n\nAdd plugin to your `rsbuild.config.ts`:\n\n```ts\n// rsbuild.config.ts\nimport { pluginBabel } from '@rsbuild/plugin-babel';\nimport { pluginVue } from '@rsbuild/plugin-vue';\nimport { pluginVueJsx } from '@rsbuild/plugin-vue-jsx';\n\nexport default {\n plugins: [\n pluginBabel({\n include: /\\.(?:jsx|tsx)$/,\n }),\n pluginVue(),\n pluginVueJsx(),\n ],\n};\n```\n\nAfter registering the plugin, you can use Vue's [JSX / TSX syntax](https://github.com/vuejs/babel-plugin-jsx) in `.jsx`, `.tsx`, and `.vue` files.\n\nSince the Vue JSX plugin relies on Babel for compilation, you need to additionally add the [@rsbuild/plugin-babel](https://rsbuild.rs/plugins/list/plugin-babel).\n\nBabel 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.\n\n## Vue SFC\n\nWhen using JSX in Vue SFC, you need to add `lang=\"jsx\"` or `lang=\"tsx\"` to the `\n```\n\n- TSX:\n\n```html title=\"App.vue\"\n\n```\n\n## JSX Type Inference\n\nWhen using Vue >= 3.3, please set `\"jsxImportSource\": \"vue\"` in `tsconfig.json` to enable JSX type inference.\n\n```json title=\"tsconfig.json\"\n{\n \"compilerOptions\": {\n \"jsxImportSource\": \"vue\"\n }\n}\n```\n\nFor more details, see [Vue - JSX Type Inference](https://vuejs.org/guide/extras/render-function.html#jsx-type-inference).\n\n## Options\n\nIf you need to customize the compilation behavior of Vue, you can use the following configs.\n\n### vueJsxOptions\n\nOptions passed to `@vue/babel-plugin-jsx`, please refer to the [@vue/babel-plugin-jsx documentation](https://github.com/vuejs/babel-plugin-jsx) for detailed usage.\n\n- **Type:**\n\n```ts\ntype VueJSXPluginOptions = {\n /** transform `on: { click: someCallback }` to `onClick: someCallback` */\n transformOn?: boolean;\n /** enable optimization or not. */\n optimize?: boolean;\n /** merge static and dynamic class / style attributes / onSomething handlers */\n mergeProps?: boolean;\n /** configuring custom elements */\n isCustomElement?: (tag: string) => boolean;\n /** enable object slots syntax */\n enableObjectSlots?: boolean;\n /** Replace the function used when compiling JSX expressions */\n pragma?: string;\n};\n```\n\n- **Default:** `{}`\n\n- **Example:**\n\n```ts\npluginVueJsx({\n vueJsxOptions: {\n transformOn: true,\n },\n});\n```\n\n## License\n\n[MIT](./LICENSE).","users":{}}
![\"npm](\"https://img.shields.io/npm/v/@rsbuild/plugin-vue-jsx?style=flat-square&colorA=564341&colorB=EDED91\")
\n \n ![\"license\"](\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91\"){kind=icon}
\n ![\"downloads\"](\"https://img.shields.io/npm/dm/@rsbuild/plugin-vue-jsx.svg?style=flat-square&colorA=564341&colorB=EDED91\")
\n