{"id":15513,"library":"animated-number-vue","title":"Animated Number Vue","description":"This package, `animated-number-vue` (version 1.0.0), provides a Vue 2 component designed to animate numerical values. It leverages the `animejs` library for its animation engine, offering smooth transitions for displaying numbers like prices, scores, or counts. Key features include configurable animation duration, delay, easing functions, and a `formatValue` prop for custom output formatting (e.g., currency, percentages). It also exposes callback props (`update`, `run`, `begin`, `complete`) for reacting to different stages of the animation lifecycle. Its primary differentiator is its simplicity and direct integration with Vue 2 projects, specifically using `animejs` for animation control. Given its explicit targeting of Vue 2, it is considered to be in a maintenance state, without active development or official support for Vue 3 or newer versions of the framework.","status":"maintenance","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/Leocardoso94/animated-number-vue","tags":["javascript","animation","vue","animated-number"],"install":[{"cmd":"npm install animated-number-vue","lang":"bash","label":"npm"},{"cmd":"yarn add animated-number-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add animated-number-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core animation engine used by the component.","package":"animejs","optional":false}],"imports":[{"note":"Standard ES module import for use within Vue Single File Components (SFCs).","wrong":"const AnimatedNumber = require('animated-number-vue');","symbol":"AnimatedNumber","correct":"import AnimatedNumber from 'animated-number-vue';"},{"note":"The component is a default export, attempting a named import will fail.","wrong":"import { AnimatedNumber } from 'animated-number-vue';","symbol":"AnimatedNumber (named import)","correct":"import AnimatedNumber from 'animated-number-vue';"},{"note":"For global availability in Vue 2 applications, register it as a component.","symbol":"Vue plugin registration","correct":"import AnimatedNumber from 'animated-number-vue';\nVue.component('animated-number', AnimatedNumber);"}],"quickstart":{"code":"<template>\n  <animated-number\n    :value=\"value\"\n    :formatValue=\"formatToPrice\"\n    :duration=\"300\"\n  />\n</template>\n<script>\nimport AnimatedNumber from \"animated-number-vue\";\n\nexport default {\n  components: {\n    AnimatedNumber\n  },\n  data() {\n    return {\n      value: 1000\n    };\n  },\n  methods: {\n    formatToPrice(value) {\n      return `R$ ${value.toFixed(2)}`;\n    }\n  }\n};\n</script>","lang":"javascript","description":"This quickstart demonstrates how to import and use the AnimatedNumber component within a Vue 2 Single File Component, setting a dynamic value and applying a custom formatting function."},"warnings":[{"fix":"For Vue 3 projects, seek out a different animation library or rebuild the functionality using Vue 3's composition API or a compatible animation library. If you must use this package, ensure your project remains on Vue 2.","message":"This package is explicitly built for Vue 2. It is not compatible with Vue 3 or later versions of the framework.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"If passing a string, ensure it's a valid number string that can be parsed, or convert it to a number within your component's logic or the `formatValue` callback if numerical operations are needed.","message":"The `value` prop accepts both Number and String types. However, numerical operations within the `formatValue` callback (like `toFixed`) will require the value to be a Number, so ensure type consistency or handle string parsing.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Refer to the official `animejs` documentation (https://animejs.com/documentation/) for current easing functions to ensure your `easing` prop value is valid.","message":"The underlying `animejs` library might have updated its easing function names or availability since this package's last update. Consult `animejs` documentation for the latest valid easing values.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `AnimatedNumber` is imported and registered locally within your component's `components` option, or globally via `Vue.component('animated-number', AnimatedNumber);` if using Vue 2. If in Vue 3, this package is incompatible.","cause":"The component is not properly registered in a Vue 2 application, or you are attempting to use it in a Vue 3 project.","error":"[Vue warn]: Failed to resolve component: animated-number"},{"fix":"Always use `import AnimatedNumber from 'animated-number-vue';` within Vue Single File Components or JavaScript modules. Avoid `const AnimatedNumber = require('animated-number-vue');`.","cause":"Attempting to import the component using CommonJS `require()` syntax in an environment expecting ES modules, or vice-versa.","error":"TypeError: AnimatedNumber is not a constructor (or similar CJS/ESM import error)"}],"ecosystem":"npm"}