Micro‑Frontend Architecture and Implementation Practices Based on Vue

Recently the concept of micro‑frontend has become very popular. A micro‑frontend architecture applies the micro‑service idea to the browser, turning a monolithic web application into a collection of small, independently developed, deployed, and run front‑end applications.

The iQIYI front‑end team has used Vue for three years, and as the codebase grew, they needed a more decoupled solution. They therefore built a custom micro‑frontend framework on top of Vue. This article introduces the practical implementation principles of that framework.

Container Application

The container app provides the basic code base (Vue, main router, Vuex, etc.) while stripping out any business‑specific logic. It aggregates the various micro‑frontend modules via routing to form complete pages.

Key responsibilities of the container include:

Binding common code required by micro‑frontend modules to global functions.

Fetching the manifest.json list of JS files for each module based on the request URL.

Matching routes defined by modules and loading the corresponding modules.

Loading each module’s JS files and rendering them.

Global Component Binding

Common components such as Vue, Router, Store, and a custom RenderPage component are attached to window (e.g., window.mp.Vue) so that sub‑modules can reuse them without bundling duplicate copies.

Host Configuration

Since the container does not import any sub‑module dependencies, it must obtain the host URLs of each module from a custom configuration file. Adding a new module requires adding its host address to this file.

Routing Strategy

Each micro‑frontend module maintains its own routes. The container defines a wildcard route (e.g., path: '*') and, in a navigation guard such as beforeEach, loads the module’s route definitions from its manifest and merges them into the main router.

Module Rendering

A dedicated module.vue component handles the following steps:

Locate the module’s host and retrieve its manifest.json list.

Obtain the module’s JS file URLs from the store and inject them into the page by appending <script> tags to document.head.

Invoke the module’s global render function, e.g., window.mp.render_home('#containerId'), which creates the Vue instance and mounts it to the specified DOM element.

Lazy‑Loaded Common Modules

To avoid bundling large shared libraries into every module, common code is registered as a lazy‑loaded component using Webpack’s dynamic import() with webpackChunkName comments. This ensures the code is only fetched when needed.

Micro‑Frontend Module Build

Each module is built with a Webpack configuration that differs from the container in several ways:

Externalizing third‑party libraries (e.g., Vue) to prevent duplication.

Generating multiple entry points for each sub‑module.

Configuring deployment paths for different environments (localhost with ports for development, specific hosts for production).

Using webpack‑manifest‑plugin to automatically produce a manifest.json that lists all generated JS files.

Modules also expose a global function (e.g., window.mp.home_routes()) that returns their route configuration, allowing the container to integrate them seamlessly.

Entry Files and Development

Every sub‑module has its own entry file (similar to jobs/app.js) that wraps normal Vue initialization inside a global function so the container can trigger rendering after the script loads.

Benefits

The iQIYI team reports that this micro‑frontend framework leads to a smaller, tighter, and easier‑to‑maintain codebase, greater extensibility, and more autonomous teams. Future work includes further performance optimizations and enabling page‑level composition across different applications.