Zero dependency, simple animated-like number iteration directive for vue components

via npm

npm install vue-number-transition

via unpkg

https://unpkg.com/[email protected]/src/index.js

First import the directive and bind it to component's directives.

import NumberTransition from 'vue-number-transition';

export default {
    directives: {
        // ..
        NumberTransition
        // ..
    }
}

Then bind the directive on your target element;

<div id="count" v-number-transition="{ target: 500, iteration: 10, speed: 1000 }">

target: The number that directive will count to. Can be computed property too.

iteration: The number of iterations until counter reaches to target number.

Example If you want to reach from 0 to 500 and iteration is 10, it will be increasing 50 by 50 (target/iteration) until 500.

speed: speed and iteration works together. The result of speed / iteration defines the interval speed between changes.