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.

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 |

Cheer me on

If you like my works, you can cheer me on here 😆

    🇮🇩 Trakteer     🌍 Ko-Fi

License

MIT License © 2022 Faizal Andyka