{"id":21368298,"url":"https://github.com/logustra/vountdown","last_synced_at":"2026-01-02T09:43:23.378Z","repository":{"id":104131708,"uuid":"466426078","full_name":"logustra/vountdown","owner":"logustra","description":"⏳ A minimalist countdown component for vue.js 2-3","archived":false,"fork":false,"pushed_at":"2022-09-16T02:48:47.000Z","size":98,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-01T17:22:14.083Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@logustra/vountdown","language":"Vue","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/logustra.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"logustra","ko_fi":"logustra","custom":"https://trakteer.id/logustra/tip"}},"created_at":"2022-03-05T10:52:54.000Z","updated_at":"2023-07-06T22:09:56.000Z","dependencies_parsed_at":"2023-06-12T05:15:45.280Z","dependency_job_id":null,"html_url":"https://github.com/logustra/vountdown","commit_stats":{"total_commits":38,"total_committers":2,"mean_commits":19.0,"dds":0.368421052631579,"last_synced_commit":"7685004b7062e9c3ecece246879e535f9edfab89"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logustra%2Fvountdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logustra%2Fvountdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logustra%2Fvountdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logustra%2Fvountdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logustra","download_url":"https://codeload.github.com/logustra/vountdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243841217,"owners_count":20356446,"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":[],"created_at":"2024-11-22T07:23:43.267Z","updated_at":"2026-01-02T09:43:23.335Z","avatar_url":"https://github.com/logustra.png","language":"Vue","funding_links":["https://github.com/sponsors/logustra","https://ko-fi.com/logustra","https://trakteer.id/logustra/tip"],"categories":["Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"## Vountdown\n\n[![Codecov](https://img.shields.io/codecov/c/github/logustra/vountdown)](https://codecov.io/github/logustra/vountdown?branch=master)\n[![Downloads](https://img.shields.io/npm/dm/@logustra/vountdown)](https://npmcharts.com/compare/@logustra/vountdown?minimal=true)\n[![Version](https://img.shields.io/npm/v/@logustra/vountdown)](https://www.npmjs.com/package/@logustra/vountdown)\n[![Gzip Size](https://img.badgesize.io/https://unpkg.com/@logustra/vountdown/dist/index.umd.js?compression=gzip)](https://unpkg.com/@logustra/vountdown/dist/index.umd.js)\n[![Licence](https://img.shields.io/npm/l/@logustra/vountdown)](https://www.npmjs.com/package/@logustra/vountdown)\n[![Code Style](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![Commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli)\n\n\u003e A minimalist countdown component for vue.js 2-3\n\n## Getting Started\n### NPM\n\n```shell\nnpm install @logustra/vountdown\n```\n\nTo make `@logustra/vountdown` work for Vue 2, you need to have `@vue/composition-api` installed.\n\n```shell\nnpm install @vue/composition-api\n```\n\n### CDN\nDrop `\u003cscript\u003e` inside your HTML file.\n\nVue 3\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3.2.31\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@logustra/vountdown\"\u003e\u003c/script\u003e\n```\n\nVue 2\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@2.6.14\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@vue/composition-api@1.4.9\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@logustra/vountdown\"\u003e\u003c/script\u003e\n```\n\n## Usage\n### Setup\nVue 3\n```js\nimport { createApp } from 'vue'\nimport Vountdown from '@logustra/vountdown'\nimport App from './app.vue'\n\nconst app = createApp(App)\napp.use(Vountdown)\n```\n\nVue 2\n```js\nimport Vue from 'vue'\nimport CompositionAPI from '@vue/composition-api'\nimport Vountdown from '@logustra/vountdown'\n\nVue.use(CompositionAPI)\nVue.use(Vountdown)\n```\n\n### Basic Usage\n```html\n\u003ctemplate\u003e\n  \u003cvountdown \n    :time=\"new Date('Jan 1, 2024').getTime()\" \n    v-slot=\"{ \n      days,\n      hours,\n      minutes,\n      seconds \n    }\"\n  \u003e\n    {{ days }} days {{ hours }} hours {{ minutes }} minutes {{ seconds }} seconds.\n  \u003c/vountdown\u003e\n\u003c/template\u003e\n```\n[Demo →](https://stackblitz.com/edit/vitejs-vite-utq8t4?file=src%2Fcomponents%2FbasicUsage.vue)\n\n### On-demand\n```html\n\u003ctemplate\u003e\n  \u003cbutton @click=\"auto = true\"\u003e\n    \u003cvountdown\n      :auto=\"auto\"\n      :time=\"10000\"\n      v-slot=\"{\n        isStart,\n        isDone,\n        seconds,\n      }\"\n    \u003e\n      \u003ctemplate v-if=\"isStart \u0026\u0026 !isDone\"\u003e\n        Send again {{ seconds }} seconds later\n      \u003c/template\u003e\n      \u003ctemplate v-else\u003e Send OTP \u003c/template\u003e\n    \u003c/vountdown\u003e\n  \u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ref } from 'vue'\nexport default {\n  setup() {\n    const auto = ref(false)\n\n    return {\n      auto\n    }\n  },\n}\n\u003c/script\u003e\n```\n[Demo →](https://stackblitz.com/edit/vitejs-vite-utq8t4?file=src%2Fcomponents%2FonDemand.vue)\n\n## API\n### Props\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| tag | `string` | `span` | The tag name of the component root element | \n| auto | `boolean` | `true` | Start countdown automatically |\n| time | `number` | `5000` | The time (in milliseconds) to count down from |\n\n### Events\n| Name | Parameters | Listen to | Description |\n|------|------|---------|-------------|\n| start | `(value)` | `@start` | Emitted after the countdown starts | \n| stop | `(value)` | `@stop` | Emitted after the countdown has stopped |\n| done | `(value)` | `@done` | Emitted after the  countdown has endded |\n\n### Slots\n| Name | Description |\n|------|-------------|\n| days | Slot to display days | \n| hours | Slot to display hours | \n| minutes | Slot to display minutes | \n| seconds | Slot to display seconds | \n| isStart | Slot to display when the countdown starts | \n| isStop | Slot to display when the countdown has stopped | \n| isDone | Slot to display when the countdown has endded | \n\n## Cheers me on\nLove my works? give me 🌟 or cheers me on here 😆 \u003cbr\u003e\nYour support means a lot to me. It will help me sustain my projects actively and make more of my ideas come true. \u003cbr\u003e\nMuch appreciated! ❤️ 🙏\n\n\u0026nbsp; \u0026nbsp; 🐙 [Github](https://github.com/sponsors/logustra)\u003cbr\u003e\n\u0026nbsp; \u0026nbsp; 🌍 [Ko-Fi](https://ko-fi.com/logustra)\u003cbr\u003e\n\u0026nbsp; \u0026nbsp; 🇮🇩 [Trakteer](https://trakteer.id/logustra/tip)\u003cbr\u003e\n\n## License\nMIT License © 2022 Faizal Andyka","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogustra%2Fvountdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogustra%2Fvountdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogustra%2Fvountdown/lists"}