UNPKG

vue-countup

Version:

A plugin to count up to a figure using Vue.js

80 lines (56 loc) 2.19 kB
# VueCountUp CountUp plugin implemented for use with Vue.js. This is a component built for the very interesting CountUp plugin ## Usage ### Installation Firstly, insert the vue.js script and then insert a reference to the vue-countUp library as done below ```html <script scr='/path/to/vue/vue.js'></script> <script scr='/path/to/vuecountup/dist/vue-count-up.js'></script> ``` Install Using **Windows Global** ```html <script type='text/javascript'> Vue.use(window.VueCountUp); </script> ``` or, Install Using **Module Loader** ```html <script type='text/javascript'> Vue.use(require('vue-countup')); </script> ``` ### Use in templates You can insert a count up element like below ```html <vuecountup class="myCounter" :end="2500" :duration="2.5" :options="{useEasing : true, useGrouping : true, separator : ',', decimal : '.', prefix : '', suffix : ''}"></vuecountup> ``` You can specify all the attributes listed below, only the end attribute is ***required*** See [CountUp documentation](https://inorganik.github.io/countUp.js/) for all available attributes. ### Available Attributes 1. **start** - This is the start value for the count up - **type**: Number - **required** : false - **default** : 0 2. **end** - This is the value that count-up counts to - **type**: Number - **required** : true 3. **decimal** - This is the number of decimal places the count-up component should use in display - **type**: Number - **required** : false - **default** : 0 4. **duration** - This is the duration for the countup animation to count from *start* to *end* - **type**: Number - **required** : false - **default** : 2.5 4. **options** - This is the option for the countup plugin - **type**: Object - **required** : false See [CountUp documentation](https://inorganik.github.io/countUp.js/) for all available attributes. ## License This plugin is released under the [MIT Licence](https://opensource.org/licenses/MIT)