UtilityCountdown

A countdown in a time element, not announced every second.

import { UtilityCountdown } from '@zairakai/vue-components/Utility'

Usage

<UtilityCountdown :target="…" />

Example

1d02h00m00s

<script setup>
  const target = Date.now() + 1000 * 60 * 60 * 26
</script>

<template>
  <UtilityCountdown
    :target="target"
    show-days
  />
</template>

Props

Name	Type	Default	Description
id	string
class	string
target	date|number|string	required	The moment to count down to: a date, a timestamp or an ISO string.
interval	number	1000	How often it updates, in milliseconds.
showDays	boolean	false	Show the days even when there are none.
units	object	{ days: 'd', hours: 'h', minutes: 'm', seconds: 's' }

Events

Name	Description
finished
tick

Slots

Name	Description
default

See Theming for the class hooks and the data-* state of the components.