Remote app with vue-router in host app [Nested Routes]

[sapyati]

I am trying to integrate a micro frontend remote app which has its own vue-router with routes file. Main component has child routes which navigate to other components, when it is exported and used in the host app I am not able to see the component and I get following errors [Vue warn]: resolveComponent can only be used in render() or setup().

Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol) 
  at <Anonymous onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>
warn2 @ runtime-core.esm-bundler.js:38

Same thing can be achieved in react but not in vue using vite. I want to able to integrate a micro frontend which has internal routing.

At my company same thing is achieved using the webpack and module federation plugin.

[Kgnx7]

You can expose your inner routes and merge it with host, at least I do it this way 🤷‍♂️

[Kgnx7]

Can anyone help how to integrate nested vue-routers with no merging routes or store router in window and use host router in remote ?

[dschewchenko]

@sapyati Hello refer vue-router documentation Create root route with component, where you can add new newsted routes from remote app. Also you could use router guard to add new routes

[malikba]

@dschewchenko Could you explain a little bit more? Do you have any examples? This is very confusing as the location of the root route with component (should it be inside the host app or the remote app?) Could you have one router on the host app and one on the remote app? Or should there be only one router? (in which case you won't be able to test your remote application alone).

[dschewchenko]

preffered to make routes in host, but you could extend routes in other places, for example in root component for some route. Sorry, I have no time to make examples

[malikba]

@dschewchenko ok, so I've tested multiple things for nested routing, and what I've successfully implemented with WebpackModuleFederation is not yet possible with vite-plugin-federation because the router elements in the DOM (router-view and router-link) are not correctly interpreted. So there is clearly a bug that should be addressed on the vite-plugin-federation side 🤷.

PS: you can also check those issues, they are all related:

• [Vue warn]: Invalid VNode type: Symbol() (symbol) · Issue #356 · originjs/vite-plugin-federation
• App1(host) include App2(remote), router is not working · originjs/vite-plugin-federation · Discussion #195
• Invalid VNode type when loading remote Vue3 components · originjs/vite-plugin-federation · Discussion #341

[nanu-c]

I have a similar problem. When i use a vue app that has a router and a react app as component that uses a react router, the component react router overwrites the vue router.