vue-timeago

A timeago component Vue.js

Install

$ npm install --save vue-timeago

CDN: UNPKG | jsDelivr (available as window.VueTimeago)

Usage

import VueTimeago from 'vue-timeago'

Vue.use(VueTimeago, {
  name: 'timeago', // component name, `timeago` by default
  locale: 'en-US',
  locales: {
    // you will need json-loader in webpack 1
    'en-US': require('vue-timeago/locales/en-US.json')
  }
})

Then in your lovely component:

<!-- simple usage -->
<!-- time is a dateString that can be parsed by Date.parse() -->
<timeago :since="time"></timeago>

<!-- Auto-update time every 60 seconds -->
<timeago :since="time" :auto-update="60"></timeago>

<!-- max time, time before this will not be converted  -->
<!-- instead you can use a custom formatTime function to format -->
<!-- 86400 * 365 = a year -->
<timeago :since="time" :max-time="86400 * 365" :format="formatTime"></timeago>

<!-- custom locale -->
<!-- use a different locale instead of the global config -->
<timeago :since="time" locale="zh-CN"></timeago>

A very basic demo: https://egoist.moe/vue-timeago/

i18n support

For all supported languages, see /locales, it's easy to add a new language support, feel free to submit a Pull Request to help us support more languages!

API

props

since

Type: string (dateString)
Required: true

String value representing a date. The string should be in a format recognized by the Date.parse() method. see more at MDN

max-time

Type: number
Default: 86400 * 365 (a year)

The max time in seconds, time before this will not be converted.

format

Type: function Default: see below

The function we use to format the time before max-time, default function:

// `time` is returned by `new Date(since).getTime()`
function formatTime(time) {
  const d = new Date(time)
  return d.toLocaleString()
}

auto-update

Type: number

The period to update the component, in seconds.

You can set it to 0 to disable auto-update.

locale

Type: string

Specific a locale for relavant component only.

Development

# for dev
$ npm run example

# for publishing
$ npm run build

alkoumi/vue-timeago