Discussion on: Setup a Micro-Frontend architecture in 15min with Vite!

[Kevin Luo]

How does the router work in this case?

[Meidi Airouche Onepoint]

This is a good question. I was affraid that the article would be too long if I deep dived into routing, state, refs etc...

I'll answer here then.

In the Shell, you can use a vue or react router (what you prefer) to route to any kind of component. For example :

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: HomePage },
  { path: '/vue-mf', component: () => import('vueMicrofrontend/App') },
  { path: '/react-mf', component: () => import('reactMicrofrontend/App') },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Once the microfrontend is loaded throught the global Shell router, it uses its own internal router if it has one.

So a good practice would be to keep the Global Shell router just load the micr-frontends and then, each micro-frontends having its own dedicated standalone router.