Part 1 - How to create a vue based generic component for MechCloud Page Designer

Introduction

This tutorial is first in a series of tutorials where we will explore how a generic component for MechCloud Page Builder can be created and consumed to build stunning pages. You can find the complete code for the component, which we will be creating in this tutorial, in this folder of mechcloud-demo-microapp1 repository.

Creating a generic component

In order to onboard a generic component in MechCloud Page Builder, two components should be created -

• First component is the component itself which you want to use in a site page.

• Second component is a form to manipulate the configuration of above component. The name of this form component should be in <component_name>Props.vue format. E.g. if you are creating a SFC component called Cmpnt1.vue then the name of its associated form component MUST be Cmpnt1Props.vue.

Let's create a simple component called RktH2.vue which renders a <h2> tag. Here is the code for this component -

<template>
   <h2 v-text="msg"></h2>
</template>

<script setup>
   defineProps({
      msg: String
   })
</script>

Everything in the above code is standard vuejs stuff and there is nothing specific to MechCloud Page Builder. Now let's create corresponding form component for this component. Here is the code for same -

<template>
   <div 
      class="mc-controls"
   >
      <mc-text 
         label="Message" 
         v-model="selectedControl.metadata.props.msg" 
      />
   </div>
</template>

<script setup>
   import { 
      inject
   } from 'vue'

   const selectedControl = inject('selectedControl')
</script>

selectedControl is a ref which points to the selected component (e.g. rkt-h2) in the first column of the page builder as shown below -

It has following shape/contract which you can use to manipulate various configurations for the selected component in the associated form component -

const selectedControl =  {
    id: <unique_id>,
    parentId: <parent_id>,
    name: <component_name>,
    metadata: {
        props: <component_props>,
        classes: [],
        styles: {}
    },
    children: []
}

In our case RktH2.vue has only one prop called msg and since properties of a component in the above contract are exposed under metadata attribute, we will need to bind this prop to selectedControl.metadata.props.msg attribute in order to update this property for the selected component in the middle section (second column) of MechCloud page builder.

Summary

In this tutorial we created a simple generic component which renders a <h2> tag. This is how you can use this component in the page builder -