Part 1 - How to create a vue based micro app for MechCloud

Introduction

This tutorial is first in a series of tutorials where we will dive deep into the process of creating a micro app for MechCloud. Please feel free to read this post which describes how micro app based architecture could be a game changer for vuejs based applications and different types of components which can be created under a micro app for MechCloud.

Creating a micro app

Project structure of a micro app is very similar to how you will develop a vuejs components library with few exceptions. You can find a fully working micro app at https://github.com/mechcloud/mechcloud-demo-microapp1 which will be updated multiple times in the coming days. You can launch MechCloud SaaS application from https://mechcloud.io landing page and consume this micro app in a (web)site created with the SaaS application by following instructions in the README.md file of this repository.

Ideally you add vue and other packages (e.g. pinia) as dev dependencies and include these under peer dependencies in package.json file of a components library project as shown below -

{
    ...
    "devDependencies": {
        "pinia": "^2.1.7",
        "vue": "^3.4.23"
    },
    "peerDependencies": {
        "pinia": "^2.1.7",
        "vue": "^3.4.23"
    }
    ...
}

Then you will exclude these dependencies from the production build using following configuration in vite.config.js file -

export default defineConfig({
    build: {
        rollupOptions: {
            external: [
                'vue',
                'pinia'
            ]
        }
    }
})

Here are changes required in various files in order to convert such a components library project to a micro app.

Changes for vite.config.js file -

• value of fileName attribute under build.lab MUST be vue-components.

• vue and other dependencies (e.g. pinia) should NOT be excluded from the production build.

• vue and vue-demi should be declared as virtual modules as shown below -

export default defineConfig({
    build: {
        lib: {
            entry: resolve(__dirname, "src/index.js"),
            fileName: "vue-components"
        }
    },
    plugins: [
        vue(),
        {
            ...virtual({
                'vue': `
                    export const shallowRef = Vue.shallowRef
                    ...
                `,
                'vue-demi': `
                    export const getCurrentInstance = Vue.getCurrentInstance
                    ...
                `
            }),
            enforce: 'pre'
        }
    ]
})

You can find a sample vite.config.js file for at https://github.com/mechcloud/mechcloud-demo-microapp1/blob/main/vite.config.js.

Changes for package.json file -

• vue and other dependencies (e.g. pinia) should be declared as normal dependencies and not as dev dependencies. You can find a sample package.json file for a micro app at https://github.com/mechcloud/mechcloud-demo-microapp1/blob/main/package.json.

• Make sure that the value of module attribute in package.json file is "./dist/vue-components.mjs".

Module entry file

• All the components in the micro app must be installed as global components. Code for same is present in https://github.com/mechcloud/mechcloud-demo-microapp1/blob/main/src/plugins/RktVueComponentsPlugin.js. You can rename this module to any name you prefer.

• Make sure you are exporting above plugin with an alias called CustomComponentsPlugin in the module entry file (src/index.js) -

export { default as CustomComponentsPlugin } from './plugins/RktVueComponentsPlugin'

Summary

This post provides basic steps on how to create a micro app for MechCloud. In future posts, we will cover how a user can create different types of components (frame, layout etc) in a micro app and consume these in MechCloud.