# vue2-timeago
[](https://vuejs.org/) [](https://www.npmjs.com/package/vue2-timeago) [](https://www.npmjs.com/package/vue2-timeago) [](https://www.jsdelivr.com/package/npm/vue2-timeago) [](https://github.com/runkids/vue2-timeago/blob/master/LICENSE)
# vue2-timeago V2
### 🔥 NEW [vue2-timeago for Vue 3](https://vue2-timeago.netlify.app/)
- Localization supported
- Show tooltip
- Auto refresh time
- When time refresh call a customizable function
- Formats a date/timestamp to:
- just now
- 5m
- 3h
- 2 days ago
- 2017-08-03
- Rules:
- less than 1 minute , show `just now`
- 1 minute ~ 1 hour , show `** minutes ago`
- 1 hour ~ 1 day , show `** hours ago`
- 1 day ~ 1 month( 31 days ) , show `** days ago`
- more than 1 month( 31 days ) , show `yyyy-mm-dd hh:mm`
##### FOR 1.X PLEASE GO TO [THE 1.x BRANCH](https://github.com/runkids/vue2-timeago/tree/v1)
## Navigation
- [Changelog](https://github.com/runkids/vue2-timeago/blob/master/CHANGELOG.md)
- [Installation](#Installation)
- [Usage](#Usage)
- [Examples](#Examples)
- [Props](#Props)
- [Contributions](#Contributions)
## Live Demo
[](https://codesandbox.io/embed/myomwvkojj)
## Local Demo
```js
yarn
yarn serve
```
## Installation
Get from npm / yarn:
```js
npm i vue2-timeago@2.1.0
```
```js
yarn add vue2-timeago@2.1.0
```
or just include [vue2-timeago.umd.min.js](https://cdn.jsdelivr.net/npm/vue2-timeago@2.1.0/dist/vue2-timeago.umd.min.js) to your view like
```js
```
## Usage
Use this inside your app:
``` js
import { TimeAgo } from 'vue2-timeago'
export default {
name: 'app',
components: {
TimeAgo,
}
}
```
##### With Default CSS
```js
import 'vue2-timeago/dist/vue2-timeago.css'
```
or just include [vue2-timeago.css](https://cdn.jsdelivr.net/npm/vue2-timeago@2.1.0/dist/vue2-timeago.css)
##### HTML
```html
```
### Custom locale
You can register new locales at runtime without editing library files.
```javascript
import Vue from 'vue'
import Vue2Timeago, { addLocale } from 'vue2-timeago'
addLocale('pirate', {
short: { now: 'arr', sec: 's', min: 'm', hour: 'h', day: 'd' },
long: {
now: 'arr',
sec: (n) => `${n} second${n > 1 ? 's' : ''} arr`,
min: (n) => `${n} minute${n > 1 ? 's' : ''} arr`,
hour: (n) => `${n} hour${n > 1 ? 's' : ''} arr`,
day: (n) => `${n} day${n > 1 ? 's' : ''} arr`,
},
})
Vue.use(Vue2Timeago)
```
```html
```
## Examples
##### 1. locale
Default locale is en, and the library supports en and zh_TW.
```html
use v-bind
```
```js
export default {
...
data(){
return{
locale:"zh_TW",
}
},
...
```
##### 2. datetime
```html
use v-bind
timestamp
```
- Note. Don't bind with `new Date()` when you use refresh property.
Because every time refresh will get a new date value.
```html
--> OK
--> not OK
```
If you want use new Date() , just remove datetime property.
```html
```
##### 3. refresh
```html
Boolean , default refresh time 60/s
bind value with a number
Refresh time 1 second
```
##### 4. tooltip
- Base on [v-tooltip](https://github.com/Akryum/v-tooltip "v-tooltip"), you can use placement attribute that are allowed in v-tooltip.
```html
Show tooltip
Disabled tooltip
```
##### 5. tooltip options
- Default options:
```javascript
{
placement: 'top',
content: {datetime string}
}
```
- Custom options
```html
```
```javascript
data () {
return {
tooltipOptions: {
placement: 'bottom',
}
}
}
```
- More info see .
##### 6. long
```html
show : 2d
show : 2 days ago
```
##### 7. vue2-timeago event
You can do something when time refresh every time
```html
```
Parameters example:
```javascript
methods: {
timeRefresh({ timeago, nowString, timestamp }) {
console.log(timeago) // 51m
console.log(nowString) // 2021-01-21 10:55
console.log(timestamp) // Thu Jan 21 2021 10:55:18 GMT+0800 (台北標準時間)
}
}
```
##### 8. native event
```html
```
## Props
| Property | Type | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
| datetime | Date, String, Number | new Date() | The datetime to be formatted.|
| locale | String | en | message language |
| refresh | Boolean, Number | false | The period to update the component, in seconds. When true it will be 60s. Also you can bind a number.|
| long | Boolean | false | Show long string with time message . ex. 3h -> 3 hours age|
| tooltip | Boolean | false | Show tooltip.|
| tooltip-options | Object | { placement: 'top', content: #datetime string } | tooltip options|
## Event
| Property | Description |
| ------------ | ------------ |
| update | After timer refreshed will trigger this event |
## Nuxt (global registration)
To install in nuxt run
```shell
npm i vue2-timeago
```
In `nuxt.config.js` add
```javascript
plugins: [
{ src: '~/plugins/vue2-timeago' }
],
```
In `plugins/vue2-timeago.js` type:
```javascript
import Vue from 'vue';
import { TimeAgo } from 'vue2-timeago';
import 'vue2-timeago/dist/vue2-timeago.css';
Vue.component('time-ago', TimeAgo);
```
Then in components use as:
```html
```
## Contributions
locale translations: The component needs more locale translations. You can `Open an issue to write the locale translations, or submit a pull request`.
See example [here](https://github.com/runkids/vue2-timeago/blob/master/src/helpers/lang).
locale support list :
- English ( en )
- 繁體中文 ( zh_TW )
- 简体中文 ( zh_CN )
- 日本語 ( jp )
- Korean ( ko )
- 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 )
- Hebrew ( he )
- Thai ( th )
- Danish ( da )
- Norwegian ( no )
- Vietnam ( vi )
- Italian ( it )
Thanks for help:
