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

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

Answer 1

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.