syncobox_layout_backstage v0.1.24

syncobox-layout-backstage

Provides general layout for syncobox backstage to each micro front-end services.

Install

Using @vue/cli v4.0.0 above, you can select vue-router as pre-set plugin. Then as following:

vue add vuetify
npm i syncobox_layout_backstage

otherwise

npm i vuetify
npm i vue-router
npm i syncobox_layout_backstage

update

update packages to latest version

npm update syncobox_layout_backstage

Folder Structure

│
├── layouts
│   ├── Main.vue
│   └── FullPage.vue
├── views
│   ├── Home.vue
│   ├── About.vue
│   └── pages ──── Login.vue
│　　　　　　　 └── Error404.vue
├── router
│   └── index.js
│
├── App.vue
├── main.js
│

Get started

App.vue

//main.js

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: "App"
};
</script>

Import in main.js

//main.js

import Vue from 'vue';
import syncobox_layout from 'syncobox_layout_backstage';
import "syncobox_layout_backstage/dist/syncobox-layout.css"

Vue.use(syncobox_layout);

new Vue({
  ...
});

router/index.js

//router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

const originPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originPush.call(this, location, onResolve, onReject);
  return originPush.call(this, location).catch(err => err);
};

Vue.use(VueRouter);

let projectName = "SyncoBox";

const routes = [
  {
    path: "",
    component: () => import("../layouts/Main.vue"),
    children: [
      {
        path: "/",
        name: "Home",
        component: () => import("../views/Home.vue")
      },
      {
        path: "/about",
        name: "About",
        component: () => import("../views/About.vue")
      }
    ]
  },
  {
    path: "",
    component: () => import("../layouts/FullPage.vue"),
    children: []
  },
  // Redirect to 404 page, if no match found
  {
    path: "*",
    redirect: "/pages/error-404"
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

router.afterEach((to, from, next) => {
  document.title = to.name + " - " + projectName;
});

export default router;

Main.vue

//Main.vue

<template>
  <sb-main
    :iconUrl="iconUrl"
    :textUrl="txtUrl"
    :navMenuItems="navMenuItems"
    :navbarVerticalItems="navbarVerticalItems"
  ></sb-main>
</template>

<script>
export default {
  data() {
    return {
      //1. set url of logo's icon and logo's text (url expecting in public)
      // icon: 44 * 50
      // text: 130 * 29
      iconUrl: "/logo-icon.png",
      txtUrl: "/logo-text.png",

      //2. set left side menu's data
      navMenuItems: [
        {
          url: "/",
          name: "Home",
          icon: "mdi-home-variant",
          text: "Main page",
          i18n: "home",
          submenu: []
        },
        {
          url: "/about",
          name: "About",
          icon: "mdi-id-card",
          text: "About page",
          i18n: "about",
          submenu: []
        }
      ],

      //3. set right side account's menu data
      navbarVerticalItems: [
        {
          url: "/pages/profile",
          name: "profile",
          icon: "mdi-account-badge",
          text: "Profile",
          i18n: "profile"
        },
        {
          url: "/pages/login",
          name: "logout",
          icon: "mdi-logout",
          text: "Logout",
          i18n: "logout"
        }
      ]
    };
  }
};
</script>

FullPage.vue

//FullPage.vue

<template>
  <sb-full-page></sb-full-page>
</template>

navMenuItems.json

[
  {
    "header": "",
    "url": "/",
    "name": "Home",
    "icon": "mdi-home-outline",
    "text": "Main page",
    "i18n": "home",
    "submenu": [
      {
        "header": "main",
        "url": "/",
        "name": "Home",
        "icon": "mdi-home-outline",
        "text": "Main page",
        "i18n": "home",
        "submenu": [
          {
            "header": "main",
            "url": "/",
            "name": "Home",
            "icon": "mdi-home-outline",
            "text": "Main page",
            "i18n": "home",
            "submenu": []
          }
        ]
      }
    ]
  },
  {
    "header": "main",
    "url": "/about",
    "name": "About",
    "icon": "mdi-id-card",
    "text": "About page",
    "i18n": "about",
    "submenu": []
  }
]

navbarVerticalItems.json

[
  {
    "url": "/pages/profile",
    "name": "profile",
    "icon": "mdi-account-badge-outline",
    "text": "Profile",
    "i18n": "profile"
  },
  {
    "url": "/pages/login",
    "name": "logout",
    "icon": "mdi-logout",
    "text": "Logout",
    "i18n": "logout"
  }
]