CountUp component for Vue.js

$ yarn add @wjtools/vue-countup

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

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

• type: Number
• default: 0

The value you want to begin at

• required: true
• type: Number
• default: 0

The value you want to arrive at

• type: Number
• default: 0

Number of decimal places in number

• type: Number
• default: 0

Duration in seconds

• type: String
• default: span

• type: String

• type: Boolean
• default: false

Animating to large numbers

• type: Number
• default: { useGrouping: false }

Formatting/easing options object

See more CountUp.js

• 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>

• 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>

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

MIT