Skip to content

Instantly share code, notes, and snippets.

@plcosta
Created December 18, 2018 23:29
Show Gist options
  • Save plcosta/5ab8d8084dd187b51c467206d3261065 to your computer and use it in GitHub Desktop.
Save plcosta/5ab8d8084dd187b51c467206d3261065 to your computer and use it in GitHub Desktop.
Vue.js - Multiple Layouts
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="scss">
</style>
<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>
<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>
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
]
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment