Vue Equipment
Light
Sponsored by

useCountdown ​

Calculate the remaining time until a given moment.

0 Days
0 Hours
0 Minutes
0 Seconds
until 2026
<template>
  <div class="flex w-full flex-col gap-4">
    <div
      v-if="years || years === 0"
      class="type-surface-body-sm text-surface-subtle 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 '@maas/mirror/vue'
import {
  useCountdown,
  type DateTimeArray,
} from '@maas/vue-equipment/composables'

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>

Overview ​

Anatomy ​

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

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.

sh
pnpm install @maas/vue-equipment
sh
npm install @maas/vue-equipment
sh
yarn add @maas/vue-equipment
sh
bun install @maas/vue-equipment

Direct import ​

Import the composable directly where you need it.

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