Is possible to have nested routes in a remote app?

[IsmaOrdas]

Hello. I'm building a Micro Frontend app based on Vue using Module Federation with Vite with the following structure:

Vue Host app:

• has a vue-router that will load the required micro frontends.
• the router has a base url named "/app".
• The path "/login" is loading properly the micro frontend (a Vue view) exported with Module Federation.

Vue Child app:

• This is loaded inside the host when accesing the "/login" route.
• has another vue-router for the internal navigation
• the base url is different to the host app.

The problem is that, when I try to navigate to different views inside the child app using router-link or "router.push", the Host app is updating the URL, and not the Child app.

This is how I expose the view from the child app:

federation({
      name: 'login-mf',
      filename: 'loginEntry.js',
      exposes: {
        './LoginMF': './src/views/Login.vue',
      },
      shared: ["vue"]
    })

This is the View I expose:

<template>
<p>Login view</p>
  <router-link to="LoginForm">Login</router-link>
  <router-link to="TestView">TestView</router-link>
  <router-view></router-view>
</template>

And the routes:

const routes = [
	{ path: '/', redirect: "/form" },
	{ path: "/form", component: Login },
	{ path: '/test/:id', name: "TestView", component: Test },
]

const router = createRouter({
	history: createWebHistory("/login"),
	routes,
})

In the host app I get the code exposed like this:

federation({
      name: "host",
      filename: "loginEntry.js",
      remotes: {
        "login-mf": {
          external: "http://localhost:5005/assets/loginEntry.js",
          format: 'esm',
          from: 'vite'
        },
      },
      shared: ["vue", "vue-router"]
    })

And set the router like this:

const LoginMF = () => import("login-mf/LoginMF")

const routes = [
	{path: "/", component: HelloWorld },
	{ path: '/login', component: LoginMF },
]

const router = createRouter({
	history: createWebHistory('/app/'),
})

How can I get the internal navigation of the internal app to work properly? Is there a way to "scope" the routers?

[ruleeeer]

I think the reason is that the router is bound to the runtime instance of vue, which makes it impossible to use the router defined in remote on the host side

[ruleeeer]

More details #139 (comment)

[IsmaOrdas]

Thanks for the info. Then I guess it is not possible to build micro-frontends with internal routing, at least not in this way.

[artem-tarasenko]

expose router config objects <RouteObject[]> and spread it in your root app's router config. The mentioned components will be loaded from the remote entry.