layout.vue

<template>
  <v-app>
    <v-bar
      app="top"
      color="blue"
      height="16"
    >

    </v-bar>

    <v-bar
      app="top 1"
      color="blue lighten-1"
      height="120"
    >
    </v-bar>
    <v-bar
      app="top 2"
      color="blue lighten-3"
      height="48"
    >
    </v-bar>

    <v-bar
      app="left"
      color="indigo"
      width="220"
    >
    </v-bar>

    <v-bar
      app="left 1"
      color="indigo lighten-1"
      width="80"
    >
    </v-bar>

    <v-bar
      app="left 2"
      color="indigo lighten-3"
      inset
      width="40"
    >
    </v-bar>

    <v-bar
      app="right 2"
      color="cyan lighten-3"
      width="25"
    >
    </v-bar>

    <v-bar
      app="right 1"
      color="cyan lighten-1"
      width="60"
    >
    </v-bar>

    <v-bar
      app="right"
      color="cyan"
      width="220"
    >
    </v-bar>

    <v-content>
      <v-container grey lighten-2 fill-height fluid>
        <v-layout>
          <v-flex text-xs-center>
            <!-- <pre>{{ $vuetify.application }}</pre> -->
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>

    <v-bar
      app="bottom"
      color="purple"
      height="24"
    >
    </v-bar>

    <v-bar
      app="bottom 1"
      color="purple lighten-2"
      height="64"
    >
    </v-bar>
  </v-app>
</template>

<script>
  // top, top left, top left 0, top left 1, top 0, top 1
  // bottom, bottom right, bottom right 0, bottom 0 bottom 1
  // left, left 0, left 1
  // right, right 0, right 1
  export default {
    data: () => ({
      //
    })
  }
</script>