https://github.com/samcrosoft/vue-countup

A plugin to count up to a figure using Vue.js
https://github.com/samcrosoft/vue-countup

count countup-plugin vue vue-countup

Last synced: 24 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/samcrosoft/vue-countup
• Owner: samcrosoft
• License: mit
• Created: 2016-02-03T12:52:51.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-14T15:23:04.000Z (over 7 years ago)
• Last Synced: 2024-05-14T11:06:30.489Z (about 1 month ago)
• Topics: count, countup-plugin, vue, vue-countup
• Language: JavaScript
• Size: 45.9 KB
• Stars: 42
• Watchers: 2
• Forks: 11
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vuejs - vue-countup ★11
• awesome-vue-refactor - vue-countup ★11
• awesome-vue-cn - vue-countup ★8
• repo-560-awesome-vue-cn - vue-countup ★8

README

        
# 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

    

    

```

Install Using **Windows Global**

```html

    

        Vue.use(window.VueCountUp);

    

```

or, Install Using **Module Loader**

```html

    

        Vue.use(require('vue-countup'));

    

```

### Use in templates

You can insert a count up element like below

```html

            

```

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)