I am venturing into the world of Single Page Applications with Laravel and Vue for the first time. Instead of using webpack, I opted to go with Laravel Mix. Unfortunately, it seems like things have gone awry as I am now encountering the following error:
[Vue warn]: Failed to mount component: template or render function not defined.This issue arises when I try to include
<router-view></router-view>I attempted a workaround by adding .default, but unfortunately, that did not resolve the problem.
export default new VueRouter({
routes: [
{
path: '/',
component: require('./views/Home.vue').default
},
{
path: '/about',
component: require('./views/About.vue').default
}
]
});
Here is a snippet from my app.js file:
import './bootstrap';
import router from './routes';
new Vue({
el: '#app',
router,
});
And here is the content of my bootstrap.js file:
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
window.Vue = Vue;
Vue.use(VueRouter);
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
My routes.js file looks like this:
import VueRouter from 'vue-router';
export default new VueRouter({
routes: [
{
path: '/',
component: require('./views/Home.vue')
}
]
});
For the HTML part (welcome.blade.php), here is what I have:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" href="/css/app.css" type="text/css">
</head>
<body>
<div id="app">
<router-link to="/">Home</router-link>
<router-view></router-view>
</div>
<script src="/js/app.js"></script>
</body>
</html>