Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/vue-timeago
A timeago component for Vue.
https://github.com/egoist/vue-timeago
Last synced: 8 days ago
JSON representation
A timeago component for Vue.
- Host: GitHub
- URL: https://github.com/egoist/vue-timeago
- Owner: egoist
- License: mit
- Archived: true
- Created: 2016-05-05T08:16:54.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-05-27T08:29:56.000Z (over 3 years ago)
- Last Synced: 2024-10-19T03:43:05.350Z (16 days ago)
- Language: JavaScript
- Homepage: https://vue-timeago.egoist.sh
- Size: 5.56 MB
- Stars: 729
- Watchers: 14
- Forks: 104
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG-OLD.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - vue-timeago
- awesome-vue - vue-timeago - timeago?style=social) - VueJS的时间前组件 (实用库)
- awesome - egoist/vue-timeago - A timeago component for Vue. (JavaScript)
- awesome-github-vue - vue-timeago - VueJS的时间前组件 (实用库)
- awesome-github-vue - vue-timeago - VueJS的时间前组件 (实用库)
- awesome - vue-timeago - VueJS的时间前组件 (实用库)
README
# vue-timeago [](https://npmjs.com/package/vue-timeago) [](https://npmjs.com/package/vue-timeago) [](https://circleci.com/gh/egoist/vue-timeago)
> A timeago component Vue.js
## Install
```bash
yarn add vue-timeago
# or
npm i vue-timeago
```
CDN: [UNPKG](https://unpkg.com/vue-timeago/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-timeago/dist/) (available as `window.VueTimeago`)
## Usage
For usages on version 4, please check out [this branch](https://github.com/egoist/vue-timeago/tree/4).
```js
import VueTimeago from 'vue-timeago'
Vue.use(VueTimeago, {
name: 'Timeago', // Component name, `Timeago` by default
locale: 'en', // Default locale
// We use `date-fns` under the hood
// So you can use all locales from it
locales: {
'zh-CN': require('date-fns/locale/zh_cn'),
ja: require('date-fns/locale/ja')
}
})
```
Then in your lovely component:
```vue
```
## Plugin options
```js
Vue.use(VueTimeago, pluginOptions)
```
### locales
- **Type**: `{ [localeName: string]: any }`
An object of locales.
### locale
- **Type**: `string`
The default locale name.
### converter
- **Type**: `(date, locale, converterOptions) => string`
A `converter` that formats regular dates in `xxx ago` or `in xxx` style.
Check out our [default converter](https://github.com/egoist/vue-timeago/blob/master/src/converter.js) which uses [date-fns/distance_in_words_to_now](https://date-fns.org/v1.29.0/docs/distanceInWordsToNow) under the hood.
### converterOptions
- **Type**: `Object`
Provide an object which will be available as argument `converterOptions` in the `converter` we mentioned above.
Our default converter supports most options that [date-fns/distance_in_words_to_now](https://date-fns.org/v1.29.0/docs/distanceInWordsToNow) library supports, namely:
- **includeSeconds**: (default: `false`) distances less than a minute are more detailed
- **addSuffix**: (default: `true`) result specifies if the second date is earlier or later than the first
## props
### datetime
- **Type**: `Date` `string` `number`
- **Required**: `true`
The datetime to be formatted .
### autoUpdate
- **Type**: `number` `boolean`
- **Default**: `false`
The period to update the component, in **seconds**.
You can omit this prop or set it to `0` or `false` to disable auto-update.
When `true` it will be equivalent to `60`.
### locale
Just like the `locale` option in the plugin options, but this could override the global one.
### converter
Just like the `converter` option in the plugin options, but this could override the global one.
### converterOptions
Just like the `converterOptions` option in the plugin options, but this could override the global one.
## Recipes
### Update Locale Globally
```js
Vue.use(VueTimeago, {
locale: 'en',
locales: {
'zh-CN': require('date-fns/locale/zh_cn')
}
})
```
In your components you can use `this.$timeago.locale` to access the global locale, in this case it's `en`, the `` component will get updated when you set it to another valid locale, e.g. `this.$timeago.locale = 'zh-CN'`.
## What about the good old [vue-timeago v3](https://github.com/egoist/vue-timeago/tree/3)?
The older version (700 bytes gzipped) is much smaller than the current version (2.8kB gzipped) that uses [`date-fns`](https://date-fns.org/).
But the current version gives more precise result (and hopefully handles more edge cases), and we don't need to maintain a big list of locale messages because `date-fns` already did it for us.
## Development
```bash
# for dev
yarn example
# build in cjs es umd format
yarn build
```
## License
MIT © [EGOIST](https://github.com/egoist)