Codecov Downloads Version Gzip Size Licence Code Style Commitizen
A minimalist countdown component for vue.js 2-3
npm install @logustra/vountdown
To make @logustra/vountdown work for Vue 2, you need to have @vue/composition-api installed.
npm install @vue/composition-api
Drop <script> inside your HTML file.
Vue 3
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31"></script> <script src="https://cdn.jsdelivr.net/npm/@logustra/vountdown"></script>
Vue 2
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.4.9"></script> <script src="https://cdn.jsdelivr.net/npm/@logustra/vountdown"></script>
Vue 3
import { createApp } from 'vue' import Vountdown from '@logustra/vountdown' import App from './app.vue' const app = createApp(App) app.use(Vountdown)
Vue 2
import Vue from 'vue' import CompositionAPI from '@vue/composition-api' import Vountdown from '@logustra/vountdown' Vue.use(CompositionAPI) Vue.use(Vountdown)
<template> <vountdown :time="new Date('Jan 1, 2024').getTime()" v-slot="{ days, hours, minutes, seconds }" > {{ days }} days {{ hours }} hours {{ minutes }} minutes {{ seconds }} seconds. </vountdown> </template>
<template> <button @click="auto = true"> <vountdown :auto="auto" :time="10000" v-slot="{ isStart, isDone, seconds, }" > <template v-if="isStart && !isDone"> Send again {{ seconds }} seconds later </template> <template v-else> Send OTP </template> </vountdown> </button> </template> <script> import { ref } from 'vue' export default { setup() { const auto = ref(false) return { auto } }, } </script>
| 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 |
| 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 |
| 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 |
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! ❤️ 🙏
MIT License © 2022 Faizal Andyka