Animate Counting Up/Down In Vue - Countup

Install & Download:

# Yarn
$ yarn add vue-countup-v3
# NPM
$ npm i vue-countup-v3

Description:

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