How to use Laravel authentication and vue-router together - laravel

Question

I'm new to Laravel and PHP in general, but familiar with Vue and SPA's. I know how to create authentication with Bcrypt, for example. However, I used Laravel to run php artisan make:auth and to create several different endpoints for the backend.
I was trying to convert my app into a SPA using Vue, however using routing with Vue causes issues with the routes defined in the web.php. For example, I have my web.php like this, with several different routes.
<?php
Route::get('/{vue_capture?}', function () {
return view('app');
})->where('vue_capture', '^(?!storage).*$');
Route::get('/', function () {
return view('app');
});
Route::resource('Videos', 'VideoController')->middleware('auth','isAdmin');
Route::resource('Categories', 'CategoriesController')->middleware('auth');
Route::get('/search', 'VideoController#search')->middleware('auth');
Auth::routes();
Route::get('/settings/account', 'AccountsController#edit')->middleware('auth');
Route::get('/auth', 'AccountsController#get');
Route::put('/settings/account', 'AccountsController#update')->middleware('auth');
However, I also have a routes.js to have vue-router handle the routing with the following :
import Home from './components/Home.vue'
import Videos from './components/Videos.vue'
import Categories from './components/Categories.vue'
export default{
mode: 'history',
routes: [
{
path:'/',
component:Home
},
{
path:'/Videos',
component:Videos
},
{
path:'/Categories',
component:Categories
},
{
path:'/login',
component:login
},
{
path:'/register',
component:register
},
{
path:'/logout',
component:logout
}
]
}
I understand that Vue is supposed to take over the routing if you use a SPA, but is there any way to use both? I can't find anything that addresses this issue but I can't believe that Laravel would make you choose to either use their built-in commands like php artisan make:auth or have to scrap all of that and do it all manually if you want a SPA with routing.
I've tried going through different CRUD turorials on using Laravel and or Vue.
I've tried directing all of the routes to Vue to have vue-router handle the routing.
I've tried not giving all routing to vue-router and retaining the back-end routes that I had in web.php
Other semi-related problem is my routes aren't even appearning as links using router-link . It just appears as normal text. But for now my priority is the routing issue.

Answer 1

You can combine both vue route and Laravel route. But for the best result, I advise you use vue router since you are building an spa.
remove
Route::get('/', function () {
return view('app');
});
put all the backend route before the route that point to your vue.
Route::resource('Videos', 'VideoController')->middleware('auth','isAdmin');
Route::resource('Categories', 'CategoriesController')->middleware('auth');
Route::get('/search', 'VideoController#search')->middleware('auth');
Auth::routes();
Route::get('/settings/account', 'AccountsController#edit')->middleware('auth');
Route::get('/auth', 'AccountsController#get');
Route::put('/settings/account', 'AccountsController#update')->middleware('auth');
Route::get('/{vue_capture?}', function () {
return view('app');
})->where('vue_capture', '^(?!storage).*$');
Also, verify that you don't have conflicting routes on your backend (run php artisan route:list to see your laravel route list) and vue routes. I hope this helps.

Answer 2

The accepted answer is perfect (I upvoted but I have no rep yet for it to count) and worked well for me but only under the condition if I also created 'dummy' vue components and imported them to work with the routes. Hope this helps!
import Login from './auth/Login'
import Register from './auth/Register'
import Logout from './auth/Logout'
{ path:'/login', component:Login },
{ path:'/register', component:Register },
{ path:'/logout', component:Logout },

Answer 3

You can just use this instead
Route::get('/{vue_capture?}', function () {
return view('app');
})->where('vue_capture', '^(?!storage).*$')->middleware('auth');