Configuration
TIP
The component can either be configured globally, or on component level. To avoid conflicts and enhance the adaptability it's suggested to configure vue-timeago3
on component level.
Component options (local)
As usual the component is configured using properties.
Example
<template>
<timeago
:datetime="date"
:locale="es"
:converter-options="{
includeSeconds: true,
addSuffix: false,
useStrict: false,
}"
auto-update
/>
</template>
<script>
export default {
import { es } from 'date-fns/locale' // import custom locale
data() {
return {
date: new Date() // current Date
}
},
...
}
</script>
Properties
The following props are available and can be used:
datetime
The
datetime
is used to compute the "timeago" as a word. It reflects a timestamp and can be either astring
,number
or aDate
. Since it's a required property, the component won't work without it.
- type:
string | number | Date
- required: ✔️
autoUpdate
autoUpdate
specifies the period of time to update the component, in seconds. This can be omitted by setting it to0
orfalse
. Instead of passingtrue
to activate it, you can also pass a custom interval by passing anumber
.
- type:
number | boolean
- required: ❌
- default:
false
locale
The
locale
specifies the language which is used to render the date. All availabledate-fns
locales are supported by default.
- type:
Locale
(see date-fns/Locale) - required: ❌
- default:
en
converter
A converter that formats regular dates in
x Seconds ago
, or inxxx
style. Check out the default converter which uses date-fns formatDistanceToNow
- type:
(date, defaultConverterOptions | strictConverterOptions) => string
- required: ❌
- default:
null
defaultConverterOptions
The defaultConverterOptions allow you to adjust the default converter' configuration. The default supports the main options of
date-fns
, naming:
includeSeconds
-boolean | undefined
- distances less than a minute are more detailedaddSuffix
-boolean | undefined
- results specifies if now is earlier or later than the date passeduseStrict
-false | undefined
- iftrue
you need to use thestrictConverterOptions
(see below)
- type:
Record<string, boolean>
- required: ❌
- default:
{}
strictConverterOptions
The strictConverterOptions allow you to use the defaultConverter in strict mode. The strict conversion supports the main options of
date-fns
, naming:
useStrict
-true
- enables strict convertingaddSuffix
-boolean | undefined
- results specifies if now is earlier or later than the date passedunit
-"second" | "minute" | "hour" | "day" | "month" | "year" | undefined
- defines which unit is used for the conversionroundingMethod
-"floor" | "ceil" | "round" | undefined
- defines which method is used to round the time
- type:
Record<string, boolean>
- required: ❌
- default:
{}
Plugin options (global)
Instead of configuring vue-timeago3 on component level, it can also be configured on a global level while registering the component.
Example
// src/main.ts
import App from './App'
import { createApp } from 'vue'
import timeago from 'vue-timeago3' // import timeago
import { es } from 'date-fns/locale' // import custom locale
const app = createApp(App);
...
// define options
const timeagoOptions = {
converterOptions: {
includeSeconds: false,
},
locale: es,
}
app.use(timeago, timeagoOptions) // register timeago with options
...
app.mount('#app')
Options
WARNING
If both global and component options are used, the component options will be higher prioritized and used.
name
The
name
option allows you to customize the components name. Please keep in mind that with changing this value, you need to use the component with the specified name.
- type:
string
- required: ❌
- default:
Timeago
locale
The
locale
specifies the language which is used to render the date. All availabledate-fns
locales are supported by default.
- type:
Locale
(see date-fns/Locale) - required: ❌
- default:
en
converter
A converter that formats regular dates in
x Seconds ago
, or inxxx
style. Check out the default converter which uses date-fns formatDistanceToNow
- type:
(date, defaultConverterOptions | strictConverterOptions) => string
- required: ❌
- default:
null
defaultConverterOptions
The defaultConverterOptions allow you to adjust the default converter' configuration. The default supports the main options of
date-fns
, naming:
includeSeconds
-boolean | undefined
- distances less than a minute are more detailedaddSuffix
-boolean | undefined
- results specifies if now is earlier or later than the date passeduseStrict
-false | undefined
- iftrue
you need to use thestrictConverterOptions
(see below)
- type:
Record<string, boolean>
- required: ❌
- default:
{}
strictConverterOptions
The strictConverterOptions allow you to use the defaultConverter in strict mode. The strict conversion supports the main options of
date-fns
, naming:
useStrict
-true
- enables strict convertingaddSuffix
-boolean | undefined
- results specifies if now is earlier or later than the date passedunit
-"second" | "minute" | "hour" | "day" | "month" | "year" | undefined
- defines which unit is used for the conversionroundingMethod
-"floor" | "ceil" | "round" | undefined
- defines which method is used to round the time
- type:
Record<string, boolean>
- required: ❌
- default:
{}