Vue3 digital scroll plugin vue-countup-v3

introduce

The vue-countup-v3 plugin is a Vue3-based digital animation plugin for creating counters with digital animation effects in websites or applications. Through this plug-in, we can easily realize the increment or decrement animation of the number, and customize its style and animation effect. This plugin can be used in many scenarios, such as displaying website page visits, app downloads, and any scenario that requires dynamic display of numbers, etc.

Effect

The plug-in supports more parameter customization, such as digital style, animation playback direction, loop playback, etc. Through these parameters, richer digital animation effects can be achieved. A simple effect is as follows:

Install

To use this plugin, you need to install dependencies, which can be installed through the npm command:

npm i vue-countup-v3

Attributes

Attributes	type	Defaults	describe
thanVal	Number | String	-	end value
startVal	Number | String	0	starting value
duration	Number	2.5	Animation duration, unit: second
decimalPlaces	Number	0	decimal places
autoplay	Boolean	true	Whether to count automatically
loop	Boolean | Number	false	Number of loops, finite number of times / infinite loop
delay	Number	0	loop interval time, unit: second
options	Object	-	configuration item

event

time	describe	return value
@init	Triggered when the CountUp instance is initialized	CountUp instance
@finished	Triggered when the count ends	-

configuration item

configuration item	type	Defaults	describe
startVal	number	0	start value
decimalPlaces	number	0	decimal places
duration	number	2	Animation duration, unit: second
useGrouping	boolean	true	Whether to use thousands separator) display
useIndianSeparators	boolean	false	Whether to use Indian digit separator
useEasing	boolean	true	Whether to enable the easing mode during the number increase process
smartEasingThreshold	number	999	Sets a threshold used to adjust the animation effect of the digital counter
smartEasingAmount	number	0.5	Controlling the easing effect of digital changes
separator	string	,	thousand separator
decimal	string	.	decimal separator
easingFn	number	easeOutExpo	Easing function for controlling number changes
formattingFn	string	-	the value used to format the counter
prefix	string	-	value prefix
suffix	string	-	numeric suffix
numerals	string[]	-	Numeric sign substitution 0 - 9
enableScrollSpy	boolean	true	The animation starts only within the visible range
scrollSpyDelay	number	50ms	Delay after target enters view range (milliseconds)
scrollSpyOnce	boolean	false	Whether to perform digital scrolling animation once when scrolling to this element
onCompleteCallback	-	-	A callback function that can be executed when the count ends
plugin	-	-	Used to replace animation effects

complete example

<script setup lang="ts">
  import {
    
     ref } from 'vue'
  import CountUp from 'vue-countup-v3'
  import type {
    
     ICountUp, CountUpOptions } from 'vue-countup-v3'
  
  const endValueRef = ref(2022.22)
  // coutup.js options
  const options: CountUpOptions = {
    
    
    separator: '❤️'
    // ...
  }
  let countUp: ICountUp | undefined
  const onInit = (ctx: ICountUp) => {
    
    
    console.log('init', ctx)
    countUp = ctx
  }
  const onFinished = () => {
    
    
    console.log('finished')
  }
</script>

<template>
  <count-up 
    :end-val="endValueRef"
    :duration="2.5"
    :decimal-places="2"
    :options="options"
    :loop="2"
    :delay="2"
    @init="onInit"
    @finished="onFinished"></count-up>
</template>