Build Vue 3 App#

Although the Modern.js framework is built on React, the underlying Modern.js Builder is not coupled with React. Therefore, you can use Modern.js Builder to build your Vue applications and leverage most of the capabilities provided by Modern.js Builder.

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

Example Project#

We have created an example project based on Vue 3 and Modern.js Builder. You can build your own project by referring this project, or just cloning it as a template. The following documentation will provide more detailed instructions.

• modern-js-examples - builder-vue3

• modern-js-examples - builder-vue3-rspack

CLI Tool#

Before you start building a Vue project, you need a CLI tool to provide basic commands.

You can use the CLI tool provided by Builder, or you can build your own CLI tool based on Builder's Node API.

Using Vue Plugin#

To compile Vue SFC (Single File Components) and JSX syntax, you need to register the Builder Vue plugin. The plugin will automatically add the necessary configuration for Vue builds and remove the built-in React-related configurations.

For example, register in builder.config.ts:

import { defineConfig } from '@modern-js/builder-cli';
import { builderPluginVue } from '@modern-js/builder-plugin-vue';

export default defineConfig({
  builderPlugins: [builderPluginVue()],
});

Type Definitions#

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

  // eslint-disable-next-line @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>;
  export default component;
}