Failed to mount component: template or render function not defined while using in another components in Vuejs

邮差的信 提交于 2019-12-11 15:27:32

问题


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

回答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



来源:https://stackoverflow.com/questions/47050776/failed-to-mount-component-template-or-render-function-not-defined-while-using-i

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!