Vue 3 support

[riderx]

i will upgrade one of my project who have your module, do you plan to make it work with vue 3

[velen-lqc]

I don't think this plugin is updated anymore.

You can build a simplified version like this using @vueuse/core library

AnimatedNumberVue Component

<template>
  <div ref="target">
    <p>{{ counter }}</p>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import {
  TransitionPresets,
  useTransition,
  useIntersectionObserver,
} from '@vueuse/core';

export default {
  name: 'AnimatedNumberVue',
  props: {
    value: Number,
  },
  setup(props) {
    const source = ref(0);

    const target = ref(null);

    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        if (isIntersecting) {
          source.value = props.value;
          stop();
        }
      }
    );

    const output = useTransition(source, {
      duration: 1000,
      transition: TransitionPresets.easeInOutCubic,
    });

    const counter = computed(() => Math.ceil(output.value));

    return { counter, target };
  },
};
</script>

Usage

<AnimatedNumberVue :value="100" />