https://github.com/logustra/vountdown
⏳ A minimalist countdown component for vue.js 2-3
https://github.com/logustra/vountdown
Last synced: 3 months ago
JSON representation
⏳ A minimalist countdown component for vue.js 2-3
- Host: GitHub
- URL: https://github.com/logustra/vountdown
- Owner: logustra
- License: mit
- Created: 2022-03-05T10:52:54.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-16T02:48:47.000Z (over 3 years ago)
- Last Synced: 2024-05-01T17:22:14.083Z (almost 2 years ago)
- Language: Vue
- Homepage: https://www.npmjs.com/package/@logustra/vountdown
- Size: 95.7 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: license.md
Awesome Lists containing this project
- awesome-vue - vountdown - A minimalist countdown component (Components & Libraries / UI Components)
README
## Vountdown
[](https://codecov.io/github/logustra/vountdown?branch=master)
[](https://npmcharts.com/compare/@logustra/vountdown?minimal=true)
[](https://www.npmjs.com/package/@logustra/vountdown)
[](https://unpkg.com/@logustra/vountdown/dist/index.umd.js)
[](https://www.npmjs.com/package/@logustra/vountdown)
[](https://standardjs.com)
[](http://commitizen.github.io/cz-cli)
> A minimalist countdown component for vue.js 2-3
## Getting Started
### NPM
```shell
npm install @logustra/vountdown
```
To make `@logustra/vountdown` work for Vue 2, you need to have `@vue/composition-api` installed.
```shell
npm install @vue/composition-api
```
### CDN
Drop `` inside your HTML file.
Vue 3
```html
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31">
```
Vue 2
```html
```
## Usage
### Setup
Vue 3
```js
import { createApp } from 'vue'
import Vountdown from '@logustra/vountdown'
import App from './app.vue'
const app = createApp(App)
app.use(Vountdown)
```
Vue 2
```js
import Vue from 'vue'
import CompositionAPI from '@vue/composition-api'
import Vountdown from '@logustra/vountdown'
Vue.use(CompositionAPI)
Vue.use(Vountdown)
```
### Basic Usage
```html
{{ days }} days {{ hours }} hours {{ minutes }} minutes {{ seconds }} seconds.
```
[Demo →](https://stackblitz.com/edit/vitejs-vite-utq8t4?file=src%2Fcomponents%2FbasicUsage.vue)
### On-demand
```html
Send again {{ seconds }} seconds later
Send OTP
import { ref } from 'vue'
export default {
setup() {
const auto = ref(false)
return {
auto
}
},
}
```
[Demo →](https://stackblitz.com/edit/vitejs-vite-utq8t4?file=src%2Fcomponents%2FonDemand.vue)
## API
### Props
| Name | Type | Default | Description |
|------|------|---------|-------------|
| tag | `string` | `span` | The tag name of the component root element |
| auto | `boolean` | `true` | Start countdown automatically |
| time | `number` | `5000` | The time (in milliseconds) to count down from |
### Events
| Name | Parameters | Listen to | Description |
|------|------|---------|-------------|
| start | `(value)` | `@start` | Emitted after the countdown starts |
| stop | `(value)` | `@stop` | Emitted after the countdown has stopped |
| done | `(value)` | `@done` | Emitted after the countdown has endded |
### Slots
| Name | Description |
|------|-------------|
| days | Slot to display days |
| hours | Slot to display hours |
| minutes | Slot to display minutes |
| seconds | Slot to display seconds |
| isStart | Slot to display when the countdown starts |
| isStop | Slot to display when the countdown has stopped |
| isDone | Slot to display when the countdown has endded |
## Cheers me on
Love my works? give me 🌟 or cheers me on here 😆
Your support means a lot to me. It will help me sustain my projects actively and make more of my ideas come true.
Much appreciated! ❤️ 🙏
🐙 [Github](https://github.com/sponsors/logustra)
🌍 [Ko-Fi](https://ko-fi.com/logustra)
🇮🇩 [Trakteer](https://trakteer.id/logustra/tip)
## License
MIT License © 2022 Faizal Andyka