\n\n## Usage\n\nInstall:\n\n```bash\nnpm add @rsbuild/plugin-vue2 -D\n```\n\nAdd plugin to your `rsbuild.config.ts`:\n\n```ts\n// rsbuild.config.ts\nimport { pluginVue2 } from \"@rsbuild/plugin-vue2\";\n\nexport default {\n plugins: [pluginVue2()],\n};\n```\n\nAfter registering the plugin, you can import `*.vue` files in your code.\n\n## Options\n\nIf you need to customize the compilation behavior of Vue, you can use the following configs.\n\n### vueLoaderOptions\n\nOptions passed to `vue-loader`, please refer to the [vue-loader documentation](https://vue-loader.vuejs.org/) for detailed usage.\n\n- **Type:** `VueLoaderOptions`\n- **Default:**\n\n```js\nconst defaultOptions = {\n compilerOptions: {\n whitespace: \"condense\",\n },\n experimentalInlineMatchResource: true,\n};\n```\n\n- **Example:**\n\n```ts\npluginVue2({\n vueLoaderOptions: {\n hotReload: false,\n },\n});\n```\n\n> 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.\n\n### splitChunks\n\nWhen [chunkSplit.strategy](/config/performance/chunk-split) set to `split-by-experience`, Rsbuild will automatically split `vue` and `router` related packages into separate chunks by default:\n\n- `lib-vue.js`: includes vue, vue-loader.\n- `lib-router.js`: includes vue-router.\n\nThis option is used to control this behavior and determine whether the `vue` and `router` related packages need to be split into separate chunks.\n\n- **Type:**\n\n```ts\ntype SplitVueChunkOptions = {\n vue?: boolean;\n router?: boolean;\n};\n```\n\n- **Default:**\n\n```ts\nconst defaultOptions = {\n vue: true,\n router: true,\n};\n```\n\n- **Example:**\n\n```ts\npluginVue({\n splitChunks: {\n vue: false,\n router: false,\n },\n});\n```\n\n## FAQ\n\n### /deep/ selector causes compilation error\n\n`/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.\n\nYou can use `:deep()` instead. See [Vue - Deep Selectors](https://vuejs.org/api/sfc-css-features.html#deep-selectors) for more details.\n\n```html\n\n```\n\n> You can also refer to [Vue - RFC 0023](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md) for more details.\n\n## License\n\n[MIT](./LICENSE).","users":{}}
![\"npm](\"https://img.shields.io/npm/v/@rsbuild/plugin-vue2?style=flat-square&colorA=564341&colorB=EDED91\")
\n \n ![\"license\"](\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91\"){kind=icon}
\n