fyddaben/nuxt-micro-frontend

🎳Nuxt module for micro-frontend solution

Nuxt-Micro-Frontend

Using frontend microservices with Nuxt, support qiankun now

中文

Setup

1. Add @femessage/nuxt-micro-frontend dependency to your project

yarn add @femessage/nuxt-micro-frontend -D 

# or npm install @femessage/nuxt-micro-frontend

2. Add @femessage/nuxt-micro-frontend to the modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    '@femessage/nuxt-micro-frontend',

    // With options
    ['@femessage/nuxt-micro-frontend', { /* module options */ }]
  ]
}

Module Options

Documents

If want to set headers recommend to set build.devMiddleware.headers, see Nuxt API: The build Property > devMiddleware

path: the MFE lifecycle hook file path relative to rootDir

force: skip version check and force to use this module

unique: If use qiankun, sub application's package name should unique. Set unique to true can create a unique umd target.

output: If use the other micro library, probably need to config the webpack output libraryTarget.

Support Micro Front-End Framework

• qiankun
• single-SPA example in examples/single-spa-demo

LifeCycle hooks file example

Qiankun

• add mounted and beforeUnmount hook to get vue instance

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using cd examples/normal && npm run dev

License

MIT License

Copyright (c) FEMessage

Contributors ✨

Thanks goes to these wonderful people (emoji key):

cjf 💻 📖 📝 💡

Han 💻 🖋 🚇

This project follows the all-contributors specification. Contributions of any kind welcome!