# vue-count-to

> It's a vue component that will count to a target number at a specified duration

Latest version **1.0.13** (published 2017-12-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-count-to
pnpm add vue-count-to
yarn add vue-count-to
bun add vue-count-to
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.13 |
| Published | 2017-12-08 |
| First published | 2017-04-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pan |
| Maintainers | panjiachen |

## Links

- npm: https://www.npmjs.com/package/vue-count-to
- Homepage: http://panjiachen.github.io/countTo/demo/
- npm.io page: https://npm.io/package/vue-count-to

## Recent versions

- 1.0.13 (latest) — 2017-12-08
- 1.0.12 — 2017-12-08
- 1.0.10 — 2017-09-05
- 1.0.9 — 2017-09-05
- 1.0.8 — 2017-09-05
- 1.0.7 — 2017-09-05
- 1.0.6 — 2017-09-05
- 1.0.5 — 2017-04-17
- 1.0.4 — 2017-04-15
- 1.0.2 — 2017-04-13
- 1.0.1 — 2017-04-13
- 1.0.0 — 2017-04-13

## README

# vue-countTo    [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) [![Gemnasium](https://img.shields.io/gemnasium/mathiasbynens/he.svg)](https://github.com/PanJiaChen/vue-countTo) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-countTo) [![npm](https://img.shields.io/npm/v/vue-count-to.svg)](https://www.npmjs.com/package/vue-count-to)

vue-countTo is a dependency-free, lightweight vue component that can be overwrited  easingFn by yourself.
You can set startVal and endVal ,it will automatic judge count up or count down.
It is support vue-ssr.
It is learn from countUp.js;

## [Try the demo](http://panjiachen.github.io/countTo/demo/)

### How to use?
```bash
npm install vue-count-to
```

### Example

```vue
<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>

<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2017
      }
    }
  }
</script>
```
demo:

![demo](https://github.com/PanJiaChen/vue-countTo/blob/master/countDemo.gif)

Use CDN Script: [demo](https://github.com/PanJiaChen/vue-countTo/blob/master/demo/index.html)



### Options
|    Property    |    Description   |   type   |	default	|
| -----------------  | ---------------- | :--------: | :----------: |
| startVal       | the value you want to begin at |Number| 0 |
| endVal         | the value you want to arrive at |Number | 2017 |
| duration  | duration in millisecond | Number | 3000 |
| autoplay     | when mounted autoplay | Boolean | true |
| decimals     | the number of decimal places to show | Number | 0 |
| decimal     | the split decimal | String | . |
| separator     | the separator | String | , |
| prefix     | the prefix | String | '' |
| suffix     | the suffix | String | '' |
| useEasing     | is use easing function | Boolean | true |
| easingFn     | the easing function | Function | — |

** notes: when autoplay:true , it will auto start when startVal or endVal change **


### Functions
| Function Name | Description   |
| :--------:   | -----  |
|    mountedCallback    |  when mounted will emit  mountedCallback  |
|    start    |  start the countTo  |
|    pause   |  pause  the countTo |
|    reset    |  reset  the countTo |

---
_Source: https://npm.io/package/vue-count-to · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._