Introduction

A frame is a component responsible for rendering common areas (e.g. header, footer etc) across all the pages of a site. This is (roughly) equivalent of a wordpress theme and acts as the root component of a site.

This tutorial is first in a series of tutorials where we will develop a simple frame and then modify it to implement advanced features.

Developing a simple frame

As MechCloud is a vuejs based SaaS application, you can create a simple frame by creating a vue SFC (RktFrame1.vue) with following code -

<template>
   <header>
      <strong style="font-size: larger;">Rocket</strong>
   </header>
   <main>
      <mc-render-node />
   </main>
</template>

<script setup>
import { 
   McRenderNode
} from '@mechcloud/piston-ui-sdk'
</script>

In this SFC, we are using a special component called McRenderNode which is equivalent of RouterView component from vue-router package. You can't use Vue Router in any of the MechCloud components as MechCloud has its own implementation for routing.

McRenderNode component is a placeholder which will be replaced by the target page markup at the time of rendering. So when a page under a site is request, MechCloud will check if the site is associated with a frame or not. If it is then it will start rendering from this frame and inject the content of target page at the place of <mc-render-node /> tag.

Summary

In this tutorial, we described steps to develop a simple frame component in Vue.js for MechCloud. The frame acts as the root component of the site and renders common areas like header and footer. We use a special component called McRenderNode to dynamically inject page content into the frame.