[Vuejs]-Using CountUp in Vue

There are few things you need to do to use vue-countup.

First install it using following command in your code directory:

npm install --save vue-countup

This will install this and create a dependency entry in package.json.

Now you have to tell Vue, that you are going to use an npm library which you can do using following(probably in app.js or where you have imported Vue):

Vue.use(window.VueCountUp);

After this two steps you can go ahead and use following in your template:

<vuecountup class="myCounter" :end="teamB" :duration="2.5" :options="{useEasing : true,
            useGrouping : true,
            separator : ',',
            decimal : '.',
            prefix : '',
            suffix : ''}"></vuecountup>

I just want to share if anyone needs in the future

Template:

  <div class="col-md-4 mb-4">
            <div class="row">
            <div class="col-6 pr-0">
                <h4 class="display-4 text-right mb-0 count1">
                    <ICountUp
                        :delay="customer.delay"
                        :endVal="customer.endVal"
                        :options="customer.options"
                        @ready="onReadyCustomers"
                    />
                </h4>
            </div>

            <div class="col-6">
                <p class="text-uppercase font-weight-normal mb-1">Customers</p>
                <p class="mb-0"><i class="fas fa-user fa-2x mb-0"></i></p>
            </div>
            </div>
        </div>

JS:

import ICountUp from 'vue-countup-v2';
export default {
    name: 'members',
    components: {
    ICountUp
    },
    data() {
        return {
            customer:{
                delay: 1000,
                endVal: 120500,
                options: {
                    useEasing: true,
                    useGrouping: true,
                    separator: ',',
                    decimal: '.',
                    prefix: '',
                    suffix: ''
                }
            },                
        };
    },
    methods: {
        onReadyCustomers: function(instance, CountUp) {
            const that = this.customer;
            instance.update(that.endVal + 100); //onReadyProjects
        }
    }
};