Vue 3 Number Counter

Vue 3 animated number counter directive

Installing

Package manager

Using npm:

npm i vue3-number-counter

Then, import and register the component:

Global Registration

main.js

import numberCounter from "vue3-number-counter";
app.use(numberCounter);

Local Registration

• Composition API

<script setup>
import { numberCounter as vNumberCounter } from "vue3-number-counter";
</script>

• Options API

<script>
import { numberCounter } from "vue3-number-counter";

export default {
  directives: {
    "number-counter": numberCounter
  },
}
</script>

Usage

• Example 1

<script>
import { numberCounter } from "vue3-number-counter";

export default {
  directives: {
    "number-counter": numberCounter
  },
  data () {
    return {
      counter: {
        countFrom: 0,
        countTo: 100,
        duration: 1000,
        text: "% completed"
      }
    }
  }
}
</script>

<template>
      <div v-number-counter="counter">0% completed</div>
</template>

• Example 2

<script setup>
import { numberCounter as vNumberCounter } from "vue3-number-counter";

const counter = {
  countFrom: 0,
  countTo: 100,
  duration: 1000,
  text: "% completed",
};
</script>

<template>
  <div v-number-counter="counter">0% completed</div>
</template>

• Example 3

<script setup>
const counter = {
  countFrom: 0,
  countTo: 100,
  duration: 1000,
  text: "% completed",
};
</script>

<template>
  <div v-number-counter="counter">0% completed</div>
</template>

Demo

• https://vue-number-counter.netlify.app/

License