Can I completely separate Vue.js Front-end to Laravel Back-end

Yes

Is there any pros and cons if I do this way? Thank you.

It's easier to run it together imo. For example if you run them separately you will have to run a nodejs process for your Vue (or your can build it and server is as static). You can run them from the same server or different instances. If you run them from the same one you will have to server your Laravel (API) from a subdomain or from a different port because your Vue will run on port 80.

Just off the top of my head... some pros and cons.

PRO:

• Fully decoupled apps are more easily scalable
• Standalone vue app can easily utilize a CDN
• Additional backend services can be added via other backends, instead of continuously growing your laravel backend code

CON:

• Generally the application will be 'stateless' and authentication done via JWT token, which can be a little more challenging
• Permissions/routing/etc is sort of double effort since the laravel side would most likely end up just being an api, and vue would need to also enforce who has access to what frontend routes/etc. This can cause some level of duplicate effort

It's probably not necessary for most people/most applications to fully decouple, and it can be more work at least initially.

There are benefits to both methods, ultimately it really comes down to what you need/want to do. Can always change things later too.

If you do go the route of a completely separate vue application for your frontend, I really cannot recommend netlify highly enough for hosting of the vue portion.. it is the best for that sort of thing.

I agree with everything @willvincent said.

To try add to what they touched on in their last CON, Once you have decided to go with separate frontend and backend I would also suggest considering a separate authentication system as an alternative to Passport or Socialite to try decouple laravel further and treat is as just an API server. Auth0 and FireBase are a couple good ones which both have Laravel SDK's and detailed instructions.

Your front end and back end get their JWT tokens and refreshed tokens directly from the 3rd party Auth provider. Your back end just needs to verify the JWT token from the front end user. The 3rd party auth provider also takes care of all the hooks if you also want to use facebook, twitter, github etc. with Oauth so that simplies things quite a bit for 3rd party Oauth usage. Adding other backend systems is also easier doing it this way.