Skip to content

logustra/vountdown

Repository files navigation

Vountdown

Codecov Downloads Version Gzip Size Licence Code Style Commitizen

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.

Vue 3

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@logustra/vountdown"></script>

Vue 2

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@logustra/vountdown"></script>

Usage

Setup

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)

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

License

MIT License © 2022 Faizal Andyka