vue-time-ticker

This component provides functionality to display realtime second by second update of the time difference between passed time and the current time. All mounted components will use the single scheduler, so all repaint will be smooth enough. The scheduler is lazy, so if you have no mounted components, you will have zero timeouts.

Preview

Setup

yarn add vue-time-ticker

or using npm

npm install vue-time-ticker

Usage

<template>
  <div>
    <vue-time-ticker :value="formattedValue" format="HOURS" />
  </div>
</template>

<script>
import VueTimeTicker from 'vue-time-ticker';

export default {
  name: 'Counter',
  components: { VueTimeTicker },
  computed: {
    formattedValue() {
      // any source of data for your component
      return this.value;
    },
  },
};
</script>

Props descriptions

Prop name	Type	Example values	Description
value	String	2020-03-20T00:00:00z	Should be valid format for default JavaScript new Date() constructor
format	String	One of: HOURS,MINUTES,SECONDS	Represents format of displaying the result, HOURS: 00:00:00, MINUTES: 00:00,SECONDS: 00