{"id":13824445,"url":"https://github.com/0x0dr1y/vue-timeago3","last_synced_at":"2025-07-08T19:31:54.572Z","repository":{"id":37804835,"uuid":"407826070","full_name":"0x0dr1y/vue-timeago3","owner":"0x0dr1y","description":"A tiny timeago component for Vue 3 using date-fns v2.28.","archived":false,"fork":false,"pushed_at":"2024-04-22T12:23:03.000Z","size":2880,"stargazers_count":23,"open_issues_count":8,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-08T20:51:02.895Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://mrdeerly.github.io/vue-timeago3/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0x0dr1y.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"docs/contributing/environment.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-09-18T10:14:32.000Z","updated_at":"2024-09-11T10:06:46.000Z","dependencies_parsed_at":"2023-12-25T13:59:46.948Z","dependency_job_id":"e64539d5-b453-4401-bdcc-6426f30b6225","html_url":"https://github.com/0x0dr1y/vue-timeago3","commit_stats":{"total_commits":311,"total_committers":6,"mean_commits":"51.833333333333336","dds":"0.12540192926045013","last_synced_commit":"f16149dea340e75fcba6d49ef6cf6c82e8c15ec5"},"previous_names":["0x0dr1y/vue-timeago3","mrdeerly/vue-timeago3"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x0dr1y%2Fvue-timeago3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x0dr1y%2Fvue-timeago3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x0dr1y%2Fvue-timeago3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x0dr1y%2Fvue-timeago3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0x0dr1y","download_url":"https://codeload.github.com/0x0dr1y/vue-timeago3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225457779,"owners_count":17477353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","date","date-fns","hacktoberfest","message","since","time-ago","time-since","timeago","timeago-js","timeago-vue","timepassed","timestamp","vite","vue","vue-timeago","vue3","vuejs"],"created_at":"2024-08-04T09:01:02.927Z","updated_at":"2025-07-08T19:31:54.557Z","avatar_url":"https://github.com/0x0dr1y.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# ⏳ vue-timeago3  \n[![NPM version](https://img.shields.io/npm/v/vue-timeago3.svg?label=Version\u0026color=brightgreen\u0026logo=npm)](https://npmjs.com/package/vue-timeago3) [![NPM downloads](https://img.shields.io/npm/dm/vue-timeago3.svg?label=Downloads\u0026logo=npm)](https://npmjs.com/package/vue-timeago3) ![code-coverage](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/0x0dr1y/51a8c6c4f125bd6ec25a14a6f12e28bc/raw/vue-timeago3_coverage.json) [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2F0x0dr1y%2Fvue-timeago3%2Fbadge%3Fref%3Dmaster\u0026style=flat)](https://actions-badge.atrox.dev/0x0dr1y/vue-timeago3/goto?ref=master) ![Vue version](https://img.shields.io/badge/vue-3.2.6-blue.svg) ![date-fns version](https://img.shields.io/npm/dependency-version/vue-timeago3/date-fns?color=blue) ![size](https://img.shields.io/bundlephobia/min/vue-timeago3)\n\nA time ago component for Vue.js 3 based on [vue-timeago for Vue 2 by egoist](https://github.com/egoist/vue-timeago).\n\n## Table of Contents\n\n- [About](#sectionAbout)\n- [Usage](#sectionUsage)\n  - [Installation](#sectionInstall)\n  - [Register Plugin](#sectionRegister)\n  - [Component](#sectionComponent)\n\n\u003ca name=\"sectionAbout\"/\u003e\n\n## About\n\n**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\n\n### Example\n\n| distance to now | result                   |\n| --------------- | ------------------------ |\n| 0 - 5 secs      | less than 5 seconds ago  |\n| 5 - 10 secs     | less than 10 seconds ago |\n| 10 - 20 secs    | less than 20 seconds ago |\n| 20 - 40 secs    | half a minute ago        |\n| 40 - 60 secs    | less than a minute ago   |\n\nSee [date-fns/formatDistanceToNow](https://date-fns.org/v2.26.0/docs/formatDistanceToNow) for more details.\n\n\u003ca name=\"sectionUsage\"/\u003e\n\n## Usage\n\n**Visit the [docs](https://0x0dr1y.github.io/vue-timeago3/) for more details!**\n\n\u003ca name=\"sectionInstall\"/\u003e\n\n### Installation\n\nCurrently the plugin is available via NPM and Yarn. To install it use one of the two package managers.\n\n```javascript\n// NPM\n$ npm install vue-timeago3\n\n// Yarn\n$ yarn add vue-timeago3\n```\n\n\u003ca name=\"sectionRegister\"/\u003e\n\n### Register Plugin\n\nTo 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.\n\n```javascript\n// src/main.ts\nimport { createApp } from 'vue'\nimport timeago from 'vue-timeago3'\n\nconst app = createApp(App)\n...\napp.use(timeago) // register timeago\n...\napp.mount('#app')\n```\n\n#### Plugin Options\n\nDuring 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:\n\n```javascript\n// src/main.ts\nimport { createApp } from 'vue'\nimport timeago from 'vue-timeago3'\n\nconst app = createApp(App)\n...\n// define options\nconst timeagoOptions = {\n  converterOptions: {\n      includeSeconds: false,\n  }\n}\n\napp.use(timeago,  timeagoOptions) // register timeago with options\n...\napp.mount('#app')\n```\n\nAs of version 1.0.0 the following options are available:\n\n| option                      | type                                                                       | description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n|-----------------------------|----------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| **name**                    | `string`                                                                   | Register the component with a custom name. Default is: `timeago`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |\n| **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.                                                                                                                                                                                                                                                                                                                                                                                                                           |\n| **converter**               | `(date, defaultConvertOptions \\| strictConverterOptions) =\u003e string`        | A **converter** that formats regular dates in `x Seconds ago`, or in `xxx` style. Check out the [default converter](ahttps://github.com/0x0dr1y/vue-timeago3/blob/master/src/defaultConverter.js) which uses [date-fns formatDistanceToNow](https://date-fns.org/v2.24.0/docs/formatDistanceToNow)                                                                                                                                                                                                                                                        |\n| **defaultConverterOptions** | `Object`                                                                   | Pass some extra settings to the default converter mentioned above. It supports the main options of `date-fns`, namingly: \u003cbr/\u003e\u003cbr/\u003e `includeSeconds` - `boolean` - distances less than a minute are more detailed \u003c/br\u003e `addSuffix` - `boolean` - results specifies if now is earlier or later than the date passed \u003cbr/\u003e `useStrict` - `false` -  **if `true` you need to use the `strictConverterOptions` (see below)**                                                                                                                                  |\n| **strictConverterOptions**  | `Object`                                                                   | Pass some extra settings to the default converter mentioned above. It supports the main options of `date-fns` strict converter, namingly: \u003cbr/\u003e\u003cbr/\u003e `useStrict` - `true` - needs to be `true`, otherwise the `defaultConverterOptions` have to be used (see above) \u003c/br\u003e `addSuffix` - `boolean` - results specifies if now is earlier or later than the date passed \u003cbr/\u003e `unit` - `second, minute, hour, day, month, year` if specified, will force a unit\u003cbr/\u003e`roundingMethod` - `floor, ceil, round` which way to round partial units (default=round) |\n\n\u003ca name=\"sectionComponent\"/\u003e\n\n### Component\n\nOnce the plugin is registered you can straight up use it in your app.\n\n**Basic usage**:\n\n```jsx\n\u003ctemplate\u003e\n  \u003ctimeago :datetime=\"date\"/\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n...\ndata() {\n  return {\n    date: '2021-09-01'\n  }\n}\n...\n\u003c/script\n```\n\n#### Props\n\nInstead of configurating the plugin during the registration, you can also configuate the component via `props`.\n| property | type | required | default | description |\n|----------------------|---------------------------------------------|--------------------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| **datetime** | `string \\| Date \\| number` | :heavy_check_mark: | | The `datetime` used to calculate the \"time ago\" |\n| **autoUpdate** | `number \\| boolean` | :x: | `false` | The period of time to update the component, **in seconds**. \u003cbr/\u003e This can be omitted by setting it to `0` or `false`. \u003cbr/\u003e \u003cbr/\u003e The default value for `true` is `60`(seconds). Instead of passing `true` you can also pass a custom time. |\n| **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. |\n| **converter** | `date, defaultConverterOptions \\| strictConverterOptions) =\u003e string` | :x: | | See plugin options above |\n| **defaultConverterOptions** | `Object` | :x: | | See plugin options above |\n| **strictConverterOptions** | `Object` | :x: | | See plugin options above |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0x0dr1y%2Fvue-timeago3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0x0dr1y%2Fvue-timeago3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0x0dr1y%2Fvue-timeago3/lists"}