Failed to mount component: template or render function not defined. (Vue using plugins)

Question

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"
      }

Why do you pass a String "counter" in Vue.use(CircularCountDownTimer, "counter");? Why isn't it just Vue.use(CircularCountDownTimer);? — zero298
You're right, I should change that. Doesn't remove the error btw. — HackXIt
import CircularCountDownTimer from "vue-circular-count-down-timer"; points to install method ? its not a component, is it? — Estradiaz

skirtle skirtle · Accepted Answer · 2019-07-26T20:48:26

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.

Failed to mount component: template or render function not defined. (Vue using plugins)

1 Answers