Tiny Timeago Component For Vue 3

A tiny timeago component (a.k.a. human-readable relative time) for Vue 3 applications.

How to use it:

1. Import and register the timeago component.

import App from './App'
import { createApp } from 'vue'
import timeago from 'vue-timeago3'
const app = createApp(App)
app.use(timeago)
app.mount('#app')

2. Add the component to the template.

Now was: <timeago :datetime="date"/>

export default {
  data() {
    return {
      date: // Any Date
    }
  },
}

3. Available props.

datetime: {
  type: [String, Number, Date],
  required: true,
},
title: {
  type: [String, Boolean],
  required: false,
  default: null,
},
autoUpdate: {
  type: [Number, Boolean],
  required: false,
  default: null,
},
converter: {
  type: Function,
  required: false,
  default: null,
},
converterOptions: {
  type: Object as PropType<converterOptions>,
  required: false,
  default: null,
},
locale: {
  type: Object as PropType<Locale>,
  required: false,
  default: null,
},

Preview:

Changelog:

v2.3.2 (10/24/2023)

• updated dependencies
• bugfixed

v2.3.1 (07/10/2023)

• updated dependencies

v2.3.0 (06/11/2022)

• add type checking for strict converterOptions

v2.2.1 (04/30/2022)

• Hotfix for packaging. No changes to previous release.

Download Details:

Author: MrDeerly

Live Demo: https://mrdeerly.github.io/vue-timeago3/#example-usage

Download Link: https://github.com/MrDeerly/vue-timeago3/archive/refs/heads/master.zip

Official Website: https://github.com/MrDeerly/vue-timeago3

Install & Download:

# Yarn
$ yarn add vue-timeago3

# NPM
$ npm i vue-timeago3