Documentation

Vue

Counter

Counter-Up is a lightweight (only 1.3kb gzipped) module with zero dependencies that counts up to a targeted number when the number becomes visible. For more details

Installing via npm
npm i counterup2 --save
Usage
import counterUp from'counterUp2'

OR

Direct <script> include

Another way is to directly include it in your html

<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>

HTML Code

<div class="counter"></div>

Script

if (window.counterUp !== undefined) {
  const counterUp = window.counterUp["default"];
  const counterUp2 = document.querySelectorAll('.counter')
  Array.from(counterUp2, (el) => {
    if (typeof Waypoint !== typeof undefined) {
      const waypoint = new Waypoint({
        element: el,
        handler: function () {
          counterUp(el, {
            duration: 1000,
            delay: 10,
          });
          this.destroy();
        },
        offset: "bottom-in-view",
      });
    }
  })
}