Animated Number Vue

1.0.0 · maintenance · verified Tue Apr 21

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.

Common errors

```
[Vue warn]: Failed to resolve component: animated-number
```
cause 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)
```
cause 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');`.

Warnings

breaking This 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.
gotcha 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.
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.
deprecated 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.
Fix: Refer to the official `animejs` documentation (https://animejs.com/documentation/) for current easing functions to ensure your `easing` prop value is valid.

Install

npm install animated-number-vue npm
yarn add animated-number-vue yarn
pnpm add animated-number-vue pnpm

Imports

AnimatedNumber

wrong:

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

correct:

import AnimatedNumber from 'animated-number-vue';

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

AnimatedNumber (named import)
wrong:
```
import { AnimatedNumber } from 'animated-number-vue';
```
correct:
```
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.

Quickstart

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>

view raw JSON →