4

I'm trying to use this countdown-timer / on-github inside one of my single-file-components. Even though I'm importing it like mentioned in the example, I'm getting this error:

21:27:20.553 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <CircularCountDownTimer>
       <Visualization> at src/views/Visualization.vue
         <App> at src/App.vue
           <Root> vue.runtime.esm.js:619
    VueJS 17
    run es6.promise.js:75
    notify es6.promise.js:92
    flush _microtask.js:18

Looking up the warning I've found the following pages:

vue-router-problem1 vue-router-problem2

What I've gathered/attempted from that:

  • Change vue-cli config to use runtime compiler (No change)
22:02:49.722 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <CircularCountDownTimer>
       <Visualization> at src/views/Visualization.vue
         <App> at src/App.vue
           <Root> vue.esm.js:628
    VueJS 18
    run es6.promise.js:75
    notify es6.promise.js:92
    flush _microtask.js:18

  • Import in Main.js with Vue.use(Plugin) (Same error)
  • Import it in the router component (Same error)

EDIT: I've also looked at this question nested-components in vuejs And changed the component registration like so:

    beforeCreate() {
      this.$options.components.CircularCountDownTimer = require('vue-circular-count-down-timer')
    },

None of the above made this plugin work for me and I don't really understand why.

Here is my code:

main.js

    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import CircularCountDownTimer from "vue-circular-count-down-timer";

    Vue.use(CircularCountDownTimer)

    Vue.config.productionTip = false;

    export const eventBus = new Vue();

    new Vue({
      router,
      render: h => h(App)
    }).$mount("#app");

component (Visualization.vue):

<template>
  <div id="content">
    <circular-count-down-timer
      v-for="counter in counters" :key="counter.id"
      :initial-value="counter.seconds"
      :show-minute="false"
      :show-hour="false"
      :show-negatives="false"
      :second-label="counter.name"
      :steps="1"
    />
  </div>
</template>
<script>
import CircularCountDownTimer from "vue-circular-count-down-timer";
export default {
  name: "Visualization",
  components: {
    CircularCountDownTimer
  },
  data() {
    return {
      counters: []
    }
  },
  mounted() {
    if (localStorage.getItem("delays")) {
      try {
        this.counters = JSON.parse(localStorage.getItem("delays"));
      } catch (e) {
        console.debug(e);
        localStorage.removeItem("delays");
      }
    }
  }
};
</script>

Also this is the data when reading from localStorage:

[{"id":1,"seconds":"60","name":"asdf"}]

Dependencies in package.json:

    "dependencies": {
        "@babel/preset-env": "^7.5.4",
        "core-js": "^2.6.5",
        "vue": "^2.6.10",
        "vue-awesome-countdown": "^1.0.16",
        "vue-circular-count-down-timer": "^1.0.4",
        "vue-grid-layout": "^2.3.4",
        "vue-router": "^3.0.3"
      }
2
  • Why do you pass a String "counter" in Vue.use(CircularCountDownTimer, "counter");? Why isn't it just Vue.use(CircularCountDownTimer);? Commented Jul 26, 2019 at 20:22
  • import CircularCountDownTimer from "vue-circular-count-down-timer"; points to install method ? its not a component, is it? Commented Jul 26, 2019 at 20:50

1 Answer 1

5

vue-circular-count-down-timer is a plugin, so this bit of the code seems to be correct:

import CircularCountDownTimer from "vue-circular-count-down-timer";

Vue.use(CircularCountDownTimer)

If you take a look at the source code for the plugin you'll see that all it does is register a component globally called circular-count-down-timer:

https://github.com/noorzaie/vue-circular-count-down-timer/blob/master/src/components/index.js

The problem occurs when you do this:

import CircularCountDownTimer from "vue-circular-count-down-timer";
export default {
  name: "Visualization",
  components: {
    CircularCountDownTimer
  },

You're just importing the plugin again and then trying to use it as a component. But it isn't a component, it's a plugin. Vue doesn't know this, it just sees an object without a template or render function.

Get rid of the local component import and it should just use the globally registered component instead.

Sign up to request clarification or add additional context in comments.

2 Comments

@HackXIt It isn't really clear to me why the author of this component chose to expose it as a plugin rather than just as a component. The documentation for it is a little sloppy in its use of the word component.
I switched to github.com/mlinquan/vue-awesome-countdown which seems quite more reliable.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.