close
Guide
Config
Plugin
API
Blog
About
Contribute
Guide
Config
Plugin
API
Blog
About
Contribute

Vue

How to Use

Rspack provides two solutions to support Vue:

  • Use Rsbuild: Rsbuild provides out-of-the-box support for Vue 3 and Vue 2, allowing you to quickly create a Vue project. See "Rsbuild - Vue 3" or "Rsbuild - Vue 2" for details.
  • Manually configure Rspack: You can refer to the current document to manually add configurations for Vue.

Vue 3

Currently, Vue3 is supported by Rspack. Please make sure your vue-loader version is >= 17.2.2 and configure as follows:

rspack.config.js
const { VueLoaderPlugin } = require('vue-loader');

/** @type {import('@rspack/cli').Configuration} */
const config = {
  // ...
  plugins: [new VueLoaderPlugin()],
  module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // Note, for the majority of features to be available, make sure this option is `true`
          experimentalInlineMatchResource: true,
        },
      },
    ],
  },
};
module.exports = config;

As Rspack natively supports the compilation of CSS modules, you do not need to configure loaders related to CSS. In addition, when you try to use a CSS preprocessor (such as: less), you only need to add the following configuration:

const config = {
  module: {
    rules: [
+      {
+        test: /\.less$/,
+        loader: "less-loader",
+        type: "css",
+      }
    ],
  },
};
module.exports = config;

At this time, Rspack will use the built-in CSS processor for post-processing.

If you don't want to generate CSS files, you can also use a combination of css-loader and vue-style-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader'],
        type: 'javascript/auto',
      },
    ],
  },
  experiments: {
    css: false, // At this point, you need to turn off `experiments.css` to adapt to the internal processing logic of `vue-loader`
  },
};

Besides, as Rspack has built-in TS support, we also support lang="ts" configuration by default:

<script lang="ts">
  export default {
    // ...
  };
</script>

You can refer to the related example example-vue3.

Vue 2

Rspack has completed compatibility with Vue2 (using vue-loader@15).

Please make sure to turn off experiments.css when configuring Vue2 projects or use Rule.type = "javascript/auto" in CSS-related rules:

rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
        type: 'javascript/auto',
      },
      {
        test: /\.ts$/, // add this rule when you use TypeScript in Vue SFC
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'typescript',
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
  experiments: {
    css: false,
  },
};

TypeScript is supported using Rspack's native builtin:swc-loader, see this for details.

You can refer to the related example example-vue2 and example-vue2-ts.

Vue 3 JSX

Since Rspack supports using babel-loader, you can directly use the @vue/babel-plugin-jsx plugin to support Vue 3 JSX syntax.

Install

First, you need to install babel-loader, @babel/core and @vue/babel-plugin-jsx:

npm
yarn
pnpm
bun
npm add babel-loader @babel/core @vue/babel-plugin-jsx -D

Configure

Then add the following configuration to support Vue 3 JSX syntax in .jsx files:

rspack.config.js
/**
 * @type {import('@rspack/cli'). Configuration}
 */
module.exports = {
  context: __dirname,
  entry: {
    main: './src/index.jsx',
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: ['@vue/babel-plugin-jsx'],
            },
          },
        ],
      },
    ],
  },
};

Rspack provides a example of Vue JSX for reference.