A minimalist countdown component for vue.js 2-3
npm install @logustra/vountdownTo make @logustra/vountdown work for Vue 2, you need to have @vue/composition-api installed.
npm install @vue/composition-apiDrop <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