Vue Plugin#

The Vue plugin provides support for building Vue 3 applications. The plugin internally integrates vue-loader and @vue/babel-plugin-jsx.

Quick Start#

Install#

You can install the plugin with the following command:

npm add @modern-js/builder-plugin-vue -D

Register#

You can register Vue plugin with the addPlugins method:

import { builderPluginVue } from '@modern-js/builder-plugin-vue';

builder.addPlugins([builderPluginVue()]);

After installing the plugin, you can directly import *.vue files in your code or use Vue's JSX syntax without the need for additional configuration.

Config#

If you need to customize the compilation behavior of Vue, you can use the following configs.

vueLoaderOptions#

• Type: VueLoaderOptions
• Default:

const defaultOptions = {
  compilerOptions: {
    preserveWhitespace: false,
  },
  experimentalInlineMatchResource: builder === 'rspack',
};

Options passed to vue-loader, please refer to the vue-loader documentation for detailed usage.

builderPluginVue({
  vueLoaderOptions: {
    hotReload: false,
  },
});

vueJsxOptions#

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

builderPluginVue({
  vueJsxOptions: {
    transformOn: true,
  },
});