Registry / web-framework / vue-awesome-countdown

vue-awesome-countdown

library2.0.0jsnpmunverified

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.

web-framework

npm install vue-awesome-countdown

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-AWESOME-COUNTD

vue-awesome-countdown

web-frameworkjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueAwesomeCountdown

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

✗ import VueAwesomeCountdown from 'vue-awesome-countdown'

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

vueAwesomeCountdown (default)

✓ import vueAwesomeCountdown from 'vue-awesome-countdown'

✗ 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)

✓ const vueAwesomeCountdown = require('vue-awesome-countdown').default;

✗ const vueAwesomeCountdown = require('vue-awesome-countdown');

For global registration in CommonJS environments, typically Vue 2, the `.default` export is required.

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>

Debug

Known issues

breakingVue 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.

affects: >=2.0.0

gotchaWhen 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')`.

affects: >=1.0.0

gotchaWhen 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;`.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: countdown

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.

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')

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.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

vuerequiredRuntime dependency for a Vue component.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mlinquan/vue-awesome-countdown ↗

packagehttps://www.npmjs.com/package/vue-awesome-countdown ↗