TS Component Example

SDiff.vue

<template>
  <small
    v-if="diff !== 0"
    :class="previous < current ? 'text-danger' : 'text-success'"
  >
    £{{ (previous - current) | format(0) }}
    <template v-show="lastUpdated !== null">
      vs
      {{ formatDate(lastUpdated) }}
    </template>
  </small>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import SDiff from "@/components/SDiff.vue";
@Component
export default class SDiffText extends Vue {
  @Prop({ default: 0 })
  private previous!: number;
  @Prop({ default: 0 })
  private current!: number;
  @Prop({ default: null })
  private lastUpdated!: Date;

  private get diff() {
    return Math.round(this.previous - this.current);
  }

  private formatDate(date: string) {
    const actualDate = new Date(date);
    return actualDate
      .toLocaleString("en-gb", {
        month: "short",
        year: "2-digit"
      })
      .toUpperCase();
  }
}
</script>

View.vue

<template>
<div>
  <h1>What's the diff?</h1>
  <s-diff-text
    :previous="10"
    :current="15"
    :lastUpdated="2019-06-04"
  ></s-diff-text>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import SDiffText from "@/components/SDiffText.vue";

@Component({
  components: {
    SDiffText
  }
})
</script>