eteplus / vue-timeago

A timeago component for Vue.

vue-timeago

A timeago component Vue.js

Install

vue-timeago uses date-fns/distance_in_words_to_now under the hood:

yarn add date-fns vue-timeago
# or
npm i date-fns 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: undefined, // Default locale
  locales: {
    'zh-CN': require('date-fns/locale/zh_cn'),
    'ja': require('date-fns/locale/ja'),
  }
})

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>

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

API

props

since

• Type: Date string number
• Required: true

The given date.

autoUpdate

• Type: number
• Default: false

The period to update the component, in seconds.

You can omit this prop or set it to 0 to disable auto-update.

locale

• Type: string

Use a custom locale.

includeSeconds

• Type: boolean
• Default: false

Distances less than a minute are more detailed

What about the good old vue-timeago v3?

The older version (700 bytes gzipped) is much smaller than the current version (2.8kB gzipped) that uses date-fns.

But the current version gives more precise result (and hopefully handles more edge cases), and we don't need to maintain a big list of locale messages because date-fns already did it for us.

Development

# for dev
yarn example

# build in cjs es umd format
yarn build

License

MIT © EGOIST