Countdown.vue component! Created in a vue-cli-3. In order to use it you need typescript ( https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript ) and pug (https://github.com/jaeming/vue-cli-plugin-pug) plugins installed, otherwise you have to convert it to plain html and js. Usage: <Countdown date="June 07, 2019"/>

Countdown.vue

<template lang="pug">
  .countdown-to
    .container
      .row
        .col-sm
          p.digit {{ days | two_digits }}
          p.text(v-t="'days'")
        .col-sm
          p.digit {{ hours | two_digits }}
          p.text(v-t="'hours'")
        .col-sm
          p.digit {{ minutes | two_digits }}
          p.text(v-t="'minutes'")
        .col-sm
          p.digit {{ seconds | two_digits }}
          p.text(v-t="'seconds'")
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
  filters: {
    two_digits(value: number) {
      if (value.toString().length <= 1) {
        return "0" + value.toString();
      }
      return value.toString();
    }
  }
})
export default class Countdown extends Vue {
  @Prop() private date!: string;
  now: number = Math.trunc(new Date().getTime() / 1000);

  created() {
    const self = this;
    window.setInterval(() => {
      self.now = Math.trunc(new Date().getTime() / 1000);
    }, 1000);
  }
  get parsedDate() {
    return Math.trunc(Date.parse(this.date) / 1000);
  }
  get days() {
    return Math.trunc((this.parsedDate - this.now) / 60 / 60 / 24);
  }
  get hours() {
    return Math.trunc((this.parsedDate - this.now) / 60 / 60) % 24;
  }
  get minutes() {
    return Math.trunc((this.parsedDate - this.now) / 60) % 60;
  }
  get seconds() {
    return Math.trunc(this.parsedDate - this.now) % 60;
  }
}
</script>

<style scoped>
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400|Roboto:100);

.text {
  color: #1abc9c;
  font-size: 40px;
  font-family: "Roboto Condensed", serif;
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.digit {
  color: #838788;
  font-size: 7em;
  font-weight: 100;
  font-family: "Roboto", serif;
  margin: 10px;
  text-align: center;
}
</style>