Registry / web-framework / animated-number-vue

animated-number-vue

library1.0.0jsnpmunverified

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.

web-framework

npm install animated-number-vue

github ↗package ↗

INSTALL

IMPORT

SIG · ANIMATED-NUMBER-VU

animated-number-vue

web-frameworkjavascriptv1.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

AnimatedNumber

✓ import AnimatedNumber from 'animated-number-vue';

✗ const AnimatedNumber = require('animated-number-vue');

Standard ES module import for use within Vue Single File Components (SFCs).

AnimatedNumber (named import)

✓ import AnimatedNumber from 'animated-number-vue';

✗ import { AnimatedNumber } from 'animated-number-vue';

The component is a default export, attempting a named import will fail.

Vue plugin registration

✓ import AnimatedNumber from 'animated-number-vue'; Vue.component('animated-number', AnimatedNumber);

For global availability in Vue 2 applications, register it as a component.

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.

<template> <animated-number :value="value" :formatValue="formatToPrice" :duration="300" /> </template> <script> import AnimatedNumber from "animated-number-vue"; export default { components: { AnimatedNumber }, data() { return { value: 1000 }; }, methods: { formatToPrice(value) { return `R$ ${value.toFixed(2)}`; } } }; </script>

Debug

Known issues

breakingThis package is explicitly built for Vue 2. It is not compatible with Vue 3 or later versions of the framework.

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.

affects: >=1.0.0

gotchaThe `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.

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.

affects: >=1.0.0

deprecatedThe 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.

fix

Refer to the official `animejs` documentation (https://animejs.com/documentation/) for current easing functions to ensure your `easing` prop value is valid.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: animated-number

The component is not properly registered in a Vue 2 application, or you are attempting to use it in a Vue 3 project.

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.

TypeError: AnimatedNumber is not a constructor (or similar CJS/ESM import error)

Attempting to import the component using CommonJS `require()` syntax in an environment expecting ES modules, or vice-versa.

fix

Always use `import AnimatedNumber from 'animated-number-vue';` within Vue Single File Components or JavaScript modules. Avoid `const AnimatedNumber = require('animated-number-vue');`.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

animejsrequiredCore animation engine used by the component.

Agent activity

17 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Leocardoso94/animated-number-vue ↗

packagehttps://www.npmjs.com/package/animated-number-vue ↗