#Vue plugin

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

#Quick start

#Install plugin

Install the plugin with this command:

npm add @rsbuild/plugin-vue -D

yarn add @rsbuild/plugin-vue -D

pnpm add @rsbuild/plugin-vue -D

bun add @rsbuild/plugin-vue -D

deno add npm:@rsbuild/plugin-vue -D

#Register plugin

Register the plugin in your rsbuild.config.ts file:

import { pluginVue } from '@rsbuild/plugin-vue';  export default {  plugins: [pluginVue()], };

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

#Options

Customize Vue compilation behavior with these options:

#vueLoaderOptions

Options passed to vue-loader. See 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 their 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,  }, });

#FAQ

#/deep/ selector causes compilation error

/deep/ is a deprecated usage as of Vue v2.7. Since it is not a valid CSS syntax, CSS compilation tools like Lightning CSS will fail to compile it.

You can use :deep() instead. See Vue - Deep Selectors for more details.

<style scoped>  .a :deep(.b) {  /* ... */  } </style>

You can also refer to Vue - RFC 0023 for more details.