Implementing Layouts and Pages in Vue - TachyonCMS/tachyon-framework GitHub Wiki

This post covers routing to defined layouts and pages in Vue. We'll start with a basic app created through the Vue CLI and implement routes that define the page and template.

If you created the app through the Vue CLI and vue add router you will have a route file similar to this.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

It enables code splitting out-of-the-box.

// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

1. The component is responsible for all the output. We can still implement reuse within each component, but it could be hard to maintain consistency between similar pages.

2. The routes are all in one file. That makes creating reusable features with routing harder.

We will implement the concept of layouts and pages. There will be a handful of layouts that define the app bar, side menu and footer. These layouts will be shared amongst pages. The pages will define the specific content or functionality that the visitor is interested in.

The routes will be broken up, so each feature can maintain its own routes. This also aids in ensuring there are no route collisions.

Originally, the code used a file in /views to provide unique content.

'../views/About.vue'

We'll change the name of /views to /pages and add a /layouts directories.

There only a couple of small changes need to support this behavior.

1. Update App.vue

2. Update /router/index.js

3. Add new route files

Initially, you will see a template like this defined in a default Vue CLI app.

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

We'll change that to:

<template>
  <v-app>
    <component :is="currentLayout" v-if="isRouterLoaded">
      <transition name="fade" mode="out-in">
        <router-view />
      </transition>
    </component>
  </v-app>
</template>

We're using the Vuetify v-app

<v-app>
</v-app>

We'll map the component to the routedLayout after the router is loaded.

<component :is="routedLayout" v-if="isRouted">

We then need to import each layout and include it in the exported components.

// Layouts
import appLayout from './layouts/AppLayout'
import landingLayout from './layouts/LandingLayout'
import errorLayout from './layouts/ErrorLayout'

We want to remove any existing routes and move to loading routes from collections defined in individual files.