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 #suffix>
    <span style="color: red">suffix</span>

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 = () => {

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


Animate Counting Up Down In Vue


v1.3.0 (06/22/2023)

  • refactor: countup.vue

v1.2.0 (05/25/2023)

  • update

v1.1.0 (11/17/2022)

  • feat: add prop decimalPlaces

Download Details:

Author: jizai1125

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-countup-v3

$ npm i vue-countup-v3

Add Comment