Vue Timeago: timeago component for Vue.js
vue-timeago
Time to check out a simple and small component for, you guessed it, time. Use the timeago component in Vue.js projects, to monitor elapsed time since a certain date, with i18n support. For all supported languages, see /locales, it's easy to add a new language support.
If you want to play around with it, check the Demo page. The author has disabled Vue-devtools usage on this page but you can try it in your own environment.
Example
To make use of this plugin, start by installing it in your project.
Install
yarn add vue-timeago
Import it into your project and choose a locale
as shown
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')
}
})
The example provided is displaying 3 different simple usage instances
<!-- time is a dateString that can be parsed by Date.parse() -->
<timeago :since="time"></timeago>
<!-- Auto-update time every 60 seconds & time before this will not be converted = 60 -->
<timeago :since="time" :auto-update="60" :max-time="60"></timeago>
<!-- custom locale -->
<!-- use a different locale instead of the global config -->
<timeago :since="time" locale="ru-RU"></timeago>
The since
prop is a string value representing a date. The string should be in a format recognized by the Date.parse()
method.
So you can pass your own dates in a few different ways.
created() {
// use the current time
this.time = Date.now()
},
data () {
return {
//or set a standard time
time: 'Jul 9, 2017',
}
}
}
More options are available at the API section.
If you want to check out the source code of this plugin or submit a request, head to its repository available here. Created by @egoist.