Routing issue with Laravel Nova and a VueJS SPA

profile picture

Routing issue with Laravel Nova and a VueJS SPA

As I was installing Laravel Nova into one of my new projects, which is a full VueJS Single Page Application with vue-router, I encountered a weird issue:

When I headed to the Nova admin panel, everything was empty. The layout is there but the content was not loaded.

I then opened the Chrome Dev Tools and I noticed that all requests going through the route prefix /nova-api/ responded with a 404, or with the base layout of my VueJS SPA.

MMMMHHH - Something's wrong with the routing!

In my routes/web.php file I had this:

Route::get('/{any}', '[email protected]')->where('any', '.*');

If you ever build a VueJS SPA with Laravel, you probably have this too into your route files.

So it seems that all /nova-api/ routes fall into this specific route.

We can fix that by updating the regex.

Here is the Solution

Route::get('/{any}', '[email protected]')->where('any', '^(?!nova-api).*$');

Now everything should work as expected !

Happy Coding ;)

Myd

nova
laravel
vuejs
route
spa

about me

profile picture

I consider myself as an IT Business Artisan. Or Consultant CTO if you prefer. I'm a self-taught Web Developper, coach and teacher. My main work is helping and guiding digital startups.

more about me

follow me

newsletter

A weekly email with the latests articles

2020 My Dynamic Production SPRL All rights Reserved.