Module Federation In Vuejs Applications

  • With a smaller and more optimized bundle size, micro-frontends provide an overall better developer and user experience as a result of shared components and dependencies that can be lazy-loaded whenever we want
  • One of the biggest advantages for me is the ability for teams of developers working on that particular product to be able to pick a technology stack of their choice without fear of incompatibility with the other team’s code

How do we split our apps?

These are some ways developers split large apps:

slow down bro
finally, we can code

Proof of concept

We have explained some concepts about micro-frontends and module federation. Now it’s time for a proof of concept.

Set up webpack config

So we have two apps, Company and Shop, which are the same for now. When we survey the file structure, we take a look at the package.json. We have our webpack loader, CSS loader, and all the basic loaders and webpack stuff we need:

Create components to be shared

In our application, the App.vue file will serve as the homepage, so let’s add some markup:

Exposing the header component through the Module Federation plugin

We now have our header in the Company app, we would like to use it in the Shop app. So we head over to the webpack configuration in the Company app:


Sharing App State Between Federation Modules

Let’s say you are using a state manager in your Vue application like Vuex. You might be asking yourself how you might have the same state shared between the two components, and also have it updated. So, let’s install Vuex for both apps:




We have come to the end of this tutorial.

thanks a lot



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store