Countup

The Countup component smoothly animates a number from a start value to a target value. It supports custom duration, easing functions, thousand separators, decimals, prefixes and suffixes.

Basic Usage

Counts from 0 to 100 by default over 2000ms.

<TCountup />

Custom Target Value

Set the target number via the modelValue prop (supports v-model for dynamic updates).

<TCountup :model-value="9999" />

Duration

Control animation duration in milliseconds via the duration prop.

<TCountup :model-value="500" :duration="500" />
<TCountup :model-value="500" :duration="2000" />
<TCountup :model-value="500" :duration="5000" />

Start Value & Delay

• start — initial value (default 0)
• delay — delay before the animation starts (ms)

<TCountup :model-value="1000" :start="500" />
<TCountup :model-value="100" :delay="1000" />

Prefix & Suffix

Add text before or after the number using prefix and suffix.

<TCountup :model-value="99" suffix="%" />
<TCountup :model-value="5000" prefix="$" separator="," />
<TCountup :model-value="128" prefix="User " suffix=" #" />

Decimal Places

Use decimals to set the number of decimal places and decimal to specify the decimal separator.

<TCountup :model-value="1234.5678" :decimals="2" />
<TCountup :model-value="99.99" :decimals="2" separator="." decimal="," />

Grouping Separator

Control thousand-grouping via useGrouping (default true) and separator.

<TCountup :model-value="1234567" separator="," />
<TCountup :model-value="1234567" separator="." />
<TCountup :model-value="1234567" separator=" " />

Easing

Three easing functions are available: linear, easeOutQuad (default), and easeOutCubic.

<TCountup :model-value="1000" easing="linear" />
<TCountup :model-value="1000" easing="easeOutQuad" />
<TCountup :model-value="1000" easing="easeOutCubic" />

Visibility Trigger

With the observeVisibility prop, the animation only starts when the component enters the viewport — ideal for large numbers at the bottom of a page.

<TCountup :model-value="10000" observe-visibility separator="," />

Programmatic Control

Force a full restart by incrementing a :key bound to the component, or call the exposed restart() method via template ref. The animation also auto-restarts when modelValue changes.

<script setup>
import { ref } from 'vue'

const targetVal = ref(8888)
const mountKey = ref(0)
function restart() { mountKey.value++ }
</script>

<template>
  <TCountup :key="mountKey" :model-value="targetVal" separator="," />
  <button @click="targetVal = Math.floor(Math.random() * 100000)">Random Value</button>
  <button @click="restart">Restart</button>
</template>

API

Props

Prop	Description	Type	Default
modelValue	Target value	number	100
start	Initial value	number	0
duration	Animation duration (ms)	number	2000
delay	Delay before animation starts (ms)	number	0
decimals	Number of decimal places	number	0
separator	Thousands separator character	string	','
decimal	Decimal separator character	string	'.'
prefix	Text prepended to the number	string	''
suffix	Text appended to the number	string	''
easing	Easing function	'linear' | 'easeOutQuad' | 'easeOutCubic'	'easeOutQuad'
useGrouping	Enable thousand grouping	boolean	true
observeVisibility	Only animate when the element becomes visible	boolean	false

Exposed Properties & Methods

Accessible via ref:

Name	Description	Type
restart()	Reset and replay the animation	() => void
currentValue	Current animated value (reactive)	ComputedRef<number>

Events

Event	Description	Parameters
finished	Emitted when the animation completes	—
update:modelValue	Emitted when the target value changes via v-model	value: number