Vue 3 + Module Federation: Implementing modular Vue 3 applications

Question

I'm trying to build a simple micro frontend example using Vue3 and Module Federation, but I'm running into conflict issues.

I have the code here: https://github.com/ghalex/mf-example

There are only two micro frontends:

• Container (Vue3)
• Authorization (Vue3)

My problem is that when I import the App.vue component:

// index.js - in container
import App from './components/App.vue'

// indexAuth.js - in auth
import App from './components/App.vue'

When loading the module into the container in the auth module, the App.vue component was overwritten.

Are there any webpack settings I'm missing to ensure each component is loaded individually?

Answer 1

I found the problem, it is a bug of webpack-dev-server v4. I downgraded to v3 and everything is working fine.