vue2-timeago for Vue 3

Usage 

import { Timeago } from 'vue2-timeago'

export default {
  components: {
    Timeago,
  },
}

Props

PropertyTypeDefaultDescription
datetimeDate, String, Numbernew Date()Datetime can be a Date Object, A UTC date-string or number of milliseconds since epoch time.
longBooleantrueShow long string with time message . ex. 3h -> 3 hours age
localeStringenmessage language
minPeriodnumber0The minimum number of seconds that the component should wait before updating.
maxPeriodnumber7 daysThe opposite of minPeriod. Use this to force dates to update more often than the default behaviour.
EventDescription
updateAfter timeout will trigger this event

Slots 

<Timeago>
  <template #default="{ secondsElapsed, timeago }">
    {{ secondsElapsed < 60 ? dayjs().format('HH:mm:ss') : timeago }}
  </template>
</Timeago>
SlotDescription
secondsElapsedSeconds elapsed. Will update same as timeago.
timeagoTimeago string.

Examples

1. locale

Default locale is en, and the library supports en and zh_TW.

<Timeago locale="en" /> <Timeago :locale="locale" />

export default {
  ...
  setup(){
    const locale = ref("zh_TW")

    return{
      locale,
    }
  },
  ...
2. datetime 
<Timeago /> default: new Date()
<Timeago datetime="2018-08-03 15:47:00" />
<Timeago :datetime="new Date(2018, 7, 4, 0, 24, 0)" />
<Timeago :datetime="1533286641826" /> timestamp
3. long 
<Timeago :datetime="datetime" /> show : 2d
<Timeago :datetime="datetime" long /> show : 2 days ago
4. vue2-timeago event

You can do something after timeout. 

<Timeago :locale="locale" @update="update" />

Example:

methods: {
  update({ timeago, nowString, timestamp, seconds }) {
    console.log(timeago) // 51m
    console.log(nowString) // 2021-01-21 10:55
    console.log(timestamp) // Thu Jan 21 2021 10:55:18 GMT+0800 (台北標準時間)
    console.log(seconds) // 51 * 60 seconds
  }
}

Simple Demo 

<Timeago :locale="locale" :long="long" :datetime="date" />

Locale Support List

  • English ( en )
  • 繁體中文 ( zh_TW )
  • 简体中文 ( zh_CN )
  • 日本語 ( jp )
  • Portugal(Brazil) ( pt_BR )
  • Spain ( es )
  • Arabia ( ar )
  • French ( fr )
  • Polish ( pl )
  • Turkish ( tr )
  • Indonesian ( id )
  • Romanian ( ro )
  • Russian ( ru )
  • Germany ( de )
  • Ukrainian ( uk )
  • Bulgarian ( bg )
  • Swedish ( se )
  • Dutch / Netherlands ( nl )