feat(client): custom layouting

vuejs · Oct 26, 2020 · e0d5416 · e0d5416
1 parent 1f8fa2e
commit e0d5416
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
@@ -21,7 +21,17 @@
     <!-- TODO: make this button accessible -->
     <div class="sidebar-mask" @click="toggleSidebar(false)" />
     <main class="home" aria-labelledby="main-title" v-if="enableHome">
-      <Home />
+      <Home>
+        <template #hero>
+          <slot name="home-hero" />
+        </template>
+        <template #features>
+          <slot name="home-features" />
+        </template>
+        <template #footer>
+          <slot name="home-footer" />
+        </template>
+      </Home>
     </main>
     <main v-else>
       <Page>

diff --git a/src/client/theme-default/components/Home.vue b/src/client/theme-default/components/Home.vue
@@ -26,6 +26,7 @@
     >
       <NavBarLink :item="actionLink" />
     </p>
+    <slot name="hero" />
   </header>
 
   <div
@@ -40,13 +41,15 @@
       <h2>{{ feature.title }}</h2>
       <p>{{ feature.details }}</p>
     </div>
+    <slot name="features" />
   </div>
 
   <div
     v-if="data.footer"
     class="footer"
   >
     {{ data.footer }}
+    <slot name="footer" />
   </div>
 </template>