Yeah I don't think blade is going to work easily as an SPA with Vue (Somebody correct me if I'm wrong here). I would use Sanctum Token based Auth (Can upgrade to JWT down the line), then have a Vue App, use axios library to call the Laravel REST API routes, which will talk to your controller methods. You can then have your Vue functions inside a state library like Pinia and can store user and tokens in session storage (You should google where else you can store these tokens, as there are different debated options with pros/cons)
Using Vue Router Library you can check if token exists and if it doesn't send them back to login page. The token if exists can be used in your API calls, which should exists inside your callable Pinia State Libraries (you may need to read up on this).
This example is in Pinia State, but you can use Vuex as a state library. Then have a look at Vue Router, you will need to check required Auth, I will leave an example below.
async login(email, pwd) {
try {
const user = await axios.post(`${apiUrl}login`, { email: email, password: pwd })
if (user.data.success) {
sessionStorage.setItem('TOKEN', user.data.result.token);
sessionStorage.setItem('USER', JSON.stringify(user));
this.header = { "Content-Type": "application/json", "Accept": "application/json", "Authorization": `Bearer ${user.data.result.token}` },
this.token = user.data.result.token
router.push('/Dashboard')
} else {
this.apiErrorMsg = user.data.message;
}
} catch (error) {
console.log(error)
}
}
Router Example
const routes = [
{
path: '/',
// redirect: '/dashboard',
component: DefaultLayout,
meta: {requiresAuth: true},
children: [
{path: '/dashboard', name: 'Dashboard', component: Dashboard},
]
},
{
path: '/login',
redirect: '/login',
name: 'Auth',
component: Login,
meta: {isGuest: true},
children: [
{path: '/login', name: 'Login', component: Login},
]
}
]
const router = createRouter({
history: createWebHistory(),
routes,
})
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !sessionStorage.getItem('TOKEN')) {
next({name: 'Login'})
} else if (sessionStorage.getItem('TOKEN') && to.meta.isGuest) {
next({name: 'Dashboard'});
} else {
next();
}
})
export default router