A time ago component for Vue.js 3 based on vue-timeago for Vue 2 by egoist.

• About
• Usage
  • Installation
  • Register Plugin
  • Component

See date-fns/formatDistanceToNow for more details.

Visit the docs for more details!

// NPM
$ npm install vue-timeago3

// Yarn
$ yarn add vue-timeago3

To register the plugin simply import and register it using the new global vue3 api. As an alternative the plugin could be imported in specific components only.

// src/main.ts
import { createApp } from 'vue'
import timeago from 'vue-timeago3'

const app = createApp(App)
...
app.use(timeago) // register timeago
...
app.mount('#app')

During the registration of the component you can specify a set of options, which will mutate the plugin globally. If you don't want to define global settings, skip this section and use props instead. To use options, simply pass them during the registration as an object:

// src/main.ts
import { createApp } from 'vue'
import timeago from 'vue-timeago3'

const app = createApp(App)
...
// define options
const timeagoOptions = {
  converterOptions: {
      includeSeconds: false,
  }
}

app.use(timeago,  timeagoOptions) // register timeago with options
...
app.mount('#app')

As of version 1.0.0 the following options are available:

<template>
  <timeago :datetime="date"/>
</template>

<script>
...
data() {
  return {
    date: '2021-09-01'
  }
}
...
</script

Instead of configurating the plugin during the registration, you can also configuate the component via props.