I'm running into a problem where my Vue component isn't showing via router-view, there are no Vue warnings or errors in the console.
Here's the git: https://github.com/woottonn/fullstack
Here's my code:
web.php
<?php
Route::any('{any}', function(){
return view('welcome');
})->where('any', '.*');
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Stack Blog</title>
</head>
<body class="antialiased">
<div id="app">
<mainapp></mainapp>
</div>
<script src="{{mix('/js/app.js')}}"></script>
</body>
</html>
app.js
require('./bootstrap');
import Vue from 'vue'
import router from './router'
Vue.component('mainapp', require('./components/mainapp.vue').default)
const app = new Vue({
el: '#app',
router
});
router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import myFirstVuePage from './components/pages/myFirstVuePage'
const routes = [
{
path: '/my-new-vue-route',
component: myFirstVuePage
}
];
export default new Router({
mode: 'history',
routes
})
mainapp.vue
<template>
<div>
<h1>VUE Componenty</h1>
<router-view></router-view>
</div>
</template>
myFirstVuePage.vue
<template>
<div>
<h1>This is my first page...</h1>
</div>
</template>
Am I missing obvious something here?
--- EDIT: Going directly to the URL (/my-new-vue-route) throws an error, so that's not working either. ---
