Named Slots: Page Layout

by Alex Kyriakidis

HTML

<div id="app">
  <page-layout>
    <template #header>
      <h1>Here might be a page title</h1>
    </template>

    <p>A paragraph for the main content.</p>
    <p>And another one.</p>

    <template #footer>
      <p>Here's some contact info</p>
    </template>
  </page-layout>
</div>


<script type="text/x-template" id="page-layout-template">
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</script>

CSS

.container {
  max-width: 1920;
  padding: 10px;
}

header {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}

footer {
  width: 100%;
  margin-top: 50px;
  text-align: center;
}

Vue

Vue.component('page-layout', {
	template: '#page-layout-template'
})

new Vue({
  el: "#app"
})