Vue 2 Plugin

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

Quick Start

Install

You can install the plugin with the following command:

npm
yarn
pnpm
bun
npm add @modern-js/builder-plugin-vue2 -D

Register

You can register Vue 2 plugin with the addPlugins method:

import { builderPluginVue2 } from '@modern-js/builder-plugin-vue2';

builder.addPlugins([builderPluginVue2()]);

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,
  },
};

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

builderPluginVue2({
  vueLoaderOptions: {
    hotReload: false,
  },
});
TIP

The Vue 2 plugin is using the vue-loader v15. Please be aware that there may be configuration differences between v15 and the latest version.

vueJsxOptions

  • Type:
type VueJSXPresetOptions = {
  compositionAPI?: boolean | string;
  functional?: boolean;
  injectH?: boolean;
  vModel?: boolean;
  vOn?: boolean;
};
  • Default:
const defaultOptions = {
  injectH: true,
};

Options passed to @vue/babel-preset-jsx, please refer to the @vue/babel-preset-jsx documentation for detailed usage.

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