Vue CountUp v2 Component

4.0.0 · maintenance · verified Sun Apr 19

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.

Common errors

```
[Vue warn]: Failed to resolve component: ICountUp
```
cause The `ICountUp` component was not correctly imported or registered in the parent Vue component.

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

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.
```
Module not found: Error: Can't resolve 'countup.js'
```
cause The `countup.js` peer dependency is missing from your project's `node_modules`.

fix Install `countup.js` manually: `npm install countup.js` or `yarn add countup.js`.

Warnings

breaking 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.
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.
gotcha 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`.
Fix: Ensure `countup.js` is installed: `npm install countup.js` or `yarn add countup.js`.
gotcha 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.
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.
deprecated 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.
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.

Install

npm install vue-countup-v2 npm
yarn add vue-countup-v2 yarn
pnpm add vue-countup-v2 pnpm

Imports

ICountUp
wrong:
```
const ICountUp = require('vue-countup-v2');
```
correct:
```
import ICountUp from '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.

Quickstart

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>

view raw JSON →