search

module-federation / module-federation-examples

Implementation examples of module federation , by the creators of module federation
https://module-federation.io/
MIT License
5.66k stars 1.75k forks source link

Vue 2 component converted to Vue 3, slots and inject not working #4275

Closed gnunespedroso closed 1 month ago

gnunespedroso commented 2 months ago

I've cloned the repository and tested some features between a Vue 3 shell consuming a Vue 2 component (eg.: Button), everything works perfectly fine until I encountered two issues. The vue 2 component that is being transformed to Vue 3, using the function "vue2ToVue3", has problems related to slots and inject. Let's say that the parent component (vue 3) provides some information for the vue 2 component, and this vue 2 component injects it, the inject doesn't work because it seems that is not being defined when transforming to vue 3. The same happens for slots, if the vue 2 component has a slot inside it, example for a Button component: <button> <slot/> </button> And the parent uses it: <Button> Click me! </Button>

The "Click me!" message turns into "undefined".

Any idea how we can solve this problem?

ScriptedAlchemy commented 1 month ago

You should use bridges instead. https://module-federation.io/practice/bridge/vue-bridge.html

I spoke to evan and showed him this repo example, the reason slots is not handled is because the function that converts v2 to v3 doesnt handle any bindings for slots.

He does not suggest this approach and agrees with using a bridge instead. I dont know who contributed this sample either as it was not authored by me. You can try git blame and see who added it,maybe they have updated to bind slots as well.