Kickstarting Micro Frontends with Vue 3: A Beginner’s Guide

Micro frontends are gaining popularity to build scalable and maintainable web applications.

In this guide, we’ll walk through the steps to kickstart your micro frontend journey using Vue 3.

Vue 3 is a powerful JavaScript framework that makes it easy to develop modular and efficient user interfaces.

Note: Every time restart project after update webpack.config.js.

Step 1: Set Up Your Micro frontend Project.

• Start by creating a micro frontend project folder with name mf-setup.
• Go to mf-setup folder.

Step 2: Set Up Your Vue 3 Project.

• Start by creating a micro frontend project by running:

npx create-mf-app app-name

• We will create 2 projects: (1)Host, (2)Remote.

Host project settings

Remote project settings

Step 3: Folder structure look like below:

mf-setup

Step 4: Open Host and Remote folder in different terminal and run below command to run setup:

npm run start

Host started on 8080 and Remote started on 8081 port.

Step 5: Create new shared component Header in remote project:

Header.vue (Code preview)

Step 6: Add following lines in webpack.config.js of remote project.

exposes: {
  './Header': "./src/Header.vue"
},

• Add above lines in plugins block:

Plugins configuration (Remote)

Check link http://localhost:8081/remoteEntry.js. It displays entries.

Step 7: Add following lines in webpack.config.js of host project.

remotes: {
  remote: "remote@http://localhost:8081/remoteEntry.js"
},

Here in remote@http://localhost:8081/remoteEntry.js, remote is name which is used in remote project’s webpack.config.js file.

Plugins configuration (Host)

• Now, Header.vue component is ready to use in Host project.

Step 8: Import Header.vue component in host project from remote project.

• In Host project, go to App.vue and import with following path.

import Header from 'remote/Header';

App.vue (Code preview)

Host project (output)