.png)
Vue2-timeago: Format dates to time ago statements
vue2-timeago is a Vue component used to format date to time ago statement.
It formats date/timestamps into readable statements example just now or 2 days ago and shows actual date/timestamps in a tooltip (based on v-tooltip).
It's available in Vue 2 and Vue 3 versions.
Formats a date/timestamp to:
- just now
- 5m
- 3h
- 2 days ago
- 2017-08-03
Installation
//npm
npm i vue2-timeago@next
//yarn
yarn add vue2-timeago@nextUsage
<template>
<div>
<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
</div>
</template/>
<script>
import { Timeago } from 'vue2-timeago'
export default {
components: {
Timeago,
},
}
</script>props
datetime
Type: Date, String, Number
Default: new Date ()
Description: Datetime can be a Date Object, A UTC date-string or number of milliseconds since epoch time.
long
Type: Boolean
Default: true
Description: Show long string with time message . ex. 3h -> 3 hours age
locale
Type: String
Default: en
Description: message language
minPeriod
Type: Number
Default: 0
Description: The minimum number of seconds that the component should wait before updating.
maxPeriod
Type: Number
Default: 7 days
Description: The opposite of minPeriod. Use this to force dates to update more often than the default behaviour.
Event
update
After timeout will trigger this event
