Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rspack-contrib/rsbuild-plugin-vue2
An Rsbuild plugin to support for Vue 2 SFC (Single File Components).
https://github.com/rspack-contrib/rsbuild-plugin-vue2
rsbuild rsbuild-plugin rspack
Last synced: about 1 month ago
JSON representation
An Rsbuild plugin to support for Vue 2 SFC (Single File Components).
- Host: GitHub
- URL: https://github.com/rspack-contrib/rsbuild-plugin-vue2
- Owner: rspack-contrib
- License: mit
- Created: 2024-08-25T01:27:30.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-12-08T21:42:54.000Z (about 1 month ago)
- Last Synced: 2024-12-08T22:28:04.459Z (about 1 month ago)
- Topics: rsbuild, rsbuild-plugin, rspack
- Language: TypeScript
- Homepage:
- Size: 76.2 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-rspack - @rsbuild/plugin-vue2
README
# @rsbuild/plugin-vue2
Provides support for Vue 2 SFC (Single File Components). The plugin internally integrates [vue-loader](https://vue-loader.vuejs.org/) v15.
> @rsbuild/plugin-vue2 only supports Vue >= 2.7.0.
## Usage
Install:
```bash
npm add @rsbuild/plugin-vue2 -D
```
Add plugin to your `rsbuild.config.ts`:
```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.
## 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](https://vue-loader.vuejs.org/) for detailed usage.
- **Type:** `VueLoaderOptions`
- **Default:**
```js
const defaultOptions = {
compilerOptions: {
whitespace: "condense",
},
experimentalInlineMatchResource: true,
};
```
- **Example:**
```ts
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.
### splitChunks
When [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:
- `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:**
```ts
type SplitVueChunkOptions = {
vue?: boolean;
router?: boolean;
};
```
- **Default:**
```ts
const defaultOptions = {
vue: true,
router: true,
};
```
- **Example:**
```ts
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](https://vuejs.org/api/sfc-css-features.html#deep-selectors) for more details.
```html
.a :deep(.b) {
/* ... */
}
```
> 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.
## License
[MIT](./LICENSE).