Fork: 558 Star: 5401 (更新于 2024-07-19 20:11:27)

license: MIT

Language: CSS .

A simple, efficient and powerful micro front-end framework. 一款简约、高效、功能强大的微前端框架

最后发布版本: v1.0.0-rc.5 ( 2024-04-29 16:49:47)

官方网址 GitHub网址


version downloads license WeChat travis coveralls



micro-app is a micro front-end framework launched by JD Retail. It renders based on webcomponent-like and realizes the micro front-end from component thinking, it aiming to reduce the difficulty of getting started and improve work efficiency.

It is the lowest cost framework for accessing micro front-end, and provides a series of perfect functions such as JS sandbox, style isolation, element isolation, preloading, resource address completion, plugin system, data communication and so on.

micro-app has no restrictions on the front-end framework, and any framework can be used as a base application to embed any type of micro application of the framework.

How to use

Base application


yarn add @micro-zoe/micro-app

2、import at the entrance

// main.js
import microApp from '@micro-zoe/micro-app'


3、Use components in page

<!-- my-page.vue -->
  <!-- 👇 name is the app name, url is the app address -->
  <micro-app name='my-app' url='http://localhost:3000/'></micro-app>

Sub application

Set cross-domain support in the headers of webpack-dev-server

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',

The above micro front-end rendering is completed, and the effect is as follows:


More detailed configuration can be viewed Documentation.

🤝 Contribution

If you're interested in this project, you're welcome to mention pull request, and also welcome your "Star" ^_^



git clone

2、Install dependencies

yarn bootstrap

3、Run project

yarn start

For more commands, see DEVELOP


What are the advantages of micro-app? It is easy to use and low invasive. It only needs to change a small amount of code to access the micro front-end, and provides rich functions at the same time.
How compatible? The micro-app relies on two newer APIs, CustomElements and Proxy.

For browsers that do not support CustomElements, they can be compatible by introducing polyfills. For details, please refer to: webcomponents/polyfills

However, Proxy is not compatible for the time being, so the micro-app cannot be run on browsers that do not support Proxy.

Browser compatibility can be viewed: Can I Use

The general is as follows:

  • desktop: Except IE browser, other browsers are basically compatible.
  • mobile: ios10+、android5+
Must micro applications support cross-domain? yes!

If it is a development environment, you can set headers in webpack-dev-server to support cross-domain.

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',

If it is a production environment, you can support cross-domain through Configuration nginx.

Does it support vite?

Yes, please see adapt vite for details.

Does it support ssr?

Yes, please see nextjs, nuxtjs for details.



MIT License

最近版本更新:(数据更新于 2024-07-21 11:01:35)

2024-04-29 16:49:47 v1.0.0-rc.5

2024-02-01 02:27:56 v1.0.0-rc.4

2023-12-18 13:14:15 v1.0.0-rc.3

2023-10-30 10:33:44 v1.0.0-rc.2

2023-10-16 14:33:44 v1.0.0-rc.1

2023-09-23 04:04:11 v1.0.0-rc.0

2023-09-20 19:45:08 v1.0.0-beta.7

2023-09-14 20:49:46 v1.0.0-beta.6

2023-05-23 20:01:59 v1.0.0-beta.5

2023-04-27 18:29:44 v1.0.0-beta.4


javascript, micro-frontend, microapp, webcomponents

micro-zoe/micro-app同语言 CSS最近更新仓库

2024-06-13 13:15:50 chris81605/Degrees-of-Lewdity_Cheat_Extended

2024-05-31 23:14:02 timpaul/form-extractor-prototype

2024-05-31 21:32:14 Achuan-2/siyuan-themes-tsundoku

2024-05-30 22:12:38 primefaces/primeng

2024-05-21 00:40:40 jgthms/bulma

2024-05-02 22:36:15 Zuoqiu-Yingyi/siyuan-theme-dark-plus