Part 2 - How to create a vue based custom Frame for MechCloud

Introduction

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

Adding the top level navigation

In order to add top level navigation, we will use McNavigationLink component which is equivalent of RouterLink component from vue-router package.

<template>
   <header class="mc-flex mc-flex-h-space-between">
      ...
      <ul>
         <li v-for="siteNode in $mcContext.siteMap">
            <mc-navigation-link 
               :title="siteNode.attrs.title"
               uriPrefix=""
               :mapping="siteNode.attrs.mapping" 
            />
         </li>
      </ul>
      ...
   </header>
</template>

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

You can find more details about McNavigationLink component here.

Here we are using $mcContext which is a global property and provides access to metadata about the site being loaded under its siteMap attribute. This global property will be covered in detail in the official MechCloud Website Builder documentation.

Above code will only render first level nodes of a site. If you want multi level navigation based on site nodes hierarchy then you can write a recursive component for the same. An example for same will be provided for RktTailwind frame in the demo micro app repository here.

Demo

Getting the details of logged in user

You can get the details (e.g. email) of logged in user using user attribute of $mcContext global property which you can then show in the header section using following code -

<template>
   <header class="mc-flex mc-flex-h-space-between">
      ...
      <span class="email">{{ $mcContext.user.email }}</span>
   </header>
</template>

Summary

This tutorial covers adding top level navigation using McNavigationLink component in a Vue.js project. It explains how to access site metadata using $mcContext and provides a hint for implementing multi-level navigation.