Create your own Vue micro frontend architecture with VueMS library

VueMS — a simple library to transform a monolithic Vue application into an application based on micro frontend architecture.

Nowadays, the creation of a front-end project is simplified. We have a lot of help from the frameworks, which support us in many aspects of designing and building applications. The architecture of such solutions is already imposed and thoughtful, so it is enough to stick to certain rules and the construction of the project will go well.

Framework-based structures have a monolithic architecture, and unfortunately this kind of approach is not always suitable for our project. Sometimes instead of a typical monolithic application we need a more complex approach based on a micro frontend. I wrote about monolithic architecture and micro frontend in my previous article, so here I won’t go into this topic.

Product Experience Management Platform

Ergonode is a project that has been directed towards micro service from the very beginning. The application is divided into backend part, which provides API and headless front-end part. Although backend division into microservices is quite a popular approach, it’s not exactly a front-end microservice. This approach is called micro frontend — not so popular, and not so easy to use.

While designing front-end applications we wanted to use Vue and Nuxt as our leading technologies and we didn’t really want to frame it into some overly complicated tools. We wanted to stay in one framework and keep the technologies in use to a minimum.

VueMS process

We collected all the technological and business requirements and on this basis we came up with an architecture concept that met all our objectives.

The first stage was to determine whether the application based on Vue and Nuxt can be expanded and divided into business contexts. Unfortunately, already at this stage we hit the wall. We were able to expand the application with small parts and fragments that complemented our application, but we could not completely separate the business context into a separate module. Nuxt and Vue allows you to add plug-ins, components and other smaller pieces, but does not allow you to separate whole pages and complex structures building the application from the pieces. We had a modular approach in our heads, which allowed us to expand the application in any way we wanted from completely independent pieces.

The next stage was to provide mechanisms that allow at the stage of implementation of the application to limit the modification of the modules’ cores and easy delivery and versioning of the modules. The implementation team should be able to install the application and connect any number of modules from any source. The teams should be able to overwrite the core modules with their own and expand the application in any way.

The only tool that will allow us to maintain independence of our modules, easy access and versioning was the NPM platform. Thanks to the NPM platform we can quickly find a package, install it in the blink of an eye, and package update is limited to update its version. The most important thing here is that the installed packages are unmodifiable.

Looking for a solution, we came across Nuxt mechanics that allow us to extend the application with modules placed in NPM, but such modules are quite limited. We decided to use this mechanism and based on it create a tool that would help us reach our destination. This is how the VueMS library was created, meeting all our business and technology needs.

@ergonode/vuems

VueMS operation

VueMS is a library based on Vue + Nuxt technology, which extends the mechanisms of these technologies and provides a completely new functionality, which is the micro service structure. All the mechanics and functionality of Vue and Nuxt are fully preserved and integrated with the new approach. Installation of VueMS does not impose changes but adds new possibilities. When building applications we can still use a monolithic structure and if we want we can use external modules. We can also completely move to a micro frontend structure and divide the application into separate business contexts as we see fit.

The modules can have a rconnection with each other or be completely independent, and all this depends only on the developers of the modules. Each module can act as a separate mini application that has everything that a monolithic application based on Vue and Nuxt. Modules can have pages with routing, independent components, plugins, and their own store (Vuex).

VueMS installation

VueMS was created for projects based on Vue and Nuxt, so these two technologies are essential for the library to work properly. Just create a project according to the instructions of these technologies and then install VueMS to the project.

npm i @ergonode/vuems

After installing the package in the project we have to add the appropriate configuration in the Nuxt configuration file (nuxt.config.js) in “buildModules” section:

buildModules: [
 '@ergonode/vuems',     
],

These steps are enough for Nuxt to start working with the VueMS library.

The most important thing is to properly configure the VueMS library, because without it the application will not work correctly.

vuems: {         
  required: [             
   '@ergonode/core',         
  ],         
  modules: {      
   local: [   
    '@ergonode/dashboard',  
   ],  
   npm: [   
    '@ergonode/core',  
   ],     
  },         
},

Full configuration is described in VueMS documentation, but here I will describe the most important settings needed to run the application. One of the key things we need to put in the configuration is a list of modules that we have in the application. List of modules is added in “modules” option in appropriate structure:

• local — modules placed locally in the project. They are not hosted anywhere — the content of the modules is locally located in the project.
• npm — modules downloaded from the NPM service — the content of the modules is unmodifiable.

The names of the modules are directly related to their placement in the directory. Local modules are placed in the “modules” directory and are downloaded from it. Module naming is modelled on the NPM service and based on the NPM scope concept.

Another important option is “required”, which helps to determine which modules are required for the correct operation of the application. Required modules are often those that provide the base for building other modules and without them operation is impossible.

Creating a module

To properly create a module we have to stick to some rules, without which the module will not work properly. As a module can be any mechanism and its size is arbitrary, we can put any structure in it. A module can be a single component or a small plug-in, but also a huge functionality.

The structure of the modules is defined by the configurations of the VueMS library and can be changed. The default directory names are:

export const DIRECTORIES = {
    assets: 'assets',
    components: 'components',
    config: 'config',
    layouts: 'layouts',
    middleware: 'middleware',
    pages: 'pages',
    plugins: 'plugins',
    store: 'store',
};

When creating a module locally it is enough that we will place the directories in the main space, but when it comes to modules hosted in NPM, all directories must be placed in the “src” directory.

For the module to work properly we need to add some things:

• index.js file — is needed for the Nuxt mechanism to properly load the module. It is located in the project main directory.
• config directory— stores all possible configurations for the module. It must have an index.js file.

Summary

By adding these configurations correctly, we are able to take full advantage of the application based on microservice architecture. All details related to the documentation are described here.

Introduction