Vue template or render function not defined yet I am using neither?
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.
Answer
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:
Vue.component(
'example-component',
require('./components/ExampleComponent.vue')
);
In Laravel Mix Version 5, you have to import your components as follows:
import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);
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:
Vue.component("ExampleComponent", () => import("./components/ExampleComponent"));