42
rated 0 times
[
43]
[
1]
/ answers: 1 / hits: 28217
/ 5 Years ago, fri, february 8, 2019, 12:00:00
I'm learning to use Vue.js with Laravel from this series the narrator doesn't get any error but I've encountered the following error while I click to change the route.
[Vue warn]: Failed to mount component: template or render function not defined.
Below code is from my app.js:
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [{
path: '/dashboard',
component: require('./components/Dashboard.vue')
},
{
path: '/profile',
component: require('./components/Profile.vue')
}
]
const router = new VueRouter({
routes
})
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app',
router
});Code snippet from my Dashboard.vue:
<template>
<div class=container>
<div class=row justify-content-center>
<div class=col-md-8>
<div class=card>
<div class=card-header>Dashboard Component</div>
<div class=card-body>
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>Code snippet from my master.blade.php layout:
//sidebar
<ul>
<li>
<router-link to=/dashboard class=nav-link>Dashboard</li>
<li>
<router-link to=/profile class=nav-link>Profile</li>
</ul>
//content
<div class=container-fluid>
<router-view></router-view>
</div>I'm running app at localhost:3000with browserSync and npm run watch. Does it has anything to do with error ?
More From » laravel
