vue-timeago
v5.1.3
Published
A timeago filter for Vue.
Downloads
31,625
Readme
vue-timeago
A timeago component Vue.js
Install
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.
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:
<!-- simple usage -->
<!-- time is a dateString that can be parsed by Date.parse() -->
<timeago :datetime="time"></timeago>
<!-- Auto-update time every 60 seconds -->
<timeago :datetime="time" :auto-update="60"></timeago>
<!-- custom locale -->
<!-- use a different locale instead of the global config -->
<timeago :datetime="time" locale="zh-CN"></timeago>
Plugin options
Vue.use(VueTimeago, pluginOptions)
locales
- Type:
{ [localeName: string]: any }
An object of locales.
locale
- Type:
string
The default locale name.
converter
- 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.
converterOptions
- 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
datetime
- Type:
Date
string
number
- Required:
true
The datetime to be formatted .
autoUpdate
- 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
.
locale
Just like the locale
option in the plugin options, but this could override the global one.
converter
Just like the converter
option in the plugin options, but this could override the global one.
converterOptions
Just like the converterOptions
option in the plugin options, but this could override the global one.
Recipes
Update Locale Globally
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 <timeago>
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
# for dev
yarn example
# build in cjs es umd format
yarn build
License
MIT © EGOIST