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.

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 type { DefineComponent } from 'vue';

  const component: DefineComponent<{}, {}, any>;
  export default component;
}

Deploy the Application#

After executing rsbuild build to build the application, you will get a set of static assets in the dist directory. These assets can be deployed to any platform or server.

Please note that the default output structure of Rsbuild may not be suitable for all platforms because different platforms have different requirements for the directory structure. You can refer to the Output Files section to modify the directory structure to meet the requirements of your deployment platform.

Additionally, if you need to preview the deployment artifacts locally, you can use the rsbuild preview command provided by Rsbuild CLI.