Provides support for Vue 2 SFC (Single File Components). The plugin internally integrates vue-loader v15.
@rsbuild/plugin-vue2 only supports Vue >= 2.7.0.
Install:
npm add @rsbuild/plugin-vue2 -D
Add plugin to your rsbuild.config.ts
:
// 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.
If you need to customize the compilation behavior of Vue, you can use the following configs.
Options passed to vue-loader
, please refer to the vue-loader documentation for detailed usage.
-
Type:
VueLoaderOptions
- Default:
const defaultOptions = {
compilerOptions: {
whitespace: "condense",
},
experimentalInlineMatchResource: true,
};
- Example:
pluginVue2({
vueLoaderOptions: {
hotReload: false,
},
});
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.
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,
},
});
/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.
MIT.