Modern.js Module
Guide
API
Plugins
Guide
API
Plugins

Vue Plugin

The Vue plugin provides support for building Vue 3 components. The plugin internally integrates esbuild-plugin-vue3 and @vue/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.
  3. Only support bundle, we recommend to set input to ['src/**/*.vue'] or ['src/index.ts'].

Quick start

Install

npm
yarn
pnpm
bun
npm add @modern-js/plugin-module-vue -D

Register

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

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