Vue 2#

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

Create Vue 2 Project#

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

npm create rsbuild@latest

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

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