Vue-time-flows NPM

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

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

Quick Start

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

Vue.use(VueTimeFlows)

<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

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

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

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