@rsbuild/plugin-vue-jsx
v1.1.0
Published
Provides support for Vue 3 JSX / TSX syntax. This plugin internally integrates [@vue/babel-plugin-jsx](https://github.com/vuejs/babel-plugin-jsx).
Downloads
3,041
Readme
@rsbuild/plugin-vue-jsx
Provides support for Vue 3 JSX / TSX syntax. This plugin internally integrates @vue/babel-plugin-jsx.
For Vue 2 projects, use @rsbuild/plugin-vue2-jsx.
Usage
Install:
npm add @rsbuild/plugin-vue-jsx @rsbuild/plugin-babel -D
Add plugin to your rsbuild.config.ts
:
// rsbuild.config.ts
import { pluginBabel } from "@rsbuild/plugin-babel";
import { pluginVue } from "@rsbuild/plugin-vue";
import { pluginVueJsx } from "@rsbuild/plugin-vue-jsx";
export default {
plugins: [
pluginBabel({
include: /\.(?:jsx|tsx)$/,
}),
pluginVue(),
pluginVueJsx(),
],
};
After registering the plugin, you can use Vue's JSX / TSX syntax in .jsx
, .tsx
, and .vue
files.
Since the Vue JSX plugin relies on Babel for compilation, you need to additionally add the @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.
Vue SFC
When using JSX in Vue SFC, you need to add lang="jsx"
or lang="tsx"
to the <script>
tag.
- JSX:
<script lang="jsx">
const vnode = <div>hello</div>;
</script>
- TSX:
<script lang="tsx">
const vnode = <div>hello</div>;
</script>
JSX Type Inference
When using Vue >= 3.3, please set "jsxImportSource": "vue"
in tsconfig.json
to enable JSX type inference.
{
"compilerOptions": {
"jsxImportSource": "vue"
}
}
For more details, see Vue - JSX Type Inference.
Options
If you need to customize the compilation behavior of Vue, you can use the following configs.
vueJsxOptions
Options passed to @vue/babel-plugin-jsx
, please refer to the @vue/babel-plugin-jsx documentation for detailed usage.
- Type:
type VueJSXPluginOptions = {
/** transform `on: { click: someCallback }` to `onClick: someCallback` */
transformOn?: boolean;
/** enable optimization or not. */
optimize?: boolean;
/** merge static and dynamic class / style attributes / onSomething handlers */
mergeProps?: boolean;
/** configuring custom elements */
isCustomElement?: (tag: string) => boolean;
/** enable object slots syntax */
enableObjectSlots?: boolean;
/** Replace the function used when compiling JSX expressions */
pragma?: string;
};
Default:
{}
Example:
pluginVueJsx({
vueJsxOptions: {
transformOn: true,
},
});
License
MIT.