Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MrDeerly/vue-timeago3
A tiny timeago component for Vue 3 using date-fns v2.28.
https://github.com/MrDeerly/vue-timeago3
component date date-fns hacktoberfest message since time-ago time-since timeago timeago-js timeago-vue timepassed timestamp vite vue vue-timeago vue3 vuejs
Last synced: 3 months ago
JSON representation
A tiny timeago component for Vue 3 using date-fns v2.28.
- Host: GitHub
- URL: https://github.com/MrDeerly/vue-timeago3
- Owner: MrDeerly
- License: mit
- Created: 2021-09-18T10:14:32.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-22T12:23:03.000Z (7 months ago)
- Last Synced: 2024-07-20T07:08:16.305Z (4 months ago)
- Topics: component, date, date-fns, hacktoberfest, message, since, time-ago, time-since, timeago, timeago-js, timeago-vue, timepassed, timestamp, vite, vue, vue-timeago, vue3, vuejs
- Language: TypeScript
- Homepage: https://mrdeerly.github.io/vue-timeago3/
- Size: 2.75 MB
- Stars: 22
- Watchers: 2
- Forks: 4
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: docs/contributing/environment.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-3 - vue-timeago3 - A timeago component. Render a timestamp to a Messenger like string. (Packages)
README
# ⏳ vue-timeago3
[](https://npmjs.com/package/vue-timeago3) [](https://npmjs.com/package/vue-timeago3)  [](https://actions-badge.atrox.dev/MrDeerly/vue-timeago3/goto?ref=master)   
A time ago component for Vue.js 3 based on [vue-timeago for Vue 2 by egoist](https://github.com/egoist/vue-timeago).
## Table of Contents
- [About](#sectionAbout)
- [Usage](#sectionUsage)
- [Installation](#sectionInstall)
- [Register Plugin](#sectionRegister)
- [Component](#sectionComponent)
## About
**vue-timeago3** is a tiny component for Vue.js 3, to show the time passed since a specific date. You simply pass a date and get somewhat like `10 seconds ago`, `3 weeks ago`, `...` printed by the component
### Example
| distance to now | result |
| --------------- | ------------------------ |
| 0 - 5 secs | less than 5 seconds ago |
| 5 - 10 secs | less than 10 seconds ago |
| 10 - 20 secs | less than 20 seconds ago |
| 20 - 40 secs | half a minute ago |
| 40 - 60 secs | less than a minute ago |
See [date-fns/formatDistanceToNow](https://date-fns.org/v2.26.0/docs/formatDistanceToNow) for more details.
## Usage
**Visit the [docs](https://mrdeerly.github.io/vue-timeago3/) for more details!**
### Installation
Currently the plugin is available via NPM and Yarn. To install it use one of the two package managers.
```javascript
// NPM
$ npm install vue-timeago3
// Yarn
$ yarn add vue-timeago3
```
### Register Plugin
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.
```javascript
// src/main.ts
import { createApp } from 'vue'
import timeago from 'vue-timeago3'
const app = createApp(App)
...
app.use(timeago) // register timeago
...
app.mount('#app')
```
#### Plugin Options
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:
```javascript
// 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:
| option | type | description |
|-----------------------------|----------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **name** | `string` | Register the component with a custom name. Default is: `timeago` |
| **locale** | `Locale` (see [date-fns/Locale](https://date-fns.org/v2.26.0/docs/Locale)) | The `locale` specifies the language which is used to render the date. All available `date-fns` locales are supported by default. |
| **converter** | `(date, defaultConvertOptions \| strictConverterOptions) => string` | A **converter** that formats regular dates in `x Seconds ago`, or in `xxx` style. Check out the [default converter](ahttps://github.com/MrDeerly/vue-timeago3/blob/master/src/defaultConverter.js) which uses [date-fns formatDistanceToNow](https://date-fns.org/v2.24.0/docs/formatDistanceToNow) |
| **defaultConverterOptions** | `Object` | Pass some extra settings to the default converter mentioned above. It supports the main options of `date-fns`, namingly:
`includeSeconds` - `boolean` - distances less than a minute are more detailed `addSuffix` - `boolean` - results specifies if now is earlier or later than the date passed
`useStrict` - `false` - **if `true` you need to use the `strictConverterOptions` (see below)** |
| **strictConverterOptions** | `Object` | Pass some extra settings to the default converter mentioned above. It supports the main options of `date-fns` strict converter, namingly:
`useStrict` - `true` - needs to be `true`, otherwise the `defaultConverterOptions` have to be used (see above) `addSuffix` - `boolean` - results specifies if now is earlier or later than the date passed
`unit` - `second, minute, hour, day, month, year` if specified, will force a unit
`roundingMethod` - `floor, ceil, round` which way to round partial units (default=round) |
### Component
Once the plugin is registered you can straight up use it in your app.
**Basic usage**:
```jsx
...
data() {
return {
date: '2021-09-01'
}
}
...
This can be omitted by setting it to `0` or `false`.
The default value for `true` is `60`(seconds). Instead of passing `true` you can also pass a custom time. |
| **locale** | `Locale` (see [date-fns/Locale](https://date-fns.org/v2.26.0/docs/Locale)) | :x: | `en` | The `locale` specifies the language which is used to render the date. All available `date-fns` locales are supported by default. |
| **converter** | `date, defaultConverterOptions \| strictConverterOptions) => string` | :x: | | See plugin options above |
| **defaultConverterOptions** | `Object` | :x: | | See plugin options above |
| **strictConverterOptions** | `Object` | :x: | | See plugin options above |