Vue Awesome Countdown

2.0.0 · active · verified Sun Apr 19

vue-awesome-countdown is a robust and precise countdown plugin designed for both Vue 2.5.0+ and Vue 3 applications, offering high performance and comprehensive TypeScript support. The current stable version is 2.0.0. While a specific release cadence isn't published, its simultaneous support for both major Vue versions indicates active maintenance and commitment to modern Vue ecosystems. Key differentiators include its focus on high accuracy for timing-sensitive applications, the provision of detailed time objects (`timeObj`) for granular control over display, and flexible integration methods including global registration with custom naming or direct component import for local scoping. It also gracefully handles the differing slot syntaxes between Vue 2 and Vue 3, making it adaptable across various project setups.

Common errors

```
[Vue warn]: Failed to resolve component: countdown
```
cause The component has not been registered or imported correctly in your Vue application.

fix Ensure the component is either globally registered with `Vue.use(vueAwesomeCountdown)` or locally imported and registered in the `components` option of your Vue instance/SFC.
```
[Vue warn]: slot-scope is deprecated. Use v-slot instead.
```
cause You are using the older `slot-scope` syntax in a Vue 2.6+ or Vue 3 environment, where `v-slot` is the recommended and modern approach.

fix Update your slot syntax to `v-slot`. For example, replace `<span slot="process" slot-scope="{ timeObj }">` with `<template v-slot:process="{ timeObj }"><span>`.
```
TypeError: Cannot read properties of undefined (reading 's')
```
cause Attempting to access properties of `timeObj` before it is correctly populated or if the slot scope is not properly destructured.

fix Verify that `timeObj` is correctly destructured from the `v-slot` (or `slot-scope`) props, e.g., `<template v-slot:process="{ timeObj }">`. Also ensure the `endTime` prop is a valid future timestamp.

Warnings

breaking Vue 2.x users should be aware of slot syntax changes. For Vue 2.5.0+, use `slot-scope`. For Vue 2.6.0+ (and Vue 3), use `v-slot` syntax.
Fix: Migrate `slot="process" slot-scope="anyYouWantedScopName"` to `<template v-slot:process="anyYouWantedScopName">` or `<template v-slot:process="{ timeObj }">` for Vue 2.6+ and Vue 3.
gotcha When globally registering the component using `Vue.use(vueAwesomeCountdown)`, the default component names are `countdown` and `vac`. These can conflict with other globally registered components.
Fix: Specify a unique component name during global registration: `Vue.use(vueAwesomeCountdown, 'myUniqueCountdownComponent')`.
gotcha When using CommonJS `require()` for global registration, you must access the `.default` export, e.g., `require('vue-awesome-countdown').default`.
Fix: Ensure your `require` statement specifically targets the default export: `const vueAwesomeCountdown = require('vue-awesome-countdown').default;`.

Install

npm install vue-awesome-countdown npm
yarn add vue-awesome-countdown yarn
pnpm add vue-awesome-countdown pnpm

Imports

VueAwesomeCountdown

wrong:

import VueAwesomeCountdown from 'vue-awesome-countdown'

correct:

import { VueAwesomeCountdown } from 'vue-awesome-countdown'

Used for local component registration in Vue 3 SFCs and Vue 2 local components.

vueAwesomeCountdown (default)
wrong:
```
import { vueAwesomeCountdown } from 'vue-awesome-countdown'
```
correct:
```
import vueAwesomeCountdown from 'vue-awesome-countdown'
```
Used for global registration via `Vue.use()` in both Vue 2 and Vue 3. The global component name can be configured.
vueAwesomeCountdown (CommonJS)
wrong:
```
const vueAwesomeCountdown = require('vue-awesome-countdown');
```
correct:
```
const vueAwesomeCountdown = require('vue-awesome-countdown').default;
```
For global registration in CommonJS environments, typically Vue 2, the `.default` export is required.

Quickstart

Demonstrates how to use `vue-awesome-countdown` as a locally imported component in a Vue 3 Composition API SFC with TypeScript, displaying remaining time and a 'Done!' message.

<template>
  <VueAwesomeCountdown :end-time="endTime">
    <template v-slot:process="{ timeObj }">
      <span>{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>
    </template>
    <template v-slot:finish>
      <span>Done!</span>
    </template>
  </VueAwesomeCountdown>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueAwesomeCountdown } from 'vue-awesome-countdown'

const endTime = ref(Date.now() + 60000) // Set countdown for 1 minute
</script>

view raw JSON →