Skip to content

Instantly share code, notes, and snippets.

@darkylmnx
Last active July 30, 2018 22:11
Show Gist options
  • Save darkylmnx/6754e54db6eb43bf4acccf116745735e to your computer and use it in GitHub Desktop.
Save darkylmnx/6754e54db6eb43bf4acccf116745735e to your computer and use it in GitHub Desktop.
Sub Layouts with Vue
<template>
<!-- this layout will not have any header or general things to all layouts -->
<div>
<h2> i'm a sub layout </h2>
<slot />
</div>
</template>
<template>
<div>
<the-header />
<h1> i'm layout A </h1>
<!-- let's use the sub layout -->
<a-sub-layout>
<slot />
<!-- here we are doing slot transfer, the main component will appear within the sub layout -->
</a-sub-layout>
<!-- here we have a footer -->
<the-footer />
</div>
<template>
<template>
<div>
<the-header />
<h1> i'm layout B</h1>
<aside> i'm a side bar</aside>
<slot />
<!-- no sub layout -->
<!-- the main compoent will apppear hear as a slot -->
</the-footer />
</div>
</template>
<template>
<div>
<the-header />
<h1> i'm layout C </h1>
<!-- let's use the sub layout -->
<a-sub-layout>
<slot />
<!-- here we are doing slot transfer, the main component will appear within the sub layout -->
</a-sub-layout>
<!-- no footer here -->
</div>
<template>
// as you will notice
// we never use a sub layout directly
// sub layouts are only used to contain common markup for main layouts
new VueRouter({
routes: [
{
name: 'home',
path: '/',
meta: {layout: 'LayoutA' },
component: require('@/pages/Home.vue').default // load sync mode
},
{
name: 'some-random-page',
path: '/bla1',
meta: {layout: 'LayoutC' },
component: () => import('@/pages/Random1.vue')
},
{
name: 'some-random-page-2',
path: '/bla2',
meta: {layout: 'LayoutB' },
component: () => import('@/pages/Random2.vue')
}
]
})
<template>
<footer> hey i'm the footer </footer>
</template>
<template>
<header> hey i'm the header </header>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment