Vue Timeago: timeago component for Vue.js


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.


To make use of this plugin, start by installing it in your project.


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 =
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.