Getting Started

Installation

Prerequisites

• Vue.js 3.x

npm

$ npm install vue-to-counter --save

pnpm

$ pnpm add vue-to-counter

yarn

$ yarn add vue-to-counter

Note

VueToCounter currently has two optional dependencies that are not installed by default due to their large size. You can manually install them as needed.

• decimal.js: Decimal.js provides nearly unlimited precision for handling large numbers/high-precision floating-point calculations. When to use it

  

• grapheme-splitter: grapheme-splitter can correctly split strings containing emojis. When to use it

  

Register/Import Component

Global Registration

main.js/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import VueToCounter from "vue-to-counter";

createApp(App).use(VueToCounter).mount("#app");

Local Import

<script setup>
import { VueToCounter } from "vue-to-counter";
</script>

<template>
  <VueToCounter />
</template>

Usage

You only need to update the value, and VueToCounter will handle the rest automatically.

`VueToCounter` is like this, you just need to update the value, but `VueToCounter` has a lot to consider. XD

Below is a simple example where VueToCounter will automatically respond to changes in the number and handle the increment/decrement animation.

---

0110000220876543210876543210

---

GettingStartedDemo.vue

<script setup>
import { onMounted, ref } from "vue";

const userCount = ref(1000);
onMounted(() => {
  setInterval(() => (userCount.value += Math.floor(Math.random() * 10)), 1100);
});
</script>

<template>
  <vue-to-counter-number
    class="font-mono font-bold self-center"
    :value="userCount"
  />
</template>

<style scoped></style>

Next Steps

• Want to see more examples of VueToCounter? Check out Examples.
• Want to learn about VueToCounter configuration options? Check out Configuration and API.
• Want to explore more possibilities with VueToCounter styles and animations, such as achieving effects like this? You can start from In-depth VueToCounter.