@logustra/vountdown v0.1.10

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

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

Events

Slots

Cheer me on

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

    🇮🇩 Trakteer     🌍 Ko-Fi

License

MIT License © 2022 Faizal Andyka