vue-timeago   

> A timeago component Vue.js

Install

``bash
yarn add vue-timeago


or


npm i vue-timeago
`

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

Usage

For usages on version 4, please check out this branch.

`js
import VueTimeago from 'vue-timeago'

Vue.use(VueTimeago, {
name: 'Timeago', // Component name, Timeago by default
locale: 'en', // Default locale
// We use date-fns under the hood
// So you can use all locales from it
locales: {
'zh-CN': require('date-fns/locale/zh_cn'),
ja: require('date-fns/locale/ja')
}
})
`

Then in your lovely component:

`vue










`

Plugin options

`js
Vue.use(VueTimeago, pluginOptions)
`

$3

- Type: { [localeName: string]: any }

An object of locales.

$3

- Type: string

The default locale name.

$3

- Type: (date, locale, converterOptions) => string

A converter that formats regular dates in xxx ago or in xxx style.

Check out our default converter which uses date-fns/distance_in_words_to_now under the hood.

$3

- Type: Object

Provide an object which will be available as argument converterOptions in the converter we mentioned above.

Our default converter supports most options that date-fns/distance_in_words_to_now library supports, namely:

- includeSeconds: (default: false) distances less than a minute are more detailed
- addSuffix: (default: true) result specifies if the second date is earlier or later than the first

props

$3

- Type: Date string number
- Required: true

The datetime to be formatted .

$3

- Type: number boolean
- Default: false

The period to update the component, in seconds.

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

When true it will be equivalent to 60.

$3

Just like the locale option in the plugin options, but this could override the global one.

$3

Just like the converter option in the plugin options, but this could override the global one.

$3

Just like the converterOptions option in the plugin options, but this could override the global one.

Recipes

$3

`js
Vue.use(VueTimeago, {
locale: 'en',
locales: {
'zh-CN': require('date-fns/locale/zh_cn')
}
})
`

In your components you can use this.$timeago.locale to access the global locale, in this case it's en, the component will get updated when you set it to another valid locale, e.g. this.$timeago.locale = 'zh-CN'.

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

`bash


for dev

yarn example

build in cjs es umd format

yarn build
``

License

MIT © EGOIST