Home » vue » API routes are not working in Laravel VueJS app

API routes are not working in Laravel VueJS app

Posted by: admin November 26, 2021 Leave a comment

Questions:

I’m building a SPA with Laravel and Vue. However, I need to make an API call with axios but it’s not working.

Here’s my web.php:

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

Here’s my api.php route:

Route::get('/notification', '[email protected]');

Whenever I make an API call, it shows a blank or broken page.

Could you please give me any suggestion about this issue and solve?

Answers:

You should prevent api routes from being captured by web.php route.

First, prefix api routes:

api.php

Route::get('/api/notification', '[email protected]');

Then, exclude prefixed routes from web routes:

web.php

Route::get('/{any}', function () {
    return view('index');
})->where('any', '^(?!api).*$');