Vuetify Layout with Router

index.html

<div id="app">
  <v-app>
    <v-navigation-drawer
      app
      clipped
    >
      <v-list>
        <v-list-item
          v-for="i in 3"
          :key="i"
          :to="{path: '/page' + i}"
        >
          <v-list-item-action>
            <v-icon>mdi-{{ icons[i-1] }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Page {{ i }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    
    <v-app-bar 
      app
      clipped-left
    >
      <v-toolbar-title>App Bar</v-toolbar-title>
    </v-app-bar>
    <v-content>
      <v-container fluid>
        <v-fade-transition mode="out-in">
          <router-view></router-view>
        </v-fade-transition>
      </v-container>
    </v-content>      
  </v-app>
</div>

script.babel

// Looking for v1.5 template?
// https://codepen.io/johnjleider/pen/GVoava

Vue.use(VueRouter)

let component1 = {
  template:`<div class="title">Page 1</div>`
}
let component2 = {
  template:`<div class="title">Page 2</div>`
}
let component3 = {
  template:`<div class="title">Page 3</div>`
}

let router = new VueRouter({
  routes: [
    {
      path: '/page1',
      name: 'Page 1',
      component: component1,
    },
    {
      path: '/page2',
      name: 'Page 2',
      component: component2,
    },
    {
      path: '/page3',
      name: 'Page Three',
      component: component3,
    },
    { path: '*', redirect: '/page1' }
  ]
})

new Vue({
  el: '#app',
  router,
  vuetify: new Vuetify(),
  data: () => ({
    icons: ['widgets', 'home', 'heart']
  })
})

scripts

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet" />

vuetify-layout-with-router.markdown

Vuetify Layout with Router

A Pen by John Leider on CodePen.

License.