Analogue Clock Component for Vue.js
npm install vue-clock2or
yarn add vue-clock2<template> <clock :time="time"></clock> </template> <script> import Clock from 'vue-clock2'; export default { components: { Clock }, data () { return { time: '10:40:00' } } } </script>// Add this to ~/plugins/clock.js import Clock from 'vue-clock2'; import Vue from 'vue'; Vue.component('clock', Clock);// Add clock.js to your nuxt.config.js plugins: [ { src: '~plugins/clock', mode: 'client' } ],<!-- Wrap any <clock> components like so: --> <template> <client-only> <clock :time="time"></clock> </client-only> </template>
| Property | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| time | time to display | String | - | - |
| color | color to display | String | - | - |
| border | clock border style | String | - | '2px solid' |
| bg | clock background style | String | - | - |
| size | size to display | String | - | 150px |