# vue2-timeago-l
### Use Composition Api
👉 [vue-compose-timeago](https://github.com/runkids/vue-compose-timeago)
[](https://vuejs.org/) [](https://www.npmjs.com/package/vue2-timeago-l) [](https://www.npmjs.com/package/vue2-timeago-l) [](https://www.jsdelivr.com/package/npm/vue2-timeago-l) [](https://github.com/runkids/vue2-timeago-l/blob/master/LICENSE)
- 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`
## Navigation
- [Changelog](https://github.com/runkids/vue2-timeago-l/blob/master/CHANGELOG.md)
- [Installation](##Installation)
- [Usage](##Usage)
- [Examples](##Examples)
- [Props](##Props)
- [Contributions](##Contributions)
## Live Demo
[](https://codesandbox.io/embed/myomwvkojj)
## Installation
Get from npm / yarn:
```js
npm i vue2-timeago-l
```
```js
yarn add vue2-timeago-l
```
or just include [vue2-timeago-l.js](https://cdn.jsdelivr.net/npm/vue2-timeago-l@1.2.3/dist/vue2-timeago-l.js) to your view like
```js
```
## Usage
Use this inside your app:
``` js
import TimeAgo from 'vue2-timeago-l'
export default {
name: 'app',
components: {
TimeAgo,
}
}
```
##### With Default CSS
###### You don't need include for version >= "1.2.2"
```js
import 'vue2-timeago-l/dist/vue2-timeago-l.css'
```
or just include [vue2-timeago-l.css](https://cdn.jsdelivr.net/npm/vue2-timeago-l@1.1.3/dist/vue2-timeago-l.css)
##### HTML
```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
```
##### 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
Set placement
```
##### 5. long
```html
show : 2d
show : 2 days ago
```
##### 6. todo
You can do something when time refresh every time
```html
```
##### 7. 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, String | false | Show tooltip.|
| todo | Function | false | You can call a function when time refresh every time.|
## 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-l/blob/master/src/lib/lang).
locale support list :
- English ( en )
- 繁體中文 ( zh_TW )
- 简体中文 ( zh_CN )
- 日本語 ( jp )
- Portugal(Brazil) ( pt_BR )
- Spain ( es )
- Arabia ( ar )
- French ( fr )
- Polish ( pl )
- Turkish ( tr )
Thanks for help:
