Module federation Vue 2 with separate Vuetify and Vuex

Hi,

I’m trying to create two Apps:

1. Main app. It has Vue 2 with Vuex and Vue router.
2. A standalone app with the same tech stack.

Right now I have a few problems. First of all the second app shows me store of the main app. I want them to have separate instaces of Vuex. Is there a way to do it? When I open the second app in browser everything is fine, but when it’s from the first app I have errors like: [vuex] unknown action type: appMF/sendData

Even though this action is known.

I think Vuetify is not also not loading properly since I got errors like that and it’s all working on url where this app is mounted. Cannot read properties of undefined (reading 'application').

I don’t want to have strictly written what Vue versions Remotes should have because some other apps will be using react, different techs and so on.

[tomaszmac]

@tomaszmac i have done with a friend a example with vuetify working you can take a look here, in fact you need to instanciate the plugin on both.

About the vuex, once the vuex is “globa” on the window, the browser share its store. so if you dont want the second app to see the first store, you must use a differente namespace. Also so to the second store being “usable” on the shell you need to define de store on the first, export your store and register on the first.

Thanks a lot. Going to check this.

[schirrel]

About the vuex, once the vuex is “globa” on the window, the browser share its store. so if you dont want the second app to see the first store, you must use a differente namespace. Also so to the second store being “usable” on the shell you need to define de store on the first, export your store and register on the first.