vuetify project

App.vue

<template lang="pug">
  div#app
    v-fade-transition(mode="out-in")
      component(:is="component")
        slot
</template>

<script>
const meta = require('./router/meta.json')

export default {
  name: 'App',

  components: {
    defaultLayout: require('./layouts/DefaultLayout').default,
    homeLayout: require('./layouts/HomeLayout').default
  },

  data() {
    return {
      title: ''
    }
  },

  created() {
    const metaData = meta[this.$route.path] || {}
    const section = this.$route.path.split('/')
    let h1 = metaData.h1

    // if (section.length > 2) {
    //   h1 = `
    //       <div class="hidden-sm-and-down">${section[1].charAt(0).toUpperCase()}${section[1].slice(1)} &nbsp;&mdash;&nbsp;&nbsp;
    //       </div><div>${h1}</div>
    //     `
    // }

    this.$store.commit('vuetify/H1', h1)
  },

  computed: {
    component() {
      return this.$route.path === '/' ? 'home-layout' : 'default-layout'
    }
  },

  watch: {
    '$route'() {
      this.setMeta()
    }
  },

  methods: {
    setMeta() {
      if (typeof document === 'undefined') return

      const metaData = meta[this.$route.path] || {}
      const section = this.$route.path.split('/')
      let h1 = metaData.h1

      if (section.length > 2) {
        h1 = `${section[1].charAt(0).toUpperCase()}${section[1].slice(1)} &nbsp;&mdash;&nbsp; ${h1}`
      }

      document.title = `${metaData.title} | RSG`
      document.querySelector('meta[name="description"]').setAttribute('content', metaData.description)

      this.$store.commit('vuetify/H1', h1)
    },
    match(path, regex) {
      return path.match(regex)
    },
    meta(obj) {
      this.title = obj.h1
      this.$store.commit('vuetify/TITLE', obj.title)
      this.$store.commit('vuetify/DESCRIPTION', obj.description)
    }
  }
}
</script>

<style lang="stylus">
  @import './stylus/main'

  // [data-app] > main > .container
  //   min-height: calc(100vh - 156px)

  #app
    transition: .3s ease-in-out
</style>

<style src="../node_modules/mdi/css/materialdesignicons.css"></style>

DefaultLayout.vue

<template lang="pug">
  v-app(toolbar footer dark)
    main-navigation
    main-toolbar
    main
      v-container(fluid)
        transition(name="slide" mode="out-in")
          router-view
    v-footer(fixed)
      v-spacer
      span &copy; Paperless Solutions {{ new Date().getFullYear() }}
      v-spacer
</template>

<script>
  import MainNavigation from '../components/MainNavigation'
  import MainToolbar from '../components/MainToolbar'

  export default {
    components: {
      MainNavigation,
      MainToolbar,
    },

    mounted () {
      this.$vuetify.load(this.onScroll)
    },

    methods: {
      onScroll () {
        if (typeof window === 'undefined') return

        const top = window.pageYOffset ||
          document.documentElement.offsetTop ||
          0
      },
      toTop () {
        window.scrollTo(0, 0)
      }
    }
  }
</script>

HomeLayout.vue

<template lang="pug">
  router-view
</template>

index.js

import Vue from 'vue'
import Router from 'vue-router'

// The meta data for your routes
const meta = require('./meta.json')

// Function to create routes
// Is default lazy but can be changed
function route (path, page) {
  return {
    path: path,
    meta: meta[path],
    component: resolve => import(`../pages/${page}.vue`).then(resolve)
  }
}

Vue.use(Router)

export function createRouter () {
    const router = new Router({
      base: __dirname,
      mode: 'history',
      scrollBehavior: () => ({ y: 0 }),
      routes: [
        route('/', 'Home'),

        route('/hr/guards', 'Guards'),
        route('/hr/guarantors', 'Guarantors'),
        route('/hr/leave-applications', 'LeaveApplications'),
        route('/hr/penalties', 'Penalties'),
        route('/hr/offences', 'Offences'),
        
        route('/ops/clients', 'Clients'),
        route('/ops/deployments', 'Deployments'),
        route('/ops/timesheet', 'TimeSheet'),

        route('/finance/payments', 'Payments'),
        route('/finance/salaries', 'Salaries'),

        route('/reports/attendance', 'Attendance'),
        route('/reports/payments', 'PaymentReport'),
        route('/reports/contract-status', 'Contracts'),
        route('/reports/disciplinary', 'Disciplinary'),
        route('/reports/guards-deployed', 'GuardsDeployed'),
        route('/reports/guards-training', 'GuardsTraning'),
        route('/reports/leave-taken', 'LeaveTaken'),
        route('/reports/ranking', 'Ranking'),

        route('/admin/users', 'Users'),
        route('/admin/locations', 'Locations'),

        route('/profile', 'Profile'),
        route('/guide', 'Guide'),
        route('/feedback', 'Feedback'),

        // Global redirect for 404
        { path: '*', redirect: '/' }
      ]
    })

    return router
}