Vue Plugin

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

TIP

For Vue 3 JSX / TSX syntax, please use the Vue JSX plugin.

Quick Start

Install Plugin

You can install the plugin using the following command:

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

Register Plugin

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

rsbuild.config.ts
import { pluginVue } from '@rsbuild/plugin-vue';

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

After registering the plugin, you can import *.vue SFC files in your code.

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:
pluginVue({
  vueLoaderOptions: {
    hotReload: false,
  },
});

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, and vue's sub-dependencies (@vue/shared, @vue/reactivity, @vue/runtime-dom, @vue/runtime-core).
  • 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,
  },
});