Vue.js - Multiple Layouts

App.vue

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

<script>

export default {
  name: 'App'
}
</script>

<style lang="scss">

</style>

DashboardLayout.vue

<template>
  <v-app class="blue-grey lighten-5 client-dashboard">
    <v-navigation-drawer
      v-model="drawer"
      fixed
      left
      clipped
      app
      class="hidden-md-and-up"
    >
      <v-list dense>
      </v-list>
    </v-navigation-drawer>

    <v-container grid-list-md text-xs-center>
      <v-layout row wrap align-center justify-center offset-xs1>
        <v-flex xs12 sm10 md8>
          <router-view></router-view>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>

<script>

export default {
  name: 'Dashboard',
  data () {
    return {
      drawer: null
    }
  }
}
</script>

<style lang="scss">
 @import '../../design/scss/dashboard/index.scss';
</style>

FrontLayout.vue

<template>
  <div class="front-layout">
      <router-view></router-view>
  </div>
</template>

<script>
import Loading from '@src/components/Loading'

export default {
  name: 'FrontLayout'
}
</script>

<style lang="scss">
  @import '../../design/scss/front/index.scss';
</style>

routes.js

import Front from '@src/views/layouts/FrontLayout'
import Dashboard from '@src/views/layouts/DashboardLayout'
import Login from '@src/views/Login'
import Signup from '@src/views/Signup'

export default [
  {
    path: '/front',
    name: 'layout_front',
    component: Front,
    children: [
      {
        path: '/login',
        name: 'login_path',
        component: Login,
        meta: {
          guest: true
        }
      },
      {
        path: '/cadastro/:id',
        name: 'signup_path',
        component: Signup,
        meta: {
          guest: true
        }
      }
    ]
  },
  {
    path: '/',
    name: 'layout_dashboard',
    component: Dashboard,
     children: [
        // ROTAS DO DASHBOARD
     ]
  }
]