There is a great boilerplate for that. Search on github for laravel-vue-spa. Maybe not in that order.

Vue has to maintain its state. Build a RESTful API between the front and back.

Ok, so I have to handle this like they are 2 different application: the web interface totally handled by vue (and vuex as router) and Laravel as backend. Vue and Laravel should talk via API and JWT auth.

That's fine. I'm already doing in this way.

But: i can't rely the auth procedure to javascript, for security reasons. What I would like is to drop ANY access to all routes, except the login/register/password-reminder routes if not properly authenticated. If Vue is talking via API to Laravel, the browser is never logged in (the auth is made via ajax call with a JWT token), so, how can I prevent, via Laravel, to access the vue application if not logged in ?

I'm using the auth middleware, but AJAX auth are using JWT and they are different than standard browser auth. In example, i'm able to call the laravel application from vue by using the JWT auth, but when I reload the page, the auth is lost and i'm redirected to the login page, this because when reloading the full application, the call isn't made by ajax (using the JWT token) but directly from the browser

Ok so you wnat to have an api with laravel or lumen and a vuejs app on the frontend. Than youre only option is to use Vuex to store the state of the auth.You can't use laravel for auth.

You need a tutorial on how to use laravel with vuejs and Vuex.

Try this https://scotch.io/tutorials/handling-authentication-in-vue-using-vuex#toc-hide-pages-behind-auth

Also never put important data in jwt use encrypted jwt.

JWT is already encrypted (i'm using this: https://github.com/tymondesigns/jwt-auth )

Also, i'm already using vuex to store the jwt token on the browser, the issue is when customers reload the page. I can't relay on javascript for auth, it won't be safe. Some routes must be protected directly from laravel (and it's already like this, all API calls are authenticated) but, in example, how can I prevent direct access to this route:

/customers

? The internal API will be rejected (thus, the customers list is not shown) but I would like to deny the access to the page (to not show a broken table) and redirecting to /auth/login automatically.

Have you tried to integrate view componenets in blade templates? Like this?

https://laravel.com/docs/7.x/frontend#writing-vue-components

no, because this is a full vue application, with hundreds of vue files/components. I can't map them 1:1 to blade templates.

I don't think that is related to my question. I need to block, from laravel, direct access to a page route. These page route are handled by Vue and even the auth is handled by Vue (with JWT)

Ok how about combining the auth middleware with this for a speicific route ?

return redirect()->route('login');

That's what i'm trying to do. It doesn't work because the auth is handled by vue by using a JWT in an ajax call. The redirect you are talking about doesn't make use of JWT at all , so it's always denied.

Solved with Sanctum. I wasn't aware of that. Absolutely awesome