Guide
Config
Plugin
API
Guide
Config
Plugin
API

Vue JSX Plugin

The Vue plugin provides support for Vue 3 JSX / TSX syntax. The plugin internally integrates @vue/babel-plugin-jsx.

TIP

The Vue JSX plugin relies on Babel transpilation and requires an additional Babel Plugin. At the same time, adding the Babel plugin will cause additional compilation overhead.

Quick Start

Install Plugin

You can install the plugin using the following command:

npm
yarn
pnpm
bun
npm add @rsbuild/plugin-vue-jsx -D

Register Plugin

You can register the plugin in the rsbuild.config.ts file:

rsbuild.config.ts
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginVueJsx } from '@rsbuild/plugin-vue-jsx';

export default {
  plugins: [pluginBabel(), pluginVueJsx()],
};

After registering the plugin, you can use Vue's JSX / TSX syntax in your code.

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: xx }` to `onClick: xxx` */
  transformOn?: boolean;
  /** enable optimization or not. */
  optimize?: boolean;
  /** merge static and dynamic class / style attributes / onXXX 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,
  },
});