Awesome

Vountdown

A minimalist countdown component for vue.js 2-3

Getting Started

NPM

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

CDN

Drop <script> inside your HTML file.

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31"></script>
<script src="https://cdn.jsdelivr.net/npm/@logustra/vountdown"></script>

<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>

Usage

Setup

import { createApp } from 'vue'
import Vountdown from '@logustra/vountdown'
import App from './app.vue'

const app = createApp(App)
app.use(Vountdown)

import Vue from 'vue'
import CompositionAPI from '@vue/composition-api'
import Vountdown from '@logustra/vountdown'

Vue.use(CompositionAPI)
Vue.use(Vountdown)

Basic Usage

<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>

Demo →

On-demand

<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>

Demo →

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 🌍 Ko-Fi 🇮🇩 Trakteer