vue-ani-number

A Vue 3 component, provide a convenient and light-weight number animation.

Demo

Requirements

• vue.js 3.x

Installation

yarn add vue-ani-number

or

npm install vue-ani-number

Usage

• use plugin

import { createApp } from 'vue';
import App from './App.vue';
import VueAniNumber from 'vue-ani-number'

createApp(App).use(VueAniNumber).mount('#app');

• animation would be triggered by number changes

<template>
  <vue-ani-number :number="number" />
</template>

export default {
  name: "App",
  data() {
    return {
      number: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.number = 88888
      window.setTimeout(() => {
        this.number = 545876
      }, 5000)
    })
  }
};

Customize configuration

See Configuration Reference.