React, Vue, Svelte and a plain page

React#

import { Countdown } from '@devix-labs/countdown/react';
import '@devix-labs/countdown/styles.css';

<Countdown
  deadline={sale.endsAt}
  variant="boxes"
  onComplete={() => router.refresh()}
/>

Changing deadline moves it; the rest of the options are read at mount, as a DOM widget's constructor is, so pass a key to rebuild.

Vue#

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { countdown } from '@devix-labs/countdown/vue';
import '@devix-labs/countdown/styles.css';

const props = defineProps({ deadline: String });
const host = ref(null);
let timer;

onMounted(() => { timer = countdown(host.value, { deadline: props.deadline }); });
onBeforeUnmount(() => timer?.destroy());
</script>

<template><div ref="host" /></template>

Svelte#

<script>
  import { countdown } from '@devix-labs/countdown/svelte';
  import '@devix-labs/countdown/styles.css';

  export let deadline;
</script>

<div use:countdown={{ deadline, variant: 'clock' }} />

A web component#

<script type="module" src="https://devix.pk/cdn/oss/countdown@1.0.0/element.js"></script>

<dx-countdown deadline="2026-12-31T23:59:59Z" variant="clock" locale="ar-EG"></dx-countdown>

Attributes: deadline, variant, locale, done-text, no-labels, overtime. It fires complete, and exposes .countdown.

Laravel and Blade#

The deadline is the only thing the server needs to hand over, and <time> is the right element for it:

<div id="sale"></div>

<script type="module">
  import { createCountdownWidget, serverClock } from '/cdn/oss/countdown@1.0.0/index.js';

  createCountdownWidget(document.querySelector('#sale'), {
    deadline: @json($sale->ends_at->toIso8601String()),
    // The server's own clock, so a visitor's wrong one cannot end the sale early.
    now: serverClock(@json(now()->toIso8601String())),
    locale: @json(app()->getLocale()),
    onComplete: () => window.location.reload(),
  });
</script>

Always send the deadline as ISO 8601 with an offset — toIso8601String(), not a formatted local string. A countdown is the one place a missing timezone becomes hours of error rather than a cosmetic problem.

Server rendering#

Nothing touches window at import time, so importing this on a server is safe, and partsOf/clock/words will render a value into the HTML.

Be aware of what that value is, though: it is correct at the moment the page was generated and stale by the time it arrives — more so behind a cache. The widget recomputes on mount, so the number corrects itself immediately; if the page is cached for minutes, render the deadline rather than the remaining time and let the browser do the arithmetic.