{"id":12400,"library":"vue-awesome-countdown","title":"Vue Awesome Countdown","description":"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.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/mlinquan/vue-awesome-countdown","tags":["javascript","vue","countdown","timer","vue2","vue3","typescript"],"install":[{"cmd":"npm install vue-awesome-countdown","lang":"bash","label":"npm"},{"cmd":"yarn add vue-awesome-countdown","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-awesome-countdown","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for a Vue component.","package":"vue","optional":false}],"imports":[{"note":"Used for local component registration in Vue 3 SFCs and Vue 2 local components.","wrong":"import VueAwesomeCountdown from 'vue-awesome-countdown'","symbol":"VueAwesomeCountdown","correct":"import { VueAwesomeCountdown } from 'vue-awesome-countdown'"},{"note":"Used for global registration via `Vue.use()` in both Vue 2 and Vue 3. The global component name can be configured.","wrong":"import { vueAwesomeCountdown } from 'vue-awesome-countdown'","symbol":"vueAwesomeCountdown (default)","correct":"import vueAwesomeCountdown from 'vue-awesome-countdown'"},{"note":"For global registration in CommonJS environments, typically Vue 2, the `.default` export is required.","wrong":"const vueAwesomeCountdown = require('vue-awesome-countdown');","symbol":"vueAwesomeCountdown (CommonJS)","correct":"const vueAwesomeCountdown = require('vue-awesome-countdown').default;"}],"quickstart":{"code":"<template>\n  <VueAwesomeCountdown :end-time=\"endTime\">\n    <template v-slot:process=\"{ timeObj }\">\n      <span>{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>\n    </template>\n    <template v-slot:finish>\n      <span>Done!</span>\n    </template>\n  </VueAwesomeCountdown>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VueAwesomeCountdown } from 'vue-awesome-countdown'\n\nconst endTime = ref(Date.now() + 60000) // Set countdown for 1 minute\n</script>","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Specify a unique component name during global registration: `Vue.use(vueAwesomeCountdown, 'myUniqueCountdownComponent')`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your `require` statement specifically targets the default export: `const vueAwesomeCountdown = require('vue-awesome-countdown').default;`.","message":"When using CommonJS `require()` for global registration, you must access the `.default` export, e.g., `require('vue-awesome-countdown').default`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The component has not been registered or imported correctly in your Vue application.","error":"[Vue warn]: Failed to resolve component: countdown"},{"fix":"Update your slot syntax to `v-slot`. For example, replace `<span slot=\"process\" slot-scope=\"{ timeObj }\">` with `<template v-slot:process=\"{ timeObj }\"><span>`.","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.","error":"[Vue warn]: slot-scope is deprecated. Use v-slot instead."},{"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.","cause":"Attempting to access properties of `timeObj` before it is correctly populated or if the slot scope is not properly destructured.","error":"TypeError: Cannot read properties of undefined (reading 's')"}],"ecosystem":"npm"}