TS class components

ui/src/components/ClockDisplay.vue

@@ -3,30 +3,24 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import { Component, Prop, Vue } from "vue-property-decorator";
 import moment from "moment";
 
-export default Vue.extend({
-  name: "ClockDisplay",
+@Component
+export default class ClockDisplay extends Vue {
+  private clock = "";
 
-  data: () => ({
-    clock: "",
-  }),
+  @Prop()
+  format!: string;
 
-  props: {
-    format: String,
-  },
+  private update(): void {
+    this.clock = moment().format(this.format);
+  }
 
-  methods: {
-    update(): void {
-      this.clock = moment().format(this.format);
-    },
-  },
-
-  created(): void {
+  private created(): void {
     setInterval(this.update, 1000);
-  },
-});
+  }
+}
 </script>
 
 <style>

ui/src/components/TitleBar.vue

@@ -10,16 +10,15 @@
 </template>
 
 <script>
-import Vue from "vue";
+import { Component, Vue } from "vue-property-decorator";
 import ClockDisplay from "./ClockDisplay.vue";
 
-export default Vue.extend({
-  name: "TitleBar",
-
+@Component({
   components: {
     ClockDisplay,
   },
-});
+})
+export default class TitleBar extends Vue {}
 </script>
 
 <style>