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.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: 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