# Vue Plugin

The Vue plugin provides support for building Vue 3 components. The plugin internally integrates [esbuild-plugin-vue3](https://github.com/pipe01/esbuild-plugin-vue3) and [@vue/babel-plugin-jsx](https://github.com/vuejs/babel-plugin-jsx)。

:::warning
Notice that we have some limitation:

1. The current implementation of this plugin integrates directly with the community plugin and therefore does not support writing jsx/tsx in sfc.
2. If you want to generate d.ts for the components, please use the official recommendation [vue-tsc](https://www.npmjs.com/package/vue-tsc).
3. Only support bundle, we recommend to set input to `['src/**/*.vue']` or `['src/index.ts']`.

:::

## Quick start

### Install

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @modern-js/plugin-module-vue -D" />

### Register

In Modern.js Module, you can register plugins in the following way:

```ts
import { moduleTools, defineConfig } from '@modern-js/module-tools';
import { modulePluginVue } from '@modern-js/plugin-module-vue';

export default defineConfig({
  plugins: [moduleTools(), modulePluginVue()],
  buildConfig: {
    buildType: 'bundle',
    format: 'esm',
    input: ['src/index.vue'],
    dts: false,
  },
});
```

## Options

### vueJsxPluginOptions

- **Type:**

```ts
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:** `{}`

Options 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.