Laravel custom routing files not working with new routes - api

Question

I am building a CMS SPA with Laravel 8 and I wanted to seperate the routes by category (admin, api, auth) in seperate route files with the use of custom slugs (/admin/settings , /auth/login) but I cant seem to get it to work so what am I doing wrong? It all did work when it was the API file but when dividing it over seprate files it wont work.
routes/admin.php
Route::group(['middleware' => 'auth:sanctum'], function () {
Route::get('settings', [SettingsController::class, 'index'])->name('settings');
});
routeServiceProvider.php
public function boot()
{
$this->configureRateLimiting();
$this->routes(function () {
Route::middleware('web')
->group(base_path('routes/web.php'));
Route::prefix('api')
->middleware('api')
->group(base_path('routes/api.php'));
Route::prefix('auth')
->middleware('auth')
->namespace($this->namespace)
->group(base_path('routes/auth.php'));
Route::prefix('admin')
->middleware('admin')
->namespace($this->namespace)
->group(base_path('routes/admin.php'));
});
}
routes/web.php
Route::get('/{any}', function () {
return view('layouts.vue');
})->where('any', '^(?!api|admin|auth).*$');
kernel.php
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
// \Illuminate\Session\Middleware\AuthenticateSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:60,1',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
'admin' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:60,1',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
'auth' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:60,1',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
]
];
Component.vue
const response = axios.get('/admin/settings')// not giving the data back
const response = axios.get('/api/settings')// in the past did work

Answer 1

While someone else gives a better answer about your approach. As simple way to achieve /admin/settings in the web/routes.php file would be to use prefixes
Route::prefix('admin')->middleware(['auth:sanctum'])->group(function() {
Route::get('settings', [SettingsController::class, 'index']);
});
With this approach you won't need to make changes to your app\Http\kernel.php or routeServiceProvider.php files.
Also if you want to abstract it away, you could put your it in a new file and just require require_once __DIR__ . '/admin.php'; as you would a regular php file.