Automatic Counter For Vue 3 – Autocounter

Install & Download:

# NPM
$ npm i vue3-autocounter

Description:

An animated automatic counter for counting up & down. Built with TypeScript.

How to use it:

1. Import the component.

// Global
import { createApp } from 'vue';
import Vue3Autocounter from 'vue3-autocounter';
import App from './App.vue';
createApp(App)
.component('vue3-autocounter', Vue3Autocounter)
.mount('#app');
 
// Local
import { defineComponent } from 'vue';
import Vue3autocounter from 'vue3-autocounter';
export default defineComponent({
  name: 'Demo',
  components: {
    'vue3-autocounter': Vue3autocounter
  }
});

2. Use the counter in your template:

<vue3-autocounter ref='counter' :startAmount='0' :endAmount='2021' />

3. Available component props.

startAmount: {
  type: Number,
  default: 0
},
endAmount: {
  type: Number,
  default: 0,
  required: true
},
duration: {
  type: Number,
  default: 3,
  validator(duration: number): boolean {
    return duration >= 1;
  }
},
autoinit: {
  type: Boolean,
  default: true
},
prefix: {
  type: String,
  default: ''
},
suffix: {
  type: String,
  default: ''
},
separator: {
  type: String,
  default: ','
},
decimalSeparator: {
  type: String,
  default: '.'
},
decimals: {
  type: Number,
  default: 0,
  validator(decimals: number): boolean {
    return decimals >= 0;
  }
}

4. API methods.

• start()
• pause()
• resume()
• reset()

5. Trigger a function when the counter is finished.

<vue3-autocounter ref='counter' :startAmount='0' :endAmount='2021'  @finished='alert(`Counting finished!`)' />

Preview: