Menu
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.
487
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"));
If you used to calle a component like this:
Vue.component('dashboard', require('./components/Dashboard.vue'));
I suppose that problem occurred when you update to laravel mix 5.0 or another libraries, so you have to put .default. As like below:
Vue.component('dashboard', require('./components/Dashboard.vue').default);
I solved the same problem.
56
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.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
