TitleBar title slot

ui/src/App.vue

@@ -1,60 +1,26 @@
 <template>
   <v-app>
-    <!-- <v-app-bar app color="primary" dark>
-      <div class="d-flex align-center">
-        <v-img
-          alt="Vuetify Logo"
-          class="shrink mr-2"
-          contain
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
-          transition="scale-transition"
-          width="40"
-        />
-
-        <v-img
-          alt="Vuetify Name"
-          class="shrink mt-1 hidden-sm-and-down"
-          contain
-          min-width="100"
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
-          width="100"
-        />
-      </div>
-
-      <v-spacer></v-spacer>
-
-      <v-btn
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar> -->
-
     <v-main>
-      <TitleBar />
+      <TitleBar>
+        <div v-html="title_html" />
+      </TitleBar>
       <HelloWorld />
     </v-main>
   </v-app>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import { Component, Vue } from "vue-property-decorator";
 import HelloWorld from "./components/HelloWorld.vue";
 import TitleBar from "./components/TitleBar.vue";
 
-export default Vue.extend({
-  name: "App",
-
+@Component({
   components: {
     HelloWorld,
     TitleBar,
   },
-
-  data: () => ({
-    //
-  }),
-});
+})
+export default class App extends Vue {
+  private title_html = "<h1>changeme</h1>";
+}
 </script>

ui/src/components/TitleBar.vue

@@ -4,17 +4,17 @@
       <div class="d-flex justify-start slim text-left text-no-wrap">LOGO</div>
 
       <div class="d-flex justify-center text-center mx-auto thw-font">
-        TITLE
+        <slot> <h1>TITLE</h1> </slot>
       </div>
 
       <div class="d-flex justify-end slim text-right text-no-wrap">
         <div class="flex-column">
           <Clock
-            class="d-flex justify-end text-h5 font-weight-light"
+            class="d-flex justify-end font-weight-light text-h6 text-md-h5"
             format="DDD"
           />
           <Clock
-            class="d-flex justify-end text-h4 font-weight-bold"
+            class="d-flex justify-end font-weight-bold text-h5 text-md-h4"
             format="T"
           />
         </div>
@@ -23,7 +23,7 @@
   </v-toolbar>
 </template>
 
-<script>
+<script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import Clock from "./Clock.vue";