Make page title a component

src/App.vue

@@ -40,7 +40,7 @@
     </div>
 
     <div class="max-w-6xl mx-auto px-4">
-      <h1 class="font-bold text-2xl text-gray-800">All Projects</h1>
+      <page-title>All Projects</page-title>
     </div>
 
     <router-view/>

src/components/PageTitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <h1 class="font-bold text-2xl text-gray-800">
+    <slot></slot>
+  </h1>
+</template>

src/main.js

@@ -4,6 +4,8 @@ import router from './router'
 
 Vue.config.productionTip = false
 
+Vue.component('page-title', require('@/components/PageTitle').default)
+
 new Vue({
   router,
   render: h => h(App)