#Vue

This document explains how to build a Vue 3 or Vue 2 application using Rsbuild.

#Create a Vue application

Create a Vue application with Rsbuild using create-rsbuild. Run this command:

npm create rsbuild@latest

yarn create rsbuild

pnpm create rsbuild@latest

bun 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), register the Rsbuild Vue plugin. The plugin automatically adds 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

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

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;
}