When working with Laravel 5.7 and Vue.js, my app.js file looks like this:
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 // short for `routes: routes`
})
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
router
});
I want to link a Vue file using the following code:
<router-link to="/dashboard" class="nav-link">
The content of Dashboard.vue file is as follows:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<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>
However, when I click on the above link to Dashboard.vue file, it does not load. Only the URL is displayed in the address bar. The console error message shows:
[Vue warn]: Failed to mount component: template or render function not defined. found in ---> <Anonymous> <Root>How can I fix this error?