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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
ICountUp
✓ import ICountUp from 'vue-countup-v2';
✗ const ICountUp = require('vue-countup-v2');
This is the primary component import. While CommonJS `require` might work in some setups, modern Vue (especially with build tools like Vite/Vue CLI) prefers ESM `import` statements.
This example demonstrates how to integrate `ICountUp` into a Vue 2 component, passing dynamic props and accessing the `CountUp.js` instance via the `@ready` event to perform an update.
<template>
<div class="iCountUp">
<ICountUp
:delay="delay"
:endVal="endVal"
:options="options"
@ready="onReady"
/>
</div>
</template>
<script type="text/babel">
import ICountUp from 'vue-countup-v2';
export default {
name: 'DemoCountUp',
components: {
ICountUp
},
data() {
return {
delay: 1000,
endVal: 120500,
options: {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '$',
suffix: ' USD'
}
};
},
methods: {
onReady: function(instance, CountUp) {
// The CountUp.js instance is available here to call its methods
console.log('CountUp instance ready:', instance);
console.log('CountUp library constructor:', CountUp);
// Example: Update the value after 3 seconds
setTimeout(() => {
instance.update(this.endVal + 25000);
}, 3000);
}
},
mounted() {
console.log('Component mounted with initial endVal:', this.endVal);
}
};
</script>
<style scoped>
.iCountUp {
font-size: 3em;
margin: 20px 0;
color: #4d63bc;
font-family: sans-serif;
}
</style>
Debug
Known issues
breakingThis package is explicitly named `vue-countup-v2` which strongly implies it is built for Vue 2. Using it directly in a Vue 3 project is likely to result in breaking changes and compatibility issues due to fundamental API differences between Vue 2 and Vue 3. A separate package, `vue-countup-v3`, exists for Vue 3 compatibility.fixFor Vue 3 projects, consider using a dedicated Vue 3 compatible library like `vue-countup-v3` or migrating your project to Vue 2.7 with `@vue/compat` for transitional support.
affects: >=4.0.0 (when used with Vue 3)
gotchaThe `countup.js` library is a peer dependency and must be installed separately. The `vue-countup-v2` component will not function without `countup.js` being present in your project's `node_modules`.fixEnsure `countup.js` is installed: `npm install countup.js` or `yarn add countup.js`.
affects: >=4.0.0
gotchaThe `CountUp.js` instance methods (e.g., `start`, `pauseResume`, `reset`, `update`) are not directly importable from `vue-countup-v2`. They are exposed via the `instance` argument passed to the `@ready` event handler of the `ICountUp` component.fixAccess `CountUp.js` methods exclusively through the `instance` object provided in the `@ready` event. For example, `instance.update(newVal)` within your `onReady` method or a function that stores the instance.
affects: >=4.0.0
deprecatedThe package `vue-countup-v2` appears to be in maintenance mode or abandoned. Its latest commit on GitHub was several years ago, and there have been no recent updates to align with newer Vue 2 versions or address potential bugs that might arise in newer browser environments.fixFor new projects, especially those using Vue 2, evaluate alternatives that are actively maintained. For existing projects, be aware that future compatibility issues or security vulnerabilities might not be addressed.
affects: >=4.0.0
Errors
Common errors & fixes
[Vue warn]: Failed to resolve component: ICountUp
The `ICountUp` component was not correctly imported or registered in the parent Vue component.
fixEnsure you have `import ICountUp from 'vue-countup-v2';` in your script and `components: { ICountUp }` in your component options. TypeError: Cannot read properties of undefined (reading 'update')
Attempting to call an `CountUp.js` instance method (like `update`) before the component's `@ready` event has emitted the `instance` object, or on an incorrect reference.
fixStore the `instance` object provided by the `@ready` event in your component's `data` and ensure any calls to its methods are made after the `onReady` handler has executed, or within the handler itself.
Module not found: Error: Can't resolve 'countup.js'
The `countup.js` peer dependency is missing from your project's `node_modules`.
fixInstall `countup.js` manually: `npm install countup.js` or `yarn add countup.js`.
Audit
Dependencies
countup.jsrequiredCore animation library; `vue-countup-v2` is a wrapper around it.
vuerequiredVue.js framework dependency for the component.