[Vuejs]-How to use the vue-countdown-timer package in your Vue JS project

by

0👍

✅

so, you’re getting that error because it not a component it is
actually a plugin. so what you need to do is :

  1. go to your plugin folder and create a plugin with this name "vue-circular-count-down.js". inside this paste this code :
import Vue from 'vue'; 
import CircularCountDownTimer from "vue-circular-count-down-timer";
Vue.use(CircularCountDownTimer);

  1. then go to your nuxt.config.js file and add the plugin like this:
    plugins: [‘~/plugins/vue-circular-count-down.js’ ].

  2. now you can use this anywhere on your application.

<circular-count-down-timer :initial-value="360500"></circular-count-down-timer>

you can also check out this on how to add plugins
https://nuxtjs.org/docs/2.x/directory-structure/plugins

0👍

I decided to use a different approach but achieved the same result

<template>
  <div class="radial-progress-bar">
    <vue-countdown :time="1 * 24 * 60 * 60 * 1000" v-slot="{hours, minutes, seconds }">

    <div style="display: flex">
      <div>
      <radial-progress-bar
        :diameter="48"
        :completed-steps="hours"
        :total-steps="60"
        :animateSpeed="800"
        :strokeWidth="3"
        :innerStrokeWidth="4"
        :startColor="`#CC003D`"
        :stopColor="`#CC003D`"
        :innerStrokeColor="`#E5E5E5`">
      <p class="completedSteps" style="font-size: 12px">{{hours}}h</p>
    </radial-progress-bar>
    </div>

     <div>
          <radial-progress-bar
        :diameter="48"
        :completed-steps="minutes"
        :total-steps="60"
        :animateSpeed="800"
        :strokeWidth="3"
        :innerStrokeWidth="4"
        :startColor="`#CC003D`"
        :stopColor="`#CC003D`"
        :innerStrokeColor="`#E5E5E5`">
      <p class="completedSteps" style="font-size: 12px">{{minutes}}m</p>
    </radial-progress-bar>
     </div>

      <div>
          <radial-progress-bar
        :diameter="48"
        :completed-steps="seconds"
        :total-steps="60"
        :animateSpeed="800"
        :strokeWidth="3"
        :innerStrokeWidth="4"
        :startColor="`#CC003D`"
        :stopColor="`#CC003D`"
        :innerStrokeColor="`#E5E5E5`">
      <p class="completedSteps" style="font-size: 12px">{{seconds}}s</p>
    </radial-progress-bar>
      </div>
    </div>

    </vue-countdown>

  </div>
</template>

<script>
import RadialProgressBar from "vue-radial-progress";
import VueCountdown from '@chenfengyuan/vue-countdown';

export default {
  name: "TopProgressBar",

  
  data() {
    return {
      timerSeconds: '',
      roundToQuarter: date => new Date(Math.round(date / 9e5) * 9e5),
      totalSteps: 100,
      progressItems: [{ completedSteps: 13 }, { completedSteps: 23 }, { completedSteps: 48 },]
    };
  },

  components: {
    RadialProgressBar, VueCountdown
  },
};
</script>

Leave a comment