{"id":15031,"library":"vue-countup-v2","title":"Vue CountUp v2 Component","description":"vue-countup-v2 is a Vue.js component that acts as a wrapper for the popular CountUp.js library, providing an easy way to animate numerical values in Vue applications. The current stable version, 4.0.0, aims for straightforward integration by encapsulating CountUp.js functionality within a reusable `<ICountUp>` component. Developers can pass properties like `delay`, `endVal`, and a comprehensive `options` object directly to the component, mirroring the `CountUp.js` API. It exposes `CountUp.js` instance methods (such as `update`, `start`, `reset`) via an `onReady` event callback, allowing programmatic control over the animation. The package's release cadence is not fixed but generally aligns with updates to its core dependency, `CountUp.js`, and was primarily developed for Vue 2 applications, as suggested by the \"v2\" in its name. Its key differentiator is simplifying the process of adding numerical animations to Vue 2 projects by abstracting the `CountUp.js` lifecycle.","status":"maintenance","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/xlsdg/vue-countup-v2","tags":["javascript","vue","countup","vue-countup","library"],"install":[{"cmd":"npm install vue-countup-v2","lang":"bash","label":"npm"},{"cmd":"yarn add vue-countup-v2","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-countup-v2","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core animation library; `vue-countup-v2` is a wrapper around it.","package":"countup.js","optional":false},{"reason":"Vue.js framework dependency for the component.","package":"vue","optional":false}],"imports":[{"note":"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.","wrong":"const ICountUp = require('vue-countup-v2');","symbol":"ICountUp","correct":"import ICountUp from 'vue-countup-v2';"}],"quickstart":{"code":"<template>\n  <div class=\"iCountUp\">\n    <ICountUp\n      :delay=\"delay\"\n      :endVal=\"endVal\"\n      :options=\"options\"\n      @ready=\"onReady\"\n    />\n  </div>\n</template>\n\n<script type=\"text/babel\">\n  import ICountUp from 'vue-countup-v2';\n\n  export default {\n    name: 'DemoCountUp',\n    components: {\n      ICountUp\n    },\n    data() {\n      return {\n        delay: 1000,\n        endVal: 120500,\n        options: {\n          useEasing: true,\n          useGrouping: true,\n          separator: ',',\n          decimal: '.',\n          prefix: '$',\n          suffix: ' USD'\n        }\n      };\n    },\n    methods: {\n      onReady: function(instance, CountUp) {\n        // The CountUp.js instance is available here to call its methods\n        console.log('CountUp instance ready:', instance);\n        console.log('CountUp library constructor:', CountUp);\n        // Example: Update the value after 3 seconds\n        setTimeout(() => {\n          instance.update(this.endVal + 25000);\n        }, 3000);\n      }\n    },\n    mounted() {\n      console.log('Component mounted with initial endVal:', this.endVal);\n    }\n  };\n</script>\n\n<style scoped>\n  .iCountUp {\n    font-size: 3em;\n    margin: 20px 0;\n    color: #4d63bc;\n    font-family: sans-serif;\n  }\n</style>","lang":"javascript","description":"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."},"warnings":[{"fix":"For 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.","message":"This 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.","severity":"breaking","affected_versions":">=4.0.0 (when used with Vue 3)"},{"fix":"Ensure `countup.js` is installed: `npm install countup.js` or `yarn add countup.js`.","message":"The `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`.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Access `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.","message":"The `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.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"For 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.","message":"The 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.","severity":"deprecated","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import ICountUp from 'vue-countup-v2';` in your script and `components: { ICountUp }` in your component options.","cause":"The `ICountUp` component was not correctly imported or registered in the parent Vue component.","error":"[Vue warn]: Failed to resolve component: ICountUp"},{"fix":"Store 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.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'update')"},{"fix":"Install `countup.js` manually: `npm install countup.js` or `yarn add countup.js`.","cause":"The `countup.js` peer dependency is missing from your project's `node_modules`.","error":"Module not found: Error: Can't resolve 'countup.js'"}],"ecosystem":"npm"}