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.
npm install vue-count-toVerified import paths — ran on the pinned version, not inferred.
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.
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.
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.
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>
```Change the import statement to use a default import: `import countTo from 'vue-count-to';`
No dependency data recorded yet.