Skip to content

feat: use rspack-vue-loader to support Vue hot update #12698

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chenjiahan merged 1 commit into from
Jan 12, 2026
Merged

feat: use rspack-vue-loader to support Vue hot update #12698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/create-rspack/template-vue-js/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@
"devDependencies": {
"@rspack/cli": "workspace:*",
"@rspack/core": "workspace:*",
"vue-loader": "^17.4.2"
"rspack-vue-loader": "^17.4.5"
}
}
4 changes: 2 additions & 2 deletions packages/create-rspack/template-vue-js/rspack.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @ts-check
import { defineConfig } from '@rspack/cli';
import { rspack } from '@rspack/core';
import { VueLoaderPlugin } from 'vue-loader';
import { VueLoaderPlugin } from 'rspack-vue-loader';

// Target browsers, see: https://github.com/browserslist/browserslist
const targets = ['last 2 versions', '> 0.2%', 'not dead', 'Firefox ESR'];
Expand All @@ -17,7 +17,7 @@ export default defineConfig({
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
loader: 'rspack-vue-loader',
options: {
experimentalInlineMatchResource: true,
},
Expand Down
2 changes: 1 addition & 1 deletion packages/create-rspack/template-vue-ts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,6 @@
"@rspack/cli": "workspace:*",
"@rspack/core": "workspace:*",
"typescript": "^5.9.3",
"vue-loader": "^17.4.2"
"rspack-vue-loader": "^17.4.5"
}
}
4 changes: 2 additions & 2 deletions packages/create-rspack/template-vue-ts/rspack.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
rspack,
type SwcLoaderOptions,
} from '@rspack/core';
import { VueLoaderPlugin } from 'vue-loader';
import { VueLoaderPlugin } from 'rspack-vue-loader';

// Target browsers, see: https://github.com/browserslist/browserslist
const targets = ['last 2 versions', '> 0.2%', 'not dead', 'Firefox ESR'];
Expand All @@ -20,7 +20,7 @@ export default defineConfig({
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
loader: 'rspack-vue-loader',
options: {
experimentalInlineMatchResource: true,
},
Expand Down
64 changes: 29 additions & 35 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions tests/e2e/cases/vue3/rspack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const { DefinePlugin, HtmlRspackPlugin } = require('@rspack/core');
const { VueLoaderPlugin } = require('vue-loader');
const { VueLoaderPlugin } = require('rspack-vue-loader');

/** @type { import('@rspack/core').RspackOptions } */
module.exports = {
Expand All @@ -26,7 +26,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
loader: 'rspack-vue-loader',
options: {
experimentalInlineMatchResource: true,
},
Expand Down
2 changes: 1 addition & 1 deletion tests/e2e/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"typescript": "^5.9.3",
"tailwindcss": "^3.4.19",
"vue": "^3.5.26",
"vue-loader": "^17.4.2",
"rspack-vue-loader": "^17.4.5",
"css-loader": "^7.1.2",
"ws": "^8.18.3"
}
Expand Down
2 changes: 1 addition & 1 deletion website/docs/en/guide/migration/webpack.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Now you can remove the webpack-related dependencies from your project:
<PackageManagerTabs command="remove webpack webpack-cli webpack-dev-server" />

:::tip
In some cases, you will still need to keep `webpack` as a dev dependency, such as when using [vue-loader](https://github.com/vuejs/vue-loader).
In some cases, you will still need to keep `webpack` as a dev dependency, such as when using [vue-loader](https://github.com/vuejs/vue-loader) (you can use [rspack-vue-loader](https://github.com/rstackjs/rspack-vue-loader) instead).

This is because these packages directly `import` subpaths of webpack and couple with webpack. If you encounter this issue, you can provide feedback to the maintainers of these plugins, asking them if they can make `webpack` an optional dependency.
:::
Expand Down
6 changes: 3 additions & 3 deletions website/docs/en/guide/tech/vue.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@ Rspack provides two solutions to support Vue:

## Vue 3

Currently, Vue 3 is supported by Rspack. Please make sure your [vue-loader](https://github.com/vuejs/vue-loader) version is >= 17.2.2 and configure as follows:
Currently, Vue 3 is supported by Rspack. Please make sure your [rspack-vue-loader](https://github.com/rstackjs/rspack-vue-loader) version is >= 17.2.2 and configure as follows:
Copy link

@fz6m fz6m Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add an explanation for why we need this loader?

Copy link
Contributor Author

@9aoy 9aoy Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since vue-loader lacks active maintenance, we adopted a forked version, rspack-vue-loader, to better align with the Rspack ecosystem.

To ensure seamless integration with Rstest, we introduced a dedicated loader matcher in rspack-vue-loader, leveraging with to implement a synchronous importActual method. This enables Vue projects to be properly tested within Rstest.

In addition, this approach allows us to support Vue hot module updates (HMR) in the Rspack-based project.


```js title="rspack.config.mjs"
import { defineConfig } from '@rspack/cli';
import { VueLoaderPlugin } from 'vue-loader';
import { VueLoaderPlugin } from 'rspack-vue-loader';

export default defineConfig({
plugins: [new VueLoaderPlugin()],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
loader: 'rspack-vue-loader',
options: {
// Note, for the majority of features to be available, make sure this option is `true`
experimentalInlineMatchResource: true,
Expand Down
2 changes: 1 addition & 1 deletion website/docs/zh/guide/migration/webpack.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Rspack 的配置是基于 webpack 的设计实现的，以此你能够非常轻
<PackageManagerTabs command="remove webpack webpack-cli webpack-dev-server" />

:::tip
在个别情况下，你仍然需要保留 `webpack` 作为开发依赖，例如使用 [vue-loader](https://github.com/vuejs/vue-loader) 时。
在个别情况下，你仍然需要保留 `webpack` 作为开发依赖，例如使用 [vue-loader](https://github.com/vuejs/vue-loader) 时 (你可以使用 [rspack-vue-loader](https://github.com/rstackjs/rspack-vue-loader) 替代)。

这是因为这些库直接 `import` 了 webpack 的子路径，与 webpack 产生了耦合。如果你遇到了这种情况，可以向这些插件的维护者反馈，询问他们能否将 `webpack` 作为可选依赖。
:::
Expand Down
6 changes: 3 additions & 3 deletions website/docs/zh/guide/tech/vue.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@ Rspack 提供两种方案来支持 Vue：

## Vue 3

目前，Rspack 已经完成了对 Vue 3 的支持，请确保你的 [vue-loader](https://github.com/vuejs/vue-loader) 版本 >= 17.2.2，并进行如下配置：
目前，Rspack 已经完成了对 Vue 3 的支持，请确保你的 [rspack-vue-loader](https://github.com/rstackjs/rspack-vue-loader) 版本 >= 17.2.2，并进行如下配置：

```js title="rspack.config.mjs"
import { defineConfig } from '@rspack/cli';
import { VueLoaderPlugin } from 'vue-loader';
import { VueLoaderPlugin } from 'rspack-vue-loader';

export default defineConfig({
plugins: [new VueLoaderPlugin()],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
loader: 'rspack-vue-loader',
options: {
// 注意，为了绝大多数功能的可用性，请确保该选项为 `true`
experimentalInlineMatchResource: true,
Expand Down
Loading