Micro Front End / Web Components / Vue Router Error : Uncaught TypeError: Cannot redefine property: $router

I've not tried recreatting this scenario, however I can spot the obvious reason why it doesn't work.

Lets briefly look at what happens when you launch an SPA.

Router's are initialize at the beginning, i.e new Vue() and your sub-apps are attached midway i.e on the Dom Rerender, following this sequence, you can't jump from mid-app back to the top without breaking things either the initial router is discarded or the new one is rejected.

My advice:

Don't use vue-router in your subapps (web components), use a lightweight code to handle routing.

In my experience doing micro-frontend architecture, the whole goal is to stick to the SOLID pattern as much as possible. If your sub-apps are complex to the extent that they require vue-router for routing, then you're not doing it right*.

Typically, a sub-app should be such that does only one thing.

e.g In a business SaaS software for example, A customer micro app is only responsible for

1. Creating new customer (pop up modal)
2. Listing Customers
3. Viewing a single customer's transaction report
4. Editing customer informattion (pop up modal)

Handling customer payments, debts and complex charting reports is each handled by another sub-app.

Only 2 and 3 require routing and we handled that with v-if statements.