Laravel Vue — router-view not rendering

Question

So i'm trying to learn about SPA by building one with laravel vue vue-router and vuex.

my problem is that router-view is not rendering at all no matter what i do and i'm starting to lose hope in here, and it displays Hello message from vue components only.

the code as long as i know don't have any errors.

this is my setup and files

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

and this is my 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 OUT PUT that i got is the App.vue component loads but <router-view></router-view> render as html comment <!---->

Hello
<!---->

Answer 1

I tried recreating your code in codesandbox and it turns out you're defining your routes wrong. Instead of router you have to use routes on your router.js

https://codesandbox.io/s/proud-leftpad-fwtf7?file=/src/router.js

---

In your app.js you're telling Vue app to mount on an element with an id of app thus the

{
  el: "#app",
  components: ...
}

but on your home.blade.php you dont have any <div id="app"></div> .

It could be that it exists on your layouts.app but you didn't include it. If it's not there, then that's the problem.

I'm not also sure about how you declared your route in Laravel:

Route::get('/{any}', [App\Http\Controllers\AppController::class, 'index'])->where('any', '.*');

Usually it'd look like:

Route::get('/{any}', 'SpaController@index')->where('any', '.*');

Source: https://laravel-news.com/using-vue-router-laravel

Answer 2

Okay, please try this.

 router: [                                                 
  { path: '/example', component: ExampleComponent }              
 ]

then visit URL "http://localhost/exmaple" and see if it works correctly.