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

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 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 -

Module entry file

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.

Did you find this article valuable?

Support MechCloud by becoming a sponsor. Any amount is appreciated!