Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 2 months 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 (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-14T15:23:04.000Z (almost 8 years ago)
- Last Synced: 2024-11-24T21:54:43.119Z (3 months ago)
- Topics: count, countup-plugin, vue, vue-countup
- Language: JavaScript
- Size: 45.9 KB
- Stars: 42
- Watchers: 2
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- 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)