# vue-time-flows

> A vue component that allows you to format current time

Latest version **0.1.1** (published 2018-04-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-time-flows
pnpm add vue-time-flows
yarn add vue-time-flows
bun add vue-time-flows
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2018-04-21 |
| First published | 2018-04-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4 |
| Dependencies | 0 |
| Unpacked size | 6.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | lazzzis |
| Maintainers | lazzzis |
| Keywords | time, vue |

## Links

- npm: https://www.npmjs.com/package/vue-time-flows
- Repository: https://github.com/lazzzis/vue-time-flows
- Homepage: https://github.com/lazzzis/vue-time-flows#readme
- Issues: https://github.com/lazzzis/vue-time-flows/issues
- npm.io page: https://npm.io/package/vue-time-flows

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2018-04-21
- 0.1.0 — 2018-04-21

## README

# Vue Time Flows

## Introduction

`vue-time-flows` is a zero-dependency vue component for displaying date time. It supports auto-update and format-customize.

## Installation

```bash
npm i -S vue-time-flows
# or yarn: yarn add vue-time-flows
```

## Quick Start

```js
import Vue from 'vue'
import VueTimeFlows from 'vue-time-flows'

Vue.use(VueTimeFlows)
```

```html
<template>
  <div>
    <p>Begins at Now:  <VueTimeFlows> </p>
    <p>Begins at 2017-01-01:  <VueTimeFlows> </p>
  </div>
</template>
<script>
  export default {
    data: () => ({
      now: new Date('2017-01-01').getTime()
    })
  }
</script>
```

## Demo and Advanced Usage

[Demo and Advanced Usage](https://lazzzis.github.io/vue-time-flows)

## API

### props
|Prop|Type|Default|Description|
|-|-|-|-|
|now|Number|`Date.now()`|the initial time|
|period|Number|`1000`|the update interval (unit: ms)|
|format|Function: (Number) => String| `(val) => new Date(val).toLocaleString()`| the format method, accepting a timestamp as an argument and returning a string|

### Vue.use options

```js
Vue.use(VueTimeFlows, {
  name: 'VueTimeFlows', // name of the component, 'VueTimeFlows' in default
  now: Date.now(), // same as `now` in props api
  period: 1000, // same as `period` in props api
  format: (val) => new Date(val).toLocaleString() // same as `format` in props api
})
```
## Development

```bash
# for dev
$ yarn
$ yarn dev

# for deploy docs
$ yarn run deploy
```

## Why not add `moment` / `luxon` to support built-in format features?

Both `moment` and `luxon` are excellent libraries to parse and format datetime. But in most cases, I don't want to add a dependency on a project which has depended on `moment` or `luxon`.

For example, if `vue-time-flows` depends on `moment` and I am working on a project depending on `luxon`, installing `vue-time-flows` means that this project would depends on both `moment` and `luxon`. But `moment` and `luxon` has almost same functionality and depending both two would lead to a larger distribution size.

So, instead, `vue-time-flows` provides a `format` for users to customize format.

# License

MIT &copy; [lazzzis](https://github.com/lazzzis)

---
_Source: https://npm.io/package/vue-time-flows · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._