Animate Counting Up/Down In Vue – Countup

Countup is a Vue 3 component that animates counting up or down on your applications. Based on the countup.js library.

How to use it:

1. Import and register the CountUp component.

import CountUp from 'vue-countup-v3'

2. Add the Countup component to the template.

<count-up :end-val="1000"></count-up>

3. Slots.

<count-up :end-val="1000">
  <template #prefix>
    <span style="color: orange">prefix</span>
  </template>
  <template #suffix>
    <span style="color: red">suffix</span>
  </template>
</count-up>

4. This is a full example showing how to create a customizable countup component.

import CountUp from 'vue-countup-v3'
import type { ICountUp, CountUpOptions } from 'vue-countup-v3'
const options: CountUpOptions = {
  // Countup options
}
let countUp: ICountUp
const onInit = (ctx: ICountUp) => {
  console.log('init', ctx)
  countUp = ctx
}
const onFinished = () => {
  console.log('finished')
}

5. Possible component props.

endVal: number | string
startVal?: number | string
duration?: number | string
decimalPlaces?: number
autoplay?: boolean
loop?: boolean | number | string
delay?: number
options?: CountUpOptions

Preview:

Changelog:

v1.2.0 (05/25/2022)

• update

v1.1.0 (11/17/2022)

• feat: add prop decimalPlaces

Download Details:

Author: jizai1125

Live Demo: https://jizai1125.github.io/vue-countup-v3/examples/

Download Link: https://github.com/jizai1125/vue-countup-v3/archive/refs/heads/main.zip

Official Website: https://github.com/jizai1125/vue-countup-v3

Install & Download:

# Yarn
$ yarn add vue-countup-v3

# NPM
$ npm i vue-countup-v3