Introduction

This tutorial is second 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 with two way binding

In the first tutorial here, we created a simple component which has only one prop called msg and which can be manipulated using the associated form for this component only. This makes sense for those things (e.g. background color, link url etc) which can't be edited directly or not visible in the Preview (middle) column of the page builder. However, for other types of components (e.g. heading), which has visible text in the Preview column, we can modify the text directly in the Preview column. This makes it easy and faster to update the visible text on the page.

We can achieve this by using a custom directive called v-model-text which is based on v-text built-in directive of vuejs but unlike the latter, it creates two way binding between this component's value and corresponding field in the component form. Heer is the updated code of RktH2.vue with this change -

<template>
   <h2 v-if="isEditMode" v-model-text:msg="msg"></h2>
   <h2 v-else v-text="msg"></h2>
</template>

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

   defineProps({
      msg: String
   })

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

With this change, text of <h2> tag can be changed in both the preview as well as the component properties columns (third column) of a page builder. Here is the demo for the same -

Design vs Edit mode

You can launch a website in the design mode by appending mcPageMode=design query string to the uri of any page under it. Once in the design mode, navigation will work like the real website but some component (e.g. a link with editable label but rendered as a button) will not work as expected. In such cases you can disable the edit mode which will make a site page read only in the Preview column and so all parts of it can be tested like the real website. However, this will only work if you have coded your component to use the edit mode (see example above).

Summary

In this tutorial, we updated a simple generic component to implement two-way binding for easier text editing in the preview column. Launching a website in design mode allows testing components like the real website, and disabling edit mode makes the page read-only in the preview column.