Nuxt Micro Frontend is a Nuxt module that turns a Nuxt application into a micro-frontend sub-application for qiankun and single-SPA.
What is Nuxt Micro Frontend?
Nuxt Micro Frontend is a Nuxt module that adapts a Nuxt application into a micro-frontend sub-application, currently supporting qiankun and single-SPA. The module takes an existing Nuxt project, adds lifecycle hooks (mounted and beforeUnmount) so the host application can mount and unmount it, and outputs a UMD bundle that the micro-frontend loader expects. It is published on npm under @femessage/nuxt-micro-frontend by the FEMessage team, with a MIT license.
Key Features
- qiankun support — The module includes a working example and a documented lifecycle hook file for qiankun, the micro-frontend framework from the UmiJS team.
- single-SPA support — A runnable example is provided in examples/single-spa-demo, so the same module works with both micro-frontend frameworks.
- Configurable module options — Four options control behavior: path (the MFE lifecycle hook file path relative to rootDir), force (skip version check and force module usage), unique (generate a unique UMD target when the sub-application package name is not unique for qiankun), and output (allows overriding webpack output.libraryTarget for other micro libraries).
- Easy install — Add @femessage/nuxt-micro-frontend as a devDependency via yarn or npm, then list it in the modules section of nuxt.config.js with optional options.
- Lifecycle hook example — The repository provides an mfe.js example that adds mounted and beforeUnmount hooks to get the Vue instance, so the host can control the sub-application lifecycle.
- Community contributions — The project uses all-contributors and lists three contributors who wrote code, documentation, examples, and bug reports.
- MIT licensed — Free to use in commercial and open-source projects.
Who is it for?
- Nuxt developers building micro-frontend architectures — They can turn an existing Nuxt app into a sub-application without rewriting it, just by adding the module and a lifecycle file.
- Teams adopting qiankun or single-SPA — They get a Nuxt-specific integration that handles the UMD output and version checks, instead of wiring webpack configuration manually.
- Frontend platform engineers — They can evaluate both qiankun and single-SPA in the context of Nuxt by running the included examples.
What can you do with Nuxt Micro Frontend?
- Sub-application developers: Convert an existing Nuxt project into a qiankun-compatible sub-application by installing the module, adding mfe.js with mounted and beforeUnmount hooks, and keeping the normal Nuxt development workflow.
- Single-SPA adopters: Use the same module to produce a single-SPA-compatible bundle, following the examples/single-spa-demo directory as a reference.
- Host application integrators: Configure the module options (path, force, unique, output) to control how the sub-application is built and exposed, including custom webpack output targets for micro libraries other than qiankun.
How does Nuxt Micro Frontend work?
Install the module with yarn add @femessage/nuxt-micro-frontend -D and add it to the modules array in nuxt.config.js. The module reads your lifecycle hook file (path configured via the path option), wraps the Nuxt app, and emits a UMD bundle. The host micro-frontend loader then calls the exported mounted and beforeUnmount lifecycle functions with the Vue instance.
FAQ
Does Nuxt Micro Frontend support single-SPA?
Yes. The repository includes a runnable example under examples/single-spa-demo, and the module options allow you to set a custom webpack output libraryTarget through the output option for micro libraries other than qiankun.
How many contributors does Nuxt Micro Frontend have?
Three people are credited through the all-contributors specification. They contributed code, documentation, blog posts, examples, infrastructure, and bug reports. Contribution guidelines follow the all-contributors standard and PRs are welcome.
What is the license for Nuxt Micro Frontend?
The project is released under the MIT License, which permits free use, modification, and distribution, including in commercial products. The full license text is in the LICENSE file in the repository.
