https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx

An Rsbuild plugin for Vue 2 JSX / TSX support.
https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx

rsbuild rsbuild-plugin rspack

Last synced: 16 days ago
JSON representation

An Rsbuild plugin for Vue 2 JSX / TSX support.

• Host: GitHub
• URL: https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx
• Owner: rspack-contrib
• License: mit
• Created: 2024-08-18T09:35:25.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-12-01T01:50:37.000Z (26 days ago)
• Last Synced: 2024-12-01T02:31:57.354Z (26 days ago)
• Topics: rsbuild, rsbuild-plugin, rspack
• Language: TypeScript
• Homepage:
• Size: 119 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-rspack - @rsbuild/plugin-vue2-jsx

README

        
# @rsbuild/plugin-vue2-jsx

Provides support for Vue 2 JSX / TSX syntax. The plugin internally integrates [@vue/babel-preset-jsx](https://github.com/vuejs/jsx-vue2).



  

   

  

  



## Usage

Install:

```bash

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

```

Add plugin to your `rsbuild.config.ts`:

```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](https://www.npmjs.com/package/@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](https://github.com/vuejs/jsx-vue2) 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 `` tag.

- JSX:

```html title="App.vue"

<script lang="jsx">

  const vnode = <div>hello</div>;

```

- TSX:

```html title="App.vue"

  const vnode = <div>hello</div>;

```

## 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](https://github.com/vuejs/jsx-vue2) for detailed usage.

- **Type:**

```ts

type VueJSXPresetOptions = {

  compositionAPI?: boolean | string;

  functional?: boolean;

  injectH?: boolean;

  vModel?: boolean;

  vOn?: boolean;

};

```

- **Default:**

```ts

const defaultOptions = {

  injectH: true,

};

```

- **Example:**

```ts

pluginVue2Jsx({

  vueJsxOptions: {

    injectH: false,

  },

});

```

## License

[MIT](./LICENSE).