Is there any solution to union two vue apps on vuetify and bootstrap-vue

Question

I have two SPA on vue, on same deployment area:

1. Uses Vuetify (www.someserver.com/portal_1/)
2. Uses Bootstrap-vue (www.someserver.com/portal_2/)

Now I need to make some portal area with components from both SPA. Is there any methodology to deal with it?

I try to create app with vuetify and bootsrtap-vue, but stuck with many sass errors...

Answer 1

I have struggled with the same issue regarding Vuetify styles. I needed to have a second Vue app embedded inside my Vuetify app but the Vuetify styles kept leaking inside the child Vue app, and the global styling coming from child app also broke Vuetify defaults.

I have done a long research and concluded that the options are:

-Rewrite the child app using BEM approach (Still Vuetify would leak with selectors like p, head, body etc.)

-Disable Vuetify's CSS reset file, remove globals and disable theming via hacky approaches.

-Use an iFrame container or web components approach on the second app to isolate it from the other.

Messing with Vuetify library didn't sound too great, because it will be too chaotic to deal with problems later on. We decided to completely isolate two Vue instances via an iFrame in the end, and I'd recommend the same thing if you REALLY need to use both bootstrap-vue and Vuetify, because they both have global CSS selector modifiers and stuff that will just create a huge mess.

I had my team do further research on iframes and how to consistently pass data between an iframe and parent app, here are the two options that you may consider:

vuex-iframe-sync (a lightweight option but I couldn't get it to work properly)

https://github.com/L-Chris/vuex-iframe-sync

Zoid (a library maintained by payPal, very solid approach but tricky to set up with Vue) https://github.com/krakenjs/zoid

Further info on how to set up zoid with Vue: https://github.com/krakenjs/zoid/issues/296

PostRobot (Haven't tried this one but also a solid option, probably much easier than zoid) https://github.com/krakenjs/post-robot

Good luck, and please let me know if you find any other approach that works!