Vue Clock

Simple clock component using Vue.js

Install

CDN

<script src="https://unpkg.com/@dangvanthanh/vue-clock"></script>

NPM

$ npm install @dangvanthanh/vue-clock --save

Usage

Vue

import Vue from "vue";
import VueClock from "@dangvanthanh/vue-clock";

Vue.use(VueClock);

<template>
  <div class="app">
    <h3>Display all</h3>
    <VueClock />
    <h3>Hidden hour</h3>
    <VueClock :isHour="false"/>
    <h3>Hidden minute and second</h3>
    <VueClock :isMinute="false" :isSecond="false" />
    <h3>With timeZone</h3>
    <VueClock timeZone="'America/New_York'" />
  </div>
</template>

<script>
import VueClock from '@dangvanthanh/vue-clock'

export default {
  components: { VueClock },
}
</script>

Nuxt (or SSR)

import Vue from "vue";
import VueClock from "@dangvanthanh/vue-clock";

Vue.component("VueClock", VueClock);
// or
// Vue.use(VueClock);

Props

Name	Type	Default	Description
is24h	Boolean	false	Display 24h or not
isHour	Boolean	true	Display/hidden hour
isMinute	Boolean	true	Display/hidden minute
isSecond	Boolean	true	Display/hidden second
timeZone	String	Your current timeZone such as Asia/Saigon	List of Time Zones

License

MIT © Dang Van Thanh