vue-clock2

KO | EN

gitlite — search

#python #javascript #react #golang #android #html #video #go #ios #rust #hacktoberfest #css

★ 86 Open GitHub ↗

vue clock component :grinning:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">vue clock2</h1>

> Analogue Clock Component for Vue.js

## Install

```console
npm install vue-clock2
```

```console
yarn add vue-clock2
```

## Example for Vue.js 2

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

```html
<template>
  <clock :time="time"></clock>
</template>

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

<template>
  <client-only>
    <clock :time="time"></clock>
  </client-only>
</template>
```

## Default Style

![](https://raw.githubusercontent.com/bestvist/vue-clock2/master/clock.png)

## Some Sample Styles

![](https://raw.githubusercontent.com/bestvist/vue-clock2/master/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)

vue-clock2

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README