Laravel routes with vue/vue router

Question

I'm basically using VueRouter to create all my routes which is working really well. However, my application is built using Laravel. So if I refresh any of the routes I get an error that the route is not defined. So at the minute in every controller I've had to add an index function. This just returns the view of my app.blade which is just the usual tags etc and the to load my single page app. I'm just wondering if there is a cleaner solution? I guess I could move the return view into a single Controller and make my Controllers extend this. But I'm just wondering if there is a better way I'm missing?

i.e. one of my routes via VueRouter:

{
    path: "/clients",
    name: "clients",
    component: () => import(/* webpackChunkName: "clients" */ "../resources/js/components/Views/Clients/Clients.vue")
},

The route in my clients.php file

Route::get('/clients', [App\Http\Controllers\ClientController::class, 'index'])->name('clients');

Then the ClientController index function

public function index()
{
    return view('app');
}

It would just be nice to have the loading of the app.blade done somewhere else and not need to be specified per controller. Any help would be appreciated to ensure it's all done efficiently!

Thanks!

Take a look at this answer stackoverflow.com/questions/64115600/… — Boussadjra Brahim
you can try this stackoverflow.com/questions/64261799/… for single page application in laravel — Kamlesh Paul

lyyka lyyka · Accepted Answer · 2020-10-26T10:26:33

Here is how I solved this issue for one of my projects which is also single page application in Vue and Laravel: https://github.com/lyyka/laravel-vue-blog-spa/blob/master/routes/web.php

Simply, in your routes file, you put this code:

Route::get('/{any}', function () {
    return view('welcome');
})->where("any", ".*");

And in my welcome view I have:

@extends('layouts.app')

@section('content')
    <div class = "container">
        <router-view></router-view>
    </div>
@endsection

Basically this will return your app view for any URL and so your Vue SPA should work properly. Generally, it is not a good practice to put callback functions inside your routes file, but in this case, you won't even be using your routes file as it is a SPA, so this solution can pass! :)

Laravel routes with vue/vue router

1 Answers