Federated Vue 2 + Vue 3 apps?

[irrg]

I've been hacking at https://github.com/gioboa/vue-microfrontend-demo and https://github.com/gioboa/vue-microfrontend-demo/tree/vue2_implementation for a few hours now (thank you for doing that, @gioboa! I couldn't wrap my head around the plugin without that excellent example!) and I'm kind of stumped…

Is it possible to have a Vue 2 remote app live side by side with a Vue 3 host app? We're migrating a mammoth and I am looking to try an approach PoC where the router defers to the Vue 2 app for routes that aren't ported yet. This'd allow us to not have to do the whole thing at once.

EDIT: https://github.com/module-federation/module-federation-examples/tree/master/vue2-in-vue3 this webpack example generally gets the idea, although the example doesn't show things side by side like gioboa's example)

[irrg]

(Also, to note, Vue 3's compat mode doesn't cover our scenarios. It's…complicated.)

[gioboa]

I looked at this example module-federation-examples/tree/master/vue2-in-vue3 and the Vue 2 is loaded inside the Vue 3. What's wrong with this scenario? If you describe me the case I can create a POC.

[irrg]

I might not totally be following how it should work but I'm generally have a hard time having Vue 2 and Vue 3 exist side by side. I knocked out this PoC https://github.com/irrg/vue23-poc without knowing what I was doing, exactly, but it should show you my use case…does that help?

[gioboa]

Yep, it's a Vue 3 with a route with Vue 2, right?

[irrg]

Yessir.

[ScriptedAlchemy]

Bridges is the official suggestion. https://module-federation.io/practice/bridge/vue-bridge.html

[gioboa]

@irrg Here you can find a working example. I will add it to the mf examples as well soon. 🚀