Package Exports

@wjtools/vue-countup

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@wjtools/vue-countup) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-countup

CountUp component for Vue.js

Installation

$ yarn add @wjtools/vue-countup

Usage

<template>
  <CountUp :endVal="endVal" />
</template>

<script>
  import CountUp from 'vue-countup'
  export default {
    components: { CountUp },
    data() {
      return { endVal: 1688 }
    }
  }
</script>

Properties

startVal

type: Number
default: 0

The value you want to begin at

endVal

required: true
type: Number
default: 0

The value you want to arrive at

decimals

type: Number
default: 0

Number of decimal places in number

duration

type: Number
default: 0

Duration in seconds

color

type: String

isLargeVal

type: Boolean
default: false

Animating to large numbers

options

type: Number
default: { useGrouping: false }

Formatting/easing options object

See more CountUp.js

Methods

start: Start animation
pauseResume: Toggle pause/resume
reset: Reset an animation
update: Update the end value and animat

<template>
  <CountUp ref="countup" :endVal="1688" :autoplay="false" />
</template>

<script>
  export default {
    mounted() {
      this.$refs.countup.start()
    }
  }
</script>

Events

done: ({ countup }) => void

Emits when the animation completes

<template>
  <CountUp :endVal="1688" :done="complete" />
</template>

<script>
  export default {
    mounted() {
      complete(countup) {
        console.log(countup)
      }
    }
  }
</script>

Browser support

Chrome (latest)
Firefox (latest)
Safari (latest)
Opera (latest)
Edge (latest)
Internet Explorer 9+

License

MIT

@wjtools/vue-countup