{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 够拽才男人 的问题《Vue template or render function not defined yet I》','https://www.manongdao.com/q-1234988.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
This is my main javascript file:
import Vue from 'vue'
new Vue({
el: '#app'
});
My HTML file:
<body>
<div id="app"></div>
<script src="{{ mix('/js/app.js') }}"></script>
</body>
Webpack configuration of Vue.js with the runtime build:
alias: {
'vue$': 'vue/dist/vue.runtime.common.js'
}
I am still getting this well known error:
[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)
How come when I don't even have a single thing inside my #app div where I mount Vue, I am still getting a render/template error? It says found in root but there is nothing to be found because it does not even have any content?
How am I suppose to mount if this does not work?
Edit:
I have tried it like this which seems to work:
new Vue(App).$mount('#app');
It make sense because using the el property implies you are 'scanning' that dom element for any components and it's useless because the runtime build does not have a compiler.
Still it is an extremely strange error message to throw, especially when I have my entire #app div emptied out.
Hopefully somebody could confirm my thoughts.
In my case, I was getting the error because I upgraded from Laravel Mix Version 2 to 5.
In Laravel Mix Version 2, you import vue components as follows:
In Laravel Mix Version 5, you have to import your components as follows:
Here is the documentation: https://laravel-mix.com/docs/5.0/upgrade
Better, to improve performance of your app, you can lazy load your components as follows:
In my case, I imported my component (in router) as:
It is simply solved if I changed it to
Make sure you import the
.vueextension explicitly like so:If you don't add the
.vueand you have a.tsfile with the same name in that directory, for example, if you're separating the js/ts from the template and linking it like this inside ofmy-component.vue:... then the import will bring in the
.tsby default and so there really is no template or render function defined because it didn't import the.vuetemplate.When you tell it to use
.vuein the import, then it finds your template right away.There is an update from Laravel Mix 3 to Laravel 4 which may affect the answer for all components.
See https://laravel-mix.com/docs/4.0/upgrade for more details.
Let
'example-component'be the example component, whose address is'./components/ExampleComponent.vue'.Laravel 3:
Laravel 4:
The change is that a
.defaultis added.The reason you're receiving that error is that you're using the runtime build which doesn't support templates in HTML files as seen here vuejs.org
In essence what happens with vue loaded files is that their templates are compile time converted into render functions where as your base function was trying to compile from your html element.
I am using Typescript with vue-property-decorator and what happened to me is that my IDE auto-completed "MyComponent.vue.js" instead of "MyComponent.vue". That got me this error.
It seems like the moral of the story is that if you get this error and you are using any kind of single-file component setup, check your imports in the router.