Countdown

Counts down from a target time, exposing hours, minutes, seconds, and days via slot props.

npm install @vuecs/countdown

Basic usage

1h 0m 0s remaining

Vue

<script setup lang="ts">
import { VCCountdown } from '@vuecs/countdown';
const time = 3600 * 1000;
</script>

<template>
    <VCCountdown :time="time">
        <template #default="props">
            <span class="font-medium">
                {{ props.hours }}h
                {{ props.minutes }}m
                {{ props.seconds }}s
            </span>
            remaining
        </template>
    </VCCountdown>
</template>

CSS

@import "tailwindcss";
@import "@vuecs/design";

@custom-variant dark (&:where(.dark, .dark *));

Props

Prop	Type	Default	Description
time	number	—	Time in milliseconds to count down

Slots

Slot	Props	Description
default	CountdownSlotProps	{ days, hours, minutes, seconds }

See also

• Theme System
• Behavioral Defaults