Refactor: move (mocked) content type filter to its own component

components/contentTypeFilter.vue

+<template>
+  <div class='tabs is-toggle is-toggle-rounded is-centered content-filter-toggle'>
+    <ul>
+      <li class='is-active'>
+        <a>
+          <span class='icon is-small'><i class='fa fa-file'></i></span>
+          <span>Articles</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <span class='icon is-small'><i class='fa fa-photo'></i></span>
+          <span>Photos</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  /* Nothing yet. */
+}
+</script>
+
+<style>
+.content-filter-toggle.tabs {
+  font-size: 1.5vmax;
+  margin-top: -1.5vmax;
+  margin-bottom: 4vmax;
+}
+</style>

pages/index.vue

 <template>
   <div>
     <!-- Site header -->
-    <indieHeader @followButtonPress='followModalActive = true' />
+    <indie-header @followButtonPress='followModalActive = true' />
 
     <!-- Tabs with hard-coded content in first. -->
     <b-tabs position="is-centered" class="block">
       <b-tab-item label="Me">
 
         <!-- Filter by content type -->
-        <div class='tabs is-toggle is-toggle-rounded is-centered content-filter-toggle'>
-          <ul>
-            <li class='is-active'>
-              <a>
-                <span class='icon is-small'><i class='fa fa-file'></i></span>
-                <span>Articles</span>
-              </a>
-            </li>
-            <li>
-              <a>
-                <span class='icon is-small'><i class='fa fa-photo'></i></span>
-                <span>Photos</span>
-              </a>
-            </li>
-          </ul>
-        </div>
+        <content-type-filter />
 
         <!-- Vue Quill Editor -->
         <div class='compose'>
@@ -75,7 +60,7 @@
           <div class='control'>
             <no-ssr>
               <vue-password v-model='password' classes='input'>
-                <template slot="password-toggle" scope="props">
+                <template slot="password-toggle" slot-scope="props">
                   <button class="button VuePassword__Toggle"
                           type="button"
                           v-on:click = "props.toggle"
@@ -104,11 +89,13 @@ import 'font-awesome/css/font-awesome.min.css'
 
 import indieHeader from '~/components/indieHeader'
 import followModal from '~/components/followModal'
+import contentTypeFilter from '~/components/contentTypeFilter'
 
 export default {
   components: {
     indieHeader,
-    followModal
+    followModal,
+    contentTypeFilter
   },
 
   computed: {
@@ -217,14 +204,6 @@ nav {
   font-size: 3vmax;
 }
 
-/* Content filter toggle */
-
-.content-filter-toggle.tabs {
-  font-size: 1.5vmax;
-  margin-top: -1.5vmax;
-  margin-bottom: 4vmax;
-}
-
 /* Modal: currently unused */
 
 .modal .tabs {