Vue#

In this document, you will learn how to build a Vue 3 or Vue 2 application using Rsbuild.

Create Vue Project#

You can use create-rsbuild to create a project with Rsbuild + Vue. Just execute the following command:

npm create rsbuild@latest

Then select Vue 3 or Vue 2 when prompted to "Select framework".

Vue 3#

Use Vue in an existing project#

To compile Vue SFC (Single File Components), you need to register the Rsbuild Vue plugin. The plugin will automatically add the necessary configuration for Vue builds.

For example, register in rsbuild.config.ts:

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  plugins: [pluginVue()],
});

Use the JSX syntax of Vue#

If you need to use the JSX syntax of Vue, you also need to register the @rsbuild/plugin-vue-jsx.

TypeScript Support#

Rsbuild supports compiling TypeScript by default.

Please refer to the TypeScript - IDE Support section of the Vue documentation to learn how to set up Vue TypeScript support in your IDE.

Vue 2#

Use Vue 2 in an existing project#

To compile Vue SFC (Single File Components), you need to register the Rsbuild Vue 2 plugin. The plugin will automatically add the necessary configuration for Vue builds.

For example, register in rsbuild.config.ts:

import { defineConfig } from '@rsbuild/core';
import { pluginVue2 } from '@rsbuild/plugin-vue2';

export default defineConfig({
  plugins: [pluginVue2()],
});

Use the JSX syntax of Vue#

If you need to use the JSX syntax of Vue, you also need to register the @rsbuild/plugin-vue2-jsx.

Type Declarations#

In a TypeScript project, you need to add type definitions for *.vue files so that TypeScript can recognize them correctly.

Create env.d.ts in the src directory and add the following content:

declare module '*.vue' {
  import Vue from 'vue';

  export default Vue;
}