Vue.JS - micro frontend approach

Question

Our team is developing a large project and we want to build a big app with multiple forms and dashboards and features. One monolith SPA would get complicated. So we discuss

Answer 1

I have been curious looking for a quick way to implement the Micro-frontend architecture. Some good resources I found are at: https://micro-frontends.org/ and https://single-spa.js.org/, however the problem I had with them is setup complexity... I like to see results pretty fast. https://piral.io is still pretty much in development and it's mainly targeted for react, but here are my findings.

I was able to come up with an approach and hope to write an medium article on that soon, however for the time being

1. You can build each part of your application as an independent WebComponent, with Vue, this article is a great place to start.
2. You can use vue-router, and with dynamic route matching (e.g /apps/:app_name) you can load sub-applications as appropriate. Within each sub-app, you can as well have a routing system in place
3. In recent browsers, there's BroadcastChannel which can be used to send messages across sub-apps. This could be resourceful.
4. BroadcastChannel can handle bi-directional communication.

This approach works best if you want to:

1. Have separate team use whatever tool they're most comfortable with.
2. Add new apps, even in production without downtime.