A countdown module for multi purpose usage written for Nuxt 3.
- Nuxt 3 Ready
- Autoimport
- Less config
We're preparing the documentation and playground, it will be added soon.
- Add
nuxt-countdowndependency to your project
# Using yarn
yarn add nuxt-countdown
# Using npm
npm install nuxt-countdown
# Using pnpm
pnpm add nuxt-countdown- Add
nuxt-countdownto themodulessection 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
: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 />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 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 />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>And also special thanks to @fengyuanchen, this module created with the same concept of vue-countdown package <3
# 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