{"id":12445,"library":"vue-count-to","title":"Vue Numeric Count Animation","description":"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.","status":"active","version":"1.0.13","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install vue-count-to","lang":"bash","label":"npm"},{"cmd":"yarn add vue-count-to","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-count-to","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"import { countTo } from 'vue-count-to';","symbol":"countTo","correct":"import countTo from 'vue-count-to';"},{"note":"Registers the imported `countTo` component locally within a Vue component's options to make it available in the template.","symbol":"Component Registration","correct":"components: { countTo }"}],"quickstart":{"code":"<template>\n  <div>\n    <h1>Live Count:</h1>\n    <countTo :startVal='startVal' :endVal='endVal' :duration='3000' :decimals=\"2\" separator=\",\" prefix=\"$\"></countTo>\n    <button @click=\"startCount\">Start New Count</button>\n  </div>\n</template>\n\n<script>\n  import countTo from 'vue-count-to';\n\n  export default {\n    components: { countTo },\n    data () {\n      return {\n        startVal: 0,\n        endVal: 2025.56\n      }\n    },\n    methods: {\n      startCount() {\n        // Example of manually changing values to trigger re-count if autoplay is true\n        // Or manually start if autoplay is false via a ref (not shown in basic example)\n        this.startVal = Math.floor(Math.random() * 100);\n        this.endVal = Math.floor(Math.random() * 10000);\n      }\n    }\n  }\n</script>","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `countTo` to the `components` property within your Vue component's options:\n```vue\n<script>\n  import countTo from 'vue-count-to';\n  export default {\n    components: { countTo }, // <-- Add this line\n    // ...\n  }\n</script>\n```","cause":"The `countTo` component was imported but not registered in the `components` option of the parent Vue component.","error":"[Vue warn]: Unknown custom element: <countTo> - did you register the component correctly?"},{"fix":"Change the import statement to use a default import:\n`import countTo from 'vue-count-to';`","cause":"The `countTo` component was incorrectly imported using a named import syntax (`import { countTo } from 'vue-count-to';`) instead of a default import.","error":"TypeError: countTo is not a constructor (in browser console) or TypeError: Cannot read properties of undefined (reading 'start')"}],"ecosystem":"npm"}