> For AI agents: the complete documentation index is available at https://rspack.rs/llms.txt, the full documentation bundle is available at https://rspack.rs/llms-full.txt.

# 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"](https://rsbuild.rs/guide/framework/vue#vue-3) or ["Rsbuild - Vue 2"](https://rsbuild.rs/guide/framework/vue#vue-2) for details.
- **Manually configure Rspack**: You can refer to the current document to manually add configurations for Vue.

## Vue 3

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:

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

export default defineConfig({
  plugins: [new VueLoaderPlugin()],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'rspack-vue-loader',
        options: {
          // Note, for the majority of features to be available, make sure this option is `true`
          experimentalInlineMatchResource: true,
        },
      },
    ],
  },
});
```

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:

```diff title="rspack.config.mjs"
export default {
  module: {
    rules: [
+      {
+        test: /\.less$/,
+        loader: "less-loader",
+        type: "css",
+      }
    ],
  },
};
```

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`](https://github.com/webpack/css-loader) and [`vue-style-loader`](https://github.com/vuejs/vue-style-loader):

```js title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader'],
        type: 'javascript/auto',
      },
    ],
  },
};
```

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

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

You can refer to the related example [example-vue3](https://github.com/rstackjs/rstack-examples/tree/main/rspack/vue).

## Vue 2

Rspack has completed compatibility with Vue 2 (using vue-loader\@15).

Please make sure to use `rules[].type = "javascript/auto"` in CSS-related rules:

```js title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
        type: 'javascript/auto',
      },
      {
        test: /\.(?:js|mjs|ts)$/, // add this rule when you use TypeScript in Vue SFC
        loader: 'builtin:swc-loader',
        options: {
          detectSyntax: 'auto',
        },
      },
    ],
  },
  experiments: {
    css: false,
  },
};
```

TypeScript is supported using Rspack's native `builtin:swc-loader`, see [this](https://rspack.rs/guide/features/builtin-swc-loader.md) for details.

You can refer to the related example [example-vue2](https://github.com/rstackjs/rstack-examples/tree/main/rspack/vue2) and [example-vue2-ts](https://github.com/rstackjs/rstack-examples/tree/main/rspack/vue2-ts).

## Vue 3 JSX

Since Rspack supports using `babel-loader`, you can directly use the [@vue/babel-plugin-jsx](https://github.com/vuejs/babel-plugin-jsx) plugin to support Vue 3 JSX syntax.

### Install

First, you need to install [babel-loader](https://www.npmjs.com/package/babel-loader), [@babel/core](https://www.npmjs.com/package/@babel/core) and [@vue/babel-plugin-jsx](https://www.npmjs.com/package/@vue/babel-plugin-jsx):


```sh [npm]
npm add babel-loader @babel/core @vue/babel-plugin-jsx -D
```

```sh [yarn]
yarn add babel-loader @babel/core @vue/babel-plugin-jsx -D
```

```sh [pnpm]
pnpm add babel-loader @babel/core @vue/babel-plugin-jsx -D
```

```sh [bun]
bun add babel-loader @babel/core @vue/babel-plugin-jsx -D
```

```sh [deno]
deno add npm:babel-loader npm:@babel/core npm:@vue/babel-plugin-jsx -D
```

### Configure

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

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

export default defineConfig({
  entry: {
    main: './src/index.jsx',
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: ['@vue/babel-plugin-jsx'],
            },
          },
        ],
      },
    ],
  },
});
```

Rspack provides a [example](https://github.com/rstackjs/rstack-examples/tree/main/rspack/vue-jsx) of Vue JSX for reference.

## Vue DevTools

Vue DevTools is designed to enhance the Vue developer experience; it can significantly improve your productivity and debugging capabilities when working with Vue applications.

For Vue applications built with Rspack, use [vue-devtools-rstack](https://github.com/OskarLebuda/vue-devtools-rstack) to integrate Vue DevTools.