Vue Numeric Count Animation

1.0.13 · active · verified Sun Apr 19

vue-count-to is a lightweight, dependency-free Vue component designed to animate the counting of numbers from a `startVal` to an `endVal` over a specified `duration`. It automatically determines whether to count up or down and supports customization of the easing function. Key features include the ability to set decimal places, separators, prefixes, and suffixes, and it offers `autoplay` functionality that triggers a re-count when `startVal` or `endVal` props change. The current stable version, as of the provided information, is `1.0.13`, indicating a mature and stable release. While a specific release cadence isn't explicitly mentioned in the documentation, its long-standing presence and continued use suggest it receives maintenance. Its primary differentiator is its simplicity and minimal footprint, making it ideal for straightforward numeric animations in Vue 2 applications, without the overhead of more complex animation libraries. It also supports Vue SSR.

Common errors

```
[Vue warn]: Unknown custom element: <countTo> - did you register the component correctly?
```
cause The `countTo` component was imported but not registered in the `components` option of the parent Vue component.

fix Add `countTo` to the `components` property within your Vue component's options: ```vue <script> import countTo from 'vue-count-to'; export default { components: { countTo }, // <-- Add this line // ... } </script> ```
```
TypeError: countTo is not a constructor (in browser console) or TypeError: Cannot read properties of undefined (reading 'start')
```
cause The `countTo` component was incorrectly imported using a named import syntax (`import { countTo } from 'vue-count-to';`) instead of a default import.

fix Change the import statement to use a default import: `import countTo from 'vue-count-to';`

Warnings

gotcha When `autoplay` is set to `true` (which is the default), the counting animation will automatically restart every time the `startVal` or `endVal` props change. This can lead to unexpected or repetitive animations if the values are frequently updated by other reactive data sources.
Fix: If this automatic re-counting behavior is not desired, set `autoplay` to `false` and manually control the animation using the component's `start()` method (accessed via a ref) when it should occur.
gotcha Custom `easingFn` implementations must strictly adhere to the expected signature `(t, b, c, d)` where `t` is current time, `b` is start value, `c` is change in value, and `d` is total duration. Incorrect signatures, unexpected return values, or functions that do not correctly calculate the eased value will result in broken or non-smooth animations.
Fix: Ensure your custom easing function matches the standard tweening function signature and returns the correctly interpolated value based on the input parameters. Refer to standard easing function implementations for correct patterns.

Install

npm install vue-count-to npm
yarn add vue-count-to yarn
pnpm add vue-count-to pnpm

Imports

countTo
wrong:
```
import { countTo } from 'vue-count-to';
```
correct:
```
import countTo from 'vue-count-to';
```
The component is a default export and should be imported without curly braces. For use in Vue, it must then be registered in the `components` option.
Component Registration
```
components: { countTo }
```
Registers the imported `countTo` component locally within a Vue component's options to make it available in the template.

Quickstart

This example demonstrates how to import and register the `countTo` component, set initial and target values, and include basic formatting options like decimals, separators, and prefixes.

<template>
  <div>
    <h1>Live Count:</h1>
    <countTo :startVal='startVal' :endVal='endVal' :duration='3000' :decimals="2" separator="," prefix="$"></countTo>
    <button @click="startCount">Start New Count</button>
  </div>
</template>

<script>
  import countTo from 'vue-count-to';

  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2025.56
      }
    },
    methods: {
      startCount() {
        // Example of manually changing values to trigger re-count if autoplay is true
        // Or manually start if autoplay is false via a ref (not shown in basic example)
        this.startVal = Math.floor(Math.random() * 100);
        this.endVal = Math.floor(Math.random() * 10000);
      }
    }
  }
</script>

view raw JSON →