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

0
votes

I am trying to use the vue-count-down-timer package in my project, but in the console I get the error Failed to mount component: template or render function not defined.

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

<script>
import CircularCountDownTimer from "vue-circular-count-down-timer";

  export default {
    components: {
      CircularCountDownTimer
    },
      methods: {
        finished: () => {
          console.log('finished');
        },
        updated: (status) => {
          console.log(status);    //{"value": 144, "seconds": 24, "minutes": 2, "hours": 0}
        }
      }
  }
</script>

What am I doing wrong?

2
javascriptvue.jsvuejs2timer
Do you have a bundler setup that supports single file components? Could you create an minimal reproducible example? – T J
Hi, the code I have provided is my whole code – Synchro
Yes but you haven't specified your environment. Just a js file loaded in browser? create vue app? Bundler? – T J

2 Answers

0
votes

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>
0
votes

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