Currently, I am endeavoring to enhance my understanding of Single Page Applications by constructing one with Laravel, Vue, Vue Router, and Vuex.
Unfortunately, I have encountered an issue where the router-view is not rendering at all, no matter what troubleshooting steps I take. As a result, I am beginning to feel disheartened, especially since only the "Hello" message from the Vue components is being displayed.
To the best of my knowledge, there are no errors in the code.
Below are the setup details and files involved:
Laravel router page: web.php
Route::get('/{any}', [App\Http\Controllers\AppController::class, 'index'])->where('any', '.*');
home.blade.php:
@extends('layouts.app')
@section('content')
<App></App>
@endsection
Vue files:
app.js:
import Vue from 'vue';
import router from './router'
import App from './components/App'
require('./bootstrap');
const app = new Vue({
el: '#app',
components: { App },
router
});
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import ExampleComponent from './components/ExampleComponent'
Vue.use( VueRouter )
export default new VueRouter( {
mode: 'history',
router: [
{ path: '/', component: ExampleComponent }
]
} )
App.vue file
<template>
<div class="content">
<h1>Hello</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
ExampleComponenet.vue
<template>
<div>
<h1>This is the Example Component</h1>
</div>
</template>
The current challenge lies in the fact that while the App.vue component loads successfully, the
<router-view></router-view><!---->.
Hello
<!---->