A countdown module for multi purpose usage written for Nuxt 3 or newer.
- Nuxt 3 Ready
- Autoimport
- Less config
While we're preparing detailed documentation and playground, you can check the examples below.
- Add
nuxt-countdown
dependency to your project
# Using yarn
yarn add nuxt-countdown
# Using npm
npm install nuxt-countdown
# Using pnpm
pnpm add nuxt-countdown
- Add
nuxt-countdown
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-countdown'
]
})
That's it! You can now use Countdown Component in your Nuxt app ✨
When you add this module, the <Countdown>
component will be automatically imported into the project.
<template>
<Countdown
v-slot="{ days, hours, minutes, seconds }"
:date="new Date('Oct 19, 2026 16:50:30')"
>
Time Remaining: {{ days }} days, {{ hours }} hours,
{{ minutes }} minutes, {{ seconds }} seconds.
</Countdown>
</template>
<template>
<Countdown
:time="2 * 24 * 60 * 60 * 1000"
v-slot="{ days, hours, minutes, seconds }"
>
Time Remaining:{{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }} seconds.
</Countdown>
</template>
You can set custom interval time value for update countdown values.
<template>
<Countdown
:time="time"
:interval="100"
v-slot="{ days, hours, minutes, seconds, milliseconds }"
>
New Year Countdown:{{ days }} days, {{ hours }} hours,
{{ minutes }} minutes, {{ seconds }}.{{ Math.floor(milliseconds / 100) }}
seconds.
</Countdown>
</template>
<script setup lang="ts">
const now: Date = new Date();
const newYear: Date = new Date(now.getFullYear() + 1, 0, 1);
const time: Ref<number> = ref(newYear.getTime() - now.getTime());
<script />
If you want to show years in countdown, you can use withYear
prop.
Default value of withYear
prop is false
. You can set it to true
to show years.
<template>
<Countdown
v-slot="{ years, days, hours, minutes, seconds }"
:date="new Date('Oct 19, 2026 16:50:30')"
>
Time Remaining: {{ years }} years, {{ days }} days, {{ hours }} hours,
{{ minutes }} minutes, {{ seconds }} seconds.
</Countdown>
</template>
You can modify the slot props provided from component for different purposes with :transform
prop.
For example, following code adding 0 in front of the slot values if they are one digit:
<template>
<Countdown
:time="2 * 24 * 60 * 60 * 1000"
:transform="transformSlotProps"
v-slot="{ days, hours, minutes, seconds }"
>
Time Remaining:{{ days }} days, {{ hours }} hours, {{ minutes }} minutes,
{{ seconds }} seconds.
</Countdown>
</template>
<script setup lang="ts">
const transformSlotProps = (props: Record<string, number>) => {
const formattedProps: Record<string, string> = {};
Object.entries(props).forEach(([key, value]) => {
formattedProps[key] = (value as number) < 10 ? `0${value}` : String(value);
});
return formattedProps;
};
<script />
You can specify the wrapper element to render with :tag
prop. Default value is div
.
<template>
<Countdown
tag="span"
:time="2 * 24 * 60 * 60 * 1000"
v-slot="{ days, hours, minutes, seconds }"
>
Time Remaining:{{ days }} days, {{ hours }} hours, {{ minutes }} minutes,
{{ seconds }} seconds.
</Countdown>
</template>
Will render as:
<span>
Time Remaining: 1 days, 23 hours, 59 minutes, 53 seconds.
</span>
You might want to start countdown after some functionality.
For example, the following code shows how to make disable a button after first click and adding a 60 second countdown until re-enable button.
<template>
<button type="button" :disabled="counting" @click="startCountdown">
<Countdown
v-if="counting"
v-slot="{ totalSeconds }"
:time="60100"
@end="onCountdownEnd"
>
Fetch again {{ totalSeconds }} seconds later
</Countdown>
<span v-else>Fetch Verification Code</span>
</button>
</template>
<script setup lang="ts">
const counting: Ref<boolean> = ref(false);
const startCountdown = () => {
counting.value = true;
};
const onCountdownEnd = () => {
counting.value = false;
};
<script />
<template>
<Countdown
v-slot="{ totalDays, totalHours, totalMinutes, totalSeconds }"
:date="new Date('Oct 19, 2026 16:50:30')"
>
<br />
Time Remaining: {{ totalDays }} days or {{ totalHours }} hours or
{{ totalMinutes }} minutes or {{ totalSeconds }} seconds.
</Countdown>
</template>
With module options, you can set prefix countdown component. You must add countdown
key to nuxt.config.ts
, here's the example:
export default defineNuxtConfig({
modules: [
'nuxt-countdown'
],
countdown: {
prefix: 'MY' // if it's not defined, you can use the components as shown as in the docs.
}
})
With prefix option, then you can use the components as:
<template>
<MYCountdown />
</template>
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Release new version
npm run release
This software is licensed under the MIT License | @volkanakkus | Special thanks to @fengyuanchen 💚