Awesome

@rsbuild/plugin-vue2-jsx

Provides support for Vue 2 JSX / TSX syntax. The plugin internally integrates @vue/babel-preset-jsx.

Usage

Install:

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

Add plugin to your rsbuild.config.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.

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 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:

<script lang="jsx">
  const vnode = <div>hello</div>;
</script>

• TSX:

<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 for detailed usage.

• Type:

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

• Default:

const defaultOptions = {
  injectH: true,
};

• Example:

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

License

MIT.