Setup micro frontend using Bit

Install bit

First create a workspace that contains env. We will be using bit with vue.js for the setup. It can be used with other frontend libraries as well.

Attached a screenshot of the folder structure after creating workspace and setting up env.

The above setup initialises the workspace. To know more about Bit workspace click here.

Components can be created using templates, as of now bit has 4 vue templates types.

Run the command to check the available templates.

All available vue templates

vue (A vue component template. Can be used for Vue components.)
vue-composable (A vue composable template. Can be used for Vue composables.)
vue-app (A vue application template. Can be used for Vue applications.)
vue-env (A vue env template. Can be used for creating your own Vue env.)

Lets create vue application with name my-app and start the application.

Start the application using following command

Application name my-app-app can be changed by changing the name property value stored in my-app.vue-app.cjs.

When you run the application you can see a counter present on screen. This is the default code present in the template. Delete the unwanted code and library vue-router to the application.

Run the following command to install vue-router and setup vue router in my-app.

Vue router setup guide

I have setup two routes / and /about. After setup is complete both routes should work properly.

Routing is successfully setup if you are able to navigate on different routes.

Create common state management for all apps.

Add pinia as dependency for common/store.

Install pinia

After successfull installation setup pinia.

Go to store.ts in common/store delete all the code from this file and paste below code. This will provide pinia instance to all the applications.

To setup pinia in application go to the apps/my-app/my-app.root.ts and add the following code.

Add routing to the main vue file, go to my-app.vue file and paste the following code.

Create a counter store in common/store/counter.js

Import the store in any app file to test updating values in store, I will import it in apps/my-app/views/HomeView.vue

After successfull import start the project.

You will see a screen like this. if the value displayed is reactive when clicked on button you have successfully setup pinia in your app.

Create another vue application, setup pinia in it and run the application. A common store being accessed by two applications.

apps/my-task/my-task.root.ts

apps/my-task/my-task.vue

run the application

One common store is shared between two different applications my-app and my-task.

Link to code