useCountdown

Calculate the remaining time until a given moment.

0 Days

0 Hours

0 Minutes

0 Seconds

until 2027

DefaultDemo.vue

<template>
  <div class="flex w-full flex-col gap-4">
    <div
      v-if="years || years === 0"
      class="type-surface-body-sm text-surface-muted flex flex-col items-center gap-2"
    >
      <m-badge>{{ days }} Day{{ days !== 1 ? 's' : '' }}</m-badge>
      <m-badge>{{ hours }} Hour{{ hours !== 1 ? 's' : '' }}</m-badge>
      <m-badge>{{ minutes }} Minute{{ minutes !== 1 ? 's' : '' }}</m-badge>
      <m-badge>{{ seconds }} Second{{ seconds !== 1 ? 's' : '' }}</m-badge>
      <span class="pt-4">until {{ nextYear }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { MBadge } from 'mirror-compat'
import {
  useCountdown,
  type DateTimeArray,
} from '@maas/vue-equipment/composables/useCountdown'

const nextYear = computed(() => new Date().getFullYear() + 1)
const refDate = ref(`${nextYear.value}-01-01 00:00:00`)

const refDateArray = computed<DateTimeArray>(() => {
  const date = new Date(refDate.value)
  return [
    date.getFullYear(),
    date.getMonth() + 1,
    date.getDate(),
    date.getHours(),
    date.getMinutes(),
    date.getSeconds(),
  ]
})

const { years, days, hours, minutes, seconds } = useCountdown({
  endDateTime: refDateArray,
  timezone: 'Europe/Berlin',
})
</script>

Anatomy

import {
  useCountdown,
  type DateTimeArray,
} from '@maas/vue-equipment/composables/useCountdown'

const nextYear = computed(() => new Date().getFullYear() + 1)
const refDate = ref(`${nextYear.value}-01-01 00:00:00`)

const refDateArray = computed(() => {
  const date = new Date(refDate.value)
  return [
    date.getFullYear(),
    date.getMonth() + 1,
    date.getDate(),
    date.getHours(),
    date.getMinutes(),
    date.getSeconds(),
  ]
})

function callback() {
  console.log('Countdown finished!')
}

const args = {
  endDateTime: dateArray,
  timezone: 'Europe/Berlin',
}

const { years, days, hours, minutes, seconds } = useCountdown(args, callback)

Installation

CLI

Add @maas/vue-equipment to your dependencies.

pnpm add @maas/vue-equipment

Direct import

Import the composable directly where you need it.

import {
  useCountdown,
  type DateTimeArray,
} from '@maas/vue-equipment/composables/useCountdown'

Peer Dependencies

useCountdown relies on the following optional peer dependencies in addition to the core peer dependencies. Package managers don’t install optional peer dependencies automatically, so add them to your project.

Package
`@maas/magic-timer`
`luxon`

Installation

pnpm add @maas/magic-timer luxon