Cookbook
This is the collection of hands-on recipes for the common jobs you'll do with qiankun v3. Every recipe is goal-first: it states what you're trying to achieve, then goes straight to the code, assuming you already know the surrounding concepts. If you want the reasoning behind a step rather than the step itself, follow the concept links inline.
How to read a recipe
- Each recipe starts from a concrete goal (turn on a capability, get an app ready, handle a situation) rather than from the full surface of an API.
- Recipes are self-contained. They assume the framework is already installed and that you have a working main app and at least one micro-app. If you don't yet, start with Getting started or the tutorial.
- Concepts are covered elsewhere. A recipe just points you to the relevant concept page (the JS sandbox, style isolation, HTML streaming loading) instead of re-explaining it.
- API details live in the reference. Recipes show an option in a real scenario; the reference lists every field with its type and default.
Recipes at a glance
| Recipe | Goal |
|---|---|
| Enable CSS style isolation | Turn on sandbox.styleIsolation for a single app so a micro-app's CSS can't leak into the main app or its siblings. |
| Optimize loading and preloading | Get the most out of the streaming loader, fetch caching, and automatic preload instead of relying on manual prefetch. |
| Handle load and runtime errors | Catch failures during loading and the lifecycle with addErrorHandler / removeErrorHandler and a per-app loader. |
| Share state and communicate between apps | v3 no longer ships a built-in store; pass data and callbacks between the main app and micro-apps through props. |
| Migrate from qiankun 2.x | Move a 2.x integration to v3: string entry, element container, per-app configuration, and the options that were removed. |
| Make a Vite app qiankun-ready | Wire up the @qiankunjs/bundler-plugin/vite plugin and export lifecycles so a Vite app can run as a micro-app. |
| Make a Webpack app qiankun-ready | Add QiankunWebpackPlugin and export lifecycles so a Webpack app can run as a micro-app. |
| Run multiple micro-app instances | Use loadMicroApp to mount the same or several micro-apps at once, and unmount each cleanly. |
| Extend the sandbox with plugins | Write an isolation plugin so your own side effects are captured, released, and rebuilt along with the built-in ones. |
| Use the sandbox standalone | Reach for @qiankunjs/sandbox on its own to isolate third-party scripts without loading a whole micro-app. |
Quick routing
Not sure which recipe to open? Match it to your goal.
Use loadMicroApp by default
Recipes pass AppConfiguration as the second argument to loadMicroApp by default. Route-driven apps put the same configuration in an app's configuration field for registerMicroApps; field definitions and defaults are maintained only in the configuration reference.
v3 no longer ships a global-state store
qiankun 2.x offered initGlobalState / onGlobalStateChange / setGlobalState; v3 drops them. To share state, pass the values and callbacks down through props yourself — see Share state and communicate between apps.
Related
- API reference overview — every export and type.
- Loading a micro-app instance — the
loadMicroAppruntime model. - FAQ — short answers to common questions.