Create animations that display numerical data with Vue Countup

vue-countup-v2

A Plugin which animates a numerical value by counting to it. Use it as a Vue component, that acts as a wrapper for countUp.js(included Angular module.).

Example

Installation

npm install --save vue-countup-v2

App.vue

import ICountUp from 'vue-countup-v2'

export default {
name: 'view',
components: {
    ICountUp
},
data () {
    return {
        options: {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
            prefix: '',
            suffix: ''
        }
    }
},
methods: {
    callback: function (ins) {
        ins.update(ins.endVal + 100)
    }
}
}

In the template

    <i-count-up
    :start="0" // number to start from
    :end="120500" // ending number
    :decimals="1"
    :duration="5" /duration in seconds
    :options="options" // bind to the options object
    :callback="callback"
    ></i-count-up>

To see how options affect the result, check the Count.js live demo.

Find the repo on GitHub.