qiankun Micro-Frontends
Builds qiankun 3.x host and micro apps and converts Vite apps into micro apps.
Install
npx skills add umijs/qiankun --skill qiankun -g -a claude-code -y- Repository
- umijs/qiankun16.7k
- Category
- Engineering
- Updated
- 4d ago
- License
- MIT
- Context cost
- Lightabout 766 tokens
- Runs scripts
- No, instructions only
What it does
Usage manual for building micro-frontend projects with qiankun 3.x. Use when the user wants to create a qiankun main (host) app or sub (micro) app, convert an existing Vite app into a qiankun micro app, or wire up micro-frontend loading with React/Vue.
qiankun
qiankun is a micro-frontend framework: a main (host) app loads sub (micro) apps from their HTML entries at runtime, each inside a JS sandbox, with opt-in CSS isolation. This skill is the agent-facing manual for qiankun 3.x.
Task routing
Read only the reference file(s) the task at hand needs:
| Task | Read |
|---|---|
| Create a micro (sub) app, or convert an existing Vite app | references/create-micro-app.md |
| Create a main (host) app | references/create-main-app.md |
| Anything else, migration, style isolation, sandbox, debugging | https://qiankun.umijs.org and examples/ in https://github.com/umijs/qiankun |
Before you start
Determine these, asking the user only when not inferable from context:
- App type, main (host/shell) or sub (micro app).
- App name, lowercase letters, numbers, hyphens. The name the host registers must exactly match the name the sub app uses in its classic-mode fallback.
- Framework, React or Vue; TypeScript or JavaScript. Templates in the references are TS; strip types for JS.
- Dev port, must be fixed and unique per app, because the host hard-references it in
entry. Convention: main app7099, sub apps7101,7102, …
Package versions, until qiankun 3.0 stable ships, rc is the dist-tag for the core packages:
| Package | Dist-tag | Goes in |
|---|---|---|
qiankun | rc | main app dependencies |
@qiankunjs/react / @qiankunjs/vue | rc | main app dependencies (optional UI binding) |
@qiankunjs/bundler-plugin | rc | sub app devDependencies |
Key facts
These invariants shape every task below:
