Vue 3#

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

Create Vue 3 Project#

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

npm create rsbuild@latest

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

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 Vue 3 JSX plugin.

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.