Vue 2 Plugin

The Vue 2 plugin provides support for Vue 2 SFC (Single File Components). The plugin internally integrates vue-loader v15.

TIP

The Vue 2 plugin only supports Vue >= 2.7.0.

Quick Start

Install Plugin

You can install the plugin using the following command:

npm
yarn
pnpm
bun
npm add @rsbuild/plugin-vue2 -D

Register Plugin

You can register the plugin in the rsbuild.config.ts file:

rsbuild.config.ts
import { pluginVue2 } from '@rsbuild/plugin-vue2';

export default {
  plugins: [pluginVue2()],
};

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

Options

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

vueLoaderOptions

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

  • Type: VueLoaderOptions
  • Default:
const defaultOptions = {
  compilerOptions: {
    preserveWhitespace: false,
  },
  experimentalInlineMatchResource: true,
};
  • Example:
pluginVue2({
  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.

splitChunks

When chunkSplit.strategy set to split-by-experience, Rsbuild will automatically split vue and router related packages into separate chunks by default:

  • lib-vue.js: includes vue, vue-loader.
  • lib-router.js: includes vue-router.

This option is used to control this behavior and determine whether the vue and router related packages need to be split into separate chunks.

  • Type:
type SplitVueChunkOptions = {
  vue?: boolean;
  router?: boolean;
};
  • Default:
const defaultOptions = {
  vue: true,
  router: true,
};
  • Example:
pluginVue({
  splitChunks: {
    vue: false,
    router: false,
  },
});