vue-chronoflip

A premium animated flip-clock countdown component for Vue 3.

Install

npm install vue-chronoflip

Usage

<script setup>
import { Countdown } from 'vue-chronoflip'
</script>

<template>
  <Countdown date="2026-12-31T23:59:59" />
</template>

That's it — no separate CSS import needed, styles ship inside the component.

Props

<Countdown />

| Prop | Type | Default | Description | |--------|----------|--------------------------|--------------------------------------| | date | String | "2026-01-01T00:00:00" | Target date/time to count down to. |

Renders four flip units (Days, Hours, Minutes, Seconds) that animate as the countdown ticks.

Global registration

import { createApp } from 'vue'
import VueChronoFlip from 'vue-chronoflip'

createApp(App).use(VueChronoFlip).mount('#app')

This registers <Countdown /> and <CountdownFlipUnit /> globally.

License

MIT