https://github.com/bestvist/vue-clock2

vue clock component :grinning:
https://github.com/bestvist/vue-clock2

clock component time vue

Last synced: 5 months ago
JSON representation

vue clock component :grinning:

• Host: GitHub
• URL: https://github.com/bestvist/vue-clock2
• Owner: bestvist
• License: mit
• Created: 2018-10-10T15:36:38.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2021-11-30T01:46:35.000Z (about 4 years ago)
• Last Synced: 2025-02-06T08:02:10.229Z (10 months ago)
• Topics: clock, component, time, vue
• Language: Vue
• Homepage: https://bestvist.github.io/vue-clock2/docs/
• Size: 124 KB
• Stars: 89
• Watchers: 1
• Forks: 18
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-clock2 - vue clock component ` 📝 2 years ago` (UI Components [🔝](#readme))
• awesome-vue - vue-clock2 - Display clock component for Vue. (Components & Libraries / UI Components)
• awesome-vue - vue-clock2 ★26 - Display clock component for Vue. (UI Components / Time)
• awesome-vue - vue-clock2 - Display clock component for Vue. (UI Components / Time)

README

          
vue clock2




  

    

  

  

    

  

  

    

  



> Analogue Clock Component for Vue.js

## Install

```console

npm install vue-clock2

```

or

```console

yarn add vue-clock2

```

## Example for Vue.js 2

[Demo](https://bestvist.github.io/vue-clock2/docs/)

```html

  

  import Clock from 'vue-clock2';

  export default {

    components: { Clock },

    data () {

      return {

          time: '10:40:00'

      }

    }

  }

```

## Example for Nuxt.js 2.10+

```js

// Add this to ~/plugins/clock.js

import Clock from 'vue-clock2';

import Vue from 'vue';

Vue.component('clock', Clock);

```

```js

// Add clock.js to your nuxt.config.js

plugins: [

  { src: '~plugins/clock', mode: 'client' }

],

```

```html

  

    

  

```

## Default Style

![](./clock.png)

## Some Sample Styles

![](./clock-color.png)

## Props

| 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 |

## License

[MIT](https://github.com/bestvist/vue-clock2/blob/master/LICENSE)