Animated Counter For Vue.js – VueNumber

Install & Download:

# NPM
$ npm install vue-number-animation --save

Description:

An animated counter for Vue.js that animates the counting up to a number you specify.

How to use it:

1. Import Vue and the vue-animated-number component.

import VueNumberAnimation from "vue-number-animation";

2. Create the counter and specify the number you want to count towards to:

<VueNumberAnimation
  ref="numberExample"
  :to="5000"
  />

3. All default props to config the counter.

from: {
  type: [String, Number] as PropType<number>,
  default: 0,
},
to: {
  type: [String, Number] as PropType<number>,
  default: 100,
},
format: {
  type: Function as PropType<(num: number | string) => number | string>,
  default: (num: number) => num,
},
duration: {
  type: Number as PropType<number>,
  default: 1,
},
easing: {
  type: String as PropType<string>,
  default: "linear",
},
delay: {
  type: Number as PropType<number>,
  default: 0,
},
tag: {
  type: String as PropType<keyof HTMLElementTagNameMap>,
  default: "span",
},
autoplay: {
  type: Boolean as PropType<boolean>,
  default: true,
},

4. Events.

<VueNumberAnimation
  ref="numberExample" 
  :to="5000"
  @start="startFunc"
  @complete="completeFunc"
  @update="updateFunc" />

5. API methods.

• play(): starts the counter
• pause(): pauses the counter
• restart(): restarts the counter

Preview:

Changelog:

v2.0.2 (12/04/2023)

• Bugfixes

v2.0.0 (12/03/2023)

• chore: Upgrade version for 2 & 3

07/17/2021

• Fix: Build