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.