Failed to mount component: template or render func

Question

I have created number of components in Vuejs and want to use in main component but getting this error

Failed to mount component: template or render function not defined.

Should i need to import those before use anywhere in my app ? (like we need to import in app-module.ts file in Angular as i am from angular background)

Here is error details

PS: I am quite new to Vuejs, i am using someone's github repo for better understanding

Example of my one component

<template>
    <div class="progressbar-container">
        <div class="progressbar-values">
            <span>{{ name }}</span>
            <span>{{ percentage }}%</span>
        </div>
        <div class="progressbar">
            <span class="progress" :style="'width: ' + percentage + '%'">
                <span class="thumb"></span>
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            name: {
                type: String
            },

            percentage: {
                type: String
            }

        },

        mounted() {
            //
        }
    }
</script>

Code of main.js file for registering code there

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import LazyImg from 'v-lazy-img';
import Router from 'vue-router'
import VueMasonryPlugin from 'vue-masonry';

import App from './App'

// DIRECTIVES
Vue.directive('ripple', require('./directives/Ripple.js'));


// VUE COMPONENTS
Vue.component('jain-sidenav', require('./components/jain-sidenav/jain-sidenav.vue'));
//Vue.component('jain-card-cover', require('./components/jain-card/jain-card-cover.vue'));
....etc etc

// V-LAZY-IMG
Vue.use(LazyImg);

// VUE-MASONRY
Vue.use(VueMasonryPlugin);

Vue.config.productionTip = false

Vue.use(Router)

// IMPORT FOR FIRST/MOST IMPORTANT COMPONENT, CONST FOR ASYNC LOADING
import profile from './views/profile.vue';
const resume = require('./views/resume.vue');
import Resume from './views/resume.vue';
const projects = require('./views/projects.vue');
const notfound = require('./views/notfound.vue');


const router = new Router({
  routes: [
    { path: '/', component: profile, name: 'Profile ' },
    { path: '/profile', component: profile, name: 'Profile' },
    { path: '/resume', component: resume, name: 'Resume' },
    { path: '/projects', component: projects, name: 'Projects' },
    { path: '/404', component: notfound, name: '404 - not found' },
    { path: '*', redirect: '404' }
  ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Answer 1

The component looks correct to me. Your issue is likely related to the build of Vue you have. If you only have the runtime build of Vue you will not be able to use the single-file components, so you'll need to use the full build of Vue. https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only