Registry / web-framework / vue-countup-v3

vue-countup-v3

JSON →
library1.4.2jsnpmunverified

vue-countup-v3 is a Vue 3 component that wraps the popular countUp.js library (specifically version 2.6.2), extending its functionality with additional features. It provides an animated counting experience for numerical values within Vue applications. The package is currently at version 1.4.2, indicating active development with recent minor updates. It serves as a convenient and optimized way to integrate dynamic number animations into Vue 3 projects without directly managing the countUp.js instance. Key differentiators include its native Vue 3 component interface, built-in reactivity, and support for Vue-specific patterns like slots for prefix/suffix customization.

web-framework
npm install vue-countup-v3
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-COUNTUP-V3
V
vue-countup-v3
web-frameworkjavascriptv1.4.2
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

CountUp
✓ import CountUp from 'vue-countup-v3'
✗ const CountUp = require('vue-countup-v3')
This is the default export for the Vue 3 component. The CommonJS 'require' style is incorrect for modern Vue/ESM setups.
ICountUp
✓ import type { ICountUp } from 'vue-countup-v3'
✗ import { ICountUp } from 'vue-countup-v3'
For TypeScript, use 'import type' for type-only imports to prevent them from being bundled as runtime code, which can cause issues.
CountUpOptions
✓ import type { CountUpOptions } from 'vue-countup-v3'
✗ import { CountUpOptions } from 'vue-countup-v3'
As with ICountUp, use 'import type' for type-only imports in TypeScript to ensure they are removed during compilation.

Demonstrates a comprehensive usage of the CountUp component including reactive end values, custom options, loop/delay props, and event handling for initialization and completion.

<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: '❤️' // ... other countUp.js options } 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>
Debug
Known issues
gotchaWhen integrating `vue-countup-v3` into a Nuxt 3 project, you must explicitly configure Nuxt to transpile the package. Without this, you might encounter build errors or issues with client-side hydration.
fix
Add 'vue-countup-v3' to the `build.transpile` array in your `nuxt.config.ts` file: `build: { transpile: ['vue-countup-v3'] }`.
affects: >=1.0.0
gotchaIn Astro projects, `vue-countup-v3` is a client-side component and requires explicit client-side rendering directives to function correctly. Without these, the component will not render or hydrate properly.
fix
Apply client-side directives such as `client:load` and `client:only` to the component in your Astro templates (e.g., `<CountUp client:load client:only end-val={2000} />`).
affects: >=1.0.0
gotchaThe component wraps `countUp.js`, and most direct `countUp.js` configuration options should be passed via the `:options` prop as an object. Avoid trying to pass these directly as root component props unless they are explicitly documented as such by `vue-countup-v3`.
fix
Refer to the `countUp.js` documentation for available options and provide them as a JavaScript object to the `:options` prop of the `CountUp` component.
affects: >=1.0.0
gotchaThe `delay` prop specifically controls the interval *between loops* when the `loop` prop is enabled. It does not introduce an initial delay before the very first animation begins.
fix
If an initial delay before the first animation is required, implement it externally using Vue's reactivity system (e.g., `setTimeout`) to conditionally render the component or update its `end-val` after the desired delay.
affects: >=1.0.0
Errors
Common errors & fixes
Module 'vue-countup-v3' could not be resolved in Nuxt 3 build or similar build-time errors.
Nuxt 3's build process isn't automatically transpiling the 'vue-countup-v3' package.
fix
Add 'vue-countup-v3' to the `transpile` array in your `nuxt.config.ts`: `export default defineNuxtConfig({ build: { transpile: ['vue-countup-v3'] } });`
Hydration mismatch error or component not rendering on the client-side in Astro.
Astro requires explicit client-side rendering directives for interactive UI frameworks.
fix
Add `client:load client:only` directives to your `CountUp` component within Astro: `<CountUp client:load client:only :end-val="2000" />`
TS2724: 'ICountUp' is not a runtime value and cannot be used in 'import' type checking. (or similar for 'CountUpOptions')
Attempting to import TypeScript types using a standard runtime 'import' statement, which leads to compilation errors or unexpected bundling behavior.
fix
Change your type imports from `import { ICountUp, CountUpOptions } from 'vue-countup-v3'` to `import type { ICountUp, CountUpOptions } from 'vue-countup-v3'`.
Upgrade
Version history
1.4.2latest on npm
Audit
Dependencies
vuerequiredPeer dependency required for all Vue 3 applications using this component.
Agent activity
9 hits · last 30 days
node
8
OpenAI (training)
1
Resources
githubhttps://github.com/jizai1125/vue-countup-v3 ↗
packagehttps://www.npmjs.com/package/vue-countup-v3 ↗
vue-countup-v3 — npm install vue-countup-v3 · libregistry