{"id":15267,"library":"vue-countup-v3","title":"Vue CountUp v3","description":"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.","status":"active","version":"1.4.2","language":"javascript","source_language":"en","source_url":"https://github.com/jizai1125/vue-countup-v3","tags":["javascript","vue","vue3","countup","vue-countup","vue3-countup","vue-count","vue-count-to","vue3-count-to","typescript"],"install":[{"cmd":"npm install vue-countup-v3","lang":"bash","label":"npm"},{"cmd":"yarn add vue-countup-v3","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-countup-v3","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for all Vue 3 applications using this component.","package":"vue","optional":false}],"imports":[{"note":"This is the default export for the Vue 3 component. The CommonJS 'require' style is incorrect for modern Vue/ESM setups.","wrong":"const CountUp = require('vue-countup-v3')","symbol":"CountUp","correct":"import CountUp from 'vue-countup-v3'"},{"note":"For TypeScript, use 'import type' for type-only imports to prevent them from being bundled as runtime code, which can cause issues.","wrong":"import { ICountUp } from 'vue-countup-v3'","symbol":"ICountUp","correct":"import type { ICountUp } from 'vue-countup-v3'"},{"note":"As with ICountUp, use 'import type' for type-only imports in TypeScript to ensure they are removed during compilation.","wrong":"import { CountUpOptions } from 'vue-countup-v3'","symbol":"CountUpOptions","correct":"import type { CountUpOptions } from 'vue-countup-v3'"}],"quickstart":{"code":"<script setup lang=\"ts\">\n  import { ref } from 'vue'\n  import CountUp from 'vue-countup-v3'\n  import type { ICountUp, CountUpOptions } from 'vue-countup-v3'\n  \n  const endValueRef = ref(2022.22)\n  // coutup.js options\n  const options: CountUpOptions = {\n    separator: '❤️'\n    // ... other countUp.js options\n  }\n  let countUp: ICountUp | undefined\n  const onInit = (ctx: ICountUp) => {\n    console.log('init', ctx)\n    countUp = ctx\n  }\n  const onFinished = () => {\n    console.log('finished')\n  }\n</script>\n\n<template>\n  <count-up \n    :end-val=\"endValueRef\"\n    :duration=\"2.5\"\n    :decimal-places=\"2\"\n    :options=\"options\"\n    :loop=\"2\"\n    :delay=\"2\"\n    @init=\"onInit\"\n    @finished=\"onFinished\"></count-up>\n</template>","lang":"typescript","description":"Demonstrates a comprehensive usage of the CountUp component including reactive end values, custom options, loop/delay props, and event handling for initialization and completion."},"warnings":[{"fix":"Add 'vue-countup-v3' to the `build.transpile` array in your `nuxt.config.ts` file: `build: { transpile: ['vue-countup-v3'] }`.","message":"When 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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} />`).","message":"In 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The 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`.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add 'vue-countup-v3' to the `transpile` array in your `nuxt.config.ts`: `export default defineNuxtConfig({ build: { transpile: ['vue-countup-v3'] } });`","cause":"Nuxt 3's build process isn't automatically transpiling the 'vue-countup-v3' package.","error":"Module 'vue-countup-v3' could not be resolved in Nuxt 3 build or similar build-time errors."},{"fix":"Add `client:load client:only` directives to your `CountUp` component within Astro: `<CountUp client:load client:only :end-val=\"2000\" />`","cause":"Astro requires explicit client-side rendering directives for interactive UI frameworks.","error":"Hydration mismatch error or component not rendering on the client-side in Astro."},{"fix":"Change your type imports from `import { ICountUp, CountUpOptions } from 'vue-countup-v3'` to `import type { ICountUp, CountUpOptions } from 'vue-countup-v3'`.","cause":"Attempting to import TypeScript types using a standard runtime 'import' statement, which leads to compilation errors or unexpected bundling behavior.","error":"TS2724: 'ICountUp' is not a runtime value and cannot be used in 'import' type checking. (or similar for 'CountUpOptions')"}],"ecosystem":"npm"}