VueJS + CountUp Component w/ Abbreviation (K,M,B)

getDecimal.js

const getDecimal = (num) => {
  if (num.toString().length >= 4) {
    return 1
  }
  else {
    return 0
  }
}

module.exports = getDecimal

getRoundNum.js

const numRound = (num) => {
  //performing checks in descending order to utilise if-immediate as this use case is simple
  // check if number is equal to or over a billion
  if (num.toString().length() >= 9) {
    const Mnum = Math.round((num / 1000000000)*100)/100;
    return Mnum
  }
  // check if number is equal to or over a million
  if (num.toString().length >= 7) {
    const Mnum = Math.round((num / 1000000)*100)/100;
    return Mnum
  }
  // check if number is equal to or over a thousand
  if (num.toString().length >= 4) {
    const Mnum = Math.round((num / 1000)*100)/100;
    return Mnum
  }
  else {
    return num
  }
};

module.exports = getRoundNum;

getSuffix.js

const setSuffix = (num) => {
  //performing checks in descending order to utilise if-immediate as this use case is simple
  // check if number is equal to or over a billion, return the letter "B"
  if (num.toString().length >= 9) {
    return "B"
  }
  // check if number is equal to or over a million, return the letter "M"
  if (num.toString().length >= 7) {
    return "M"
  }
  // check if number is equal to or over a thousand, return the letter "K"
  if (num.toString().length >= 4) {
    return "K"
  }
};

module.exports = setSuffix;

ICountUP-fromAPI.vue

<template>
  <ICountUP 
  v-if="loaded" 
  :delay="delay" 
  :endVal="shortNum" 
  :options="options" />
  // use a question mark until the number loads, a loading animation would be cool also
  <div v-else>?</div>
</template>

<script type="text/babel">
// run imports
import ICountUP from "vue-countup-v2";
import getSuffix from "./getSuffix.js"
import getRoundNum from "./getRoundNum.js";
import getDecimal from "./getDecimal.js";

// create our component
export default {
  name: "countup-example",
  components: {
    ICountUP,
  },
  data() {
    return {
      //wait until we change loaded to true before running component, set it as false initially
      loaded: false,      
      //store number as string
      count: null,
      tempNum: null,
      //initialise as null, we will set this once we have determined it's size
      shortNum: null,
      // refer to vue-countup 
      delay: 500,
      options: {
        useEasing: true,
        useGrouping: true,
        seperator: ",",
        decimal: ".",
        decimalPlaces: 0,
        duration: 5,
        suffix: ''
      },
    };
  },
  async created() {
    // get a number from your API
    const response = await fetch("http://yourdomain/api/givemeanumber");
    const json = await response.json();
    //this is based on my component, your JSON may be structured differently, change as needed - this is an example
    this.tempNum = json[0].Number;
    // shorten number based on number length
    this.shortNum = getRoundNum(this.tempNum);
    // set the suffix in options based on number length
    this.options.suffix = getSuffix(this.tempNum);
    // set the decimal places in options based on number length
    this.options.decimalPlaces = getDecimal(this.tempNum);
    this.loaded = true;
  }
};
</script>    

ICountUP-static.vue

<template>
  <ICountUP 
  :delay="delay" 
  :endVal="shortNum" 
  :options="options" />
</template>

<script type="text/babel">
// run imports
import ICountUP from "vue-countup-v2";
import getSuffix from "./getSuffix.js"
import getRoundNum from "./getRoundNum.js";
import getDecimal from "./getDecimal.js";

// create our component
export default {
  name: "countup-example",
  components: {
    ICountUP,
  },
  data() {
    return {
      //store number as string
      count: "666666666666666",
      //initialise as null, we will set this once we have determined it's size
      shortNum: null,
      // refer to vue-countup 
      delay: 500,
      options: {
        useEasing: true,
        useGrouping: true,
        seperator: ",",
        decimal: ".",
        decimalPlaces: 0,
        duration: 5,
        suffix: ''
      },
    };
  },
  created() {
    // shorten number based on number length
    this.shortNum = getRoundNum(this.count);
    // set the suffix in options based on number length
    this.options.suffix = getSuffix(this.count);
    // set the decimal places in options based on number length
    this.options.decimalPlaces = getDecimal(this.count);
  }
};
</script>