nuxt-x-affiliate
Countdown
Live countdown timer for limited-time offers — auto-hides on expiry or shows "Expired" badge.
Countdown
The XAFCountdown component is a live ticking days/hours/minutes/seconds timer for limited-time offers, product launches, or deal expirations. Auto-updates every second client-side and either hides or shows an "Expired" badge when the end time passes.
Components
<XAFCountdown />
<XAFCountdown
ends-at="2026-12-31T23:59:59Z"
title="Black Friday deal"
body="Up to 40% off our top-rated picks."
cta-href="/black-friday"
cta-label="Shop the sale"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
endsAt | string | required | Target end time as ISO date string. |
title | string | "Limited-time offer" | Optional headline. |
body | string | — | Optional body copy. |
ctaHref | string | — | CTA link target. |
ctaLabel | string | "Shop now" | CTA button label. |
onExpire | 'hide' | 'show-expired' | 'hide' | What to render once the timer hits zero. |
The timer block uses role="timer" with aria-live="polite" so screen readers announce the running countdown (and the expired state).
AI Context
component: XAFCountdown
package: "@xenterprises/nuxt-x-affiliate"
use-when: Live countdown timer for limited-time offers with auto-expiry handling (hide or show "Expired" badge).