Custom extend layout is loading default layout before changing to custom one
Closed this issue · 4 comments
mpocin commented
Dear @ktquez,
I configured your plugin as below:
App.vue
<template>
<div id="app">
<vue-extend-layouts>
</vue-extend-layouts>
</div>
</template>
<script>
import VueExtendLayouts from 'vue-extend-layout'
export default {
name: 'App',
components: {
'vue-extend-layouts': VueExtendLayouts
}
}
</script>
src/layouts/default.vue
<template>
<div id="default">
<v-app>
<app-sidebar>
</app-sidebar>
<app-toolbar>
</app-toolbar>
<main>
<v-content fluid>
<app-header>
</app-header>
<div class="page-wrapper-default">
<router-view :key="$route.fullPath">
</router-view>
</div>
</v-content>
<app-footer>
</app-footer>
</main>
</v-app>
</div>
</template>
<script>
import ...
export default {
name: 'default',
data () {
return {...},
components: {...},
}
</script>
<style scoped>
</style>
src/layouts/public.vue
<template>
<div id="public">
<v-app id="public">
<main>
<v-content fluid>
<div class="page-wrapper-public">
<router-view>
</router-view>
</div>
</v-content>
</main>
<app-footer>
</app-footer>
</v-app>
</div>
</template>
<script>
import ...
export default {
name: 'public',
data () {
return {...}
},
components: {...}
}
</script>
<style scoped>
</style>
routes.js
...
export default [
{
path: '/dashboard',
name: 'Dashboard',
meta: { breadcrumb: true },
component: () => import('@/containers/DashboardPage')
},
{
path: '/survey/questionnaire/:link([a-zA-Z0-9=?&%]+)',
name: 'Questionnaire',
meta: { layout: 'public' },
component: loadPage('survey', 'SurveyQuestionnairePage')
},
// wildcard router redirect
{
path: '*',
meta: { layout: 'public' },
redirect: {
name: 'NotFound'
}
},
// errors pages
{
path: '/404',
name: 'NotFound',
meta: { layout: 'public' },
component: loadPage('error', 'NotFoundPage')
}
]
But during the render of the pages that have layout: public, the default layout is loaded and then the public layout. This behavour allows me to see the toolbar component of the default layout.
I noticed this at the VueDevTools (on section Components):
<Root>
<App>
<VueExtendLayout2> (props: default, path: layouts, meta: layout: public)
<Public> (meta: layout: public)
<VApp>
<VContent>
<AppFooter>
Do you have any idea what is happening?
Thanks! ^^
ktquez commented
Do you have how to make a video, or gif or upload online?
