@vuecs/countdown
v2.0.8
Published
A package containing a countdown component.
Maintainers
Readme
@vuecs/countdown
<VCCountdown> — a precise countdown timer for Vue 3, part of vuecs. Renderless by default: you get a fully-typed scoped slot with every time unit and build whatever display you want around it.
✨ What's inside
- ⏱️ Typed scoped slot —
days/hours/minutes/seconds/millisecondsplustotalDays…totalMillisecondsandisCounting, all exported asCountdownSlotProps. - ▶️ Lifecycle events —
start,progress,abort,end(opt out via:emit-events="false"). - 🚀 Auto-start — begins on mount by default (
:auto-start); restart by re-binding:time. - 🎚️ Tunable tick —
:interval(default 1000 ms) and an injectable:nowfunction for deterministic tests. - 🏷️ Polymorphic + themeable —
:asto change the host element / component (string tag orRouterLink/NuxtLink); theme via thecountdownelement key.
📦 Installation
npm install @vuecs/countdown⚡ Usage
<VCCountdown :time="2 * 60 * 60 * 1000" @end="onExpired">
<template #default="{ hours, minutes, seconds }">
Offer expires in {{ hours }}h {{ minutes }}m {{ seconds }}s
</template>
</VCCountdown>📚 Documentation
Full reference + live demo: vuecs.dev/components/countdown
License
Made with 💚
Published under Apache 2.0 License.
