Laravel Routes with Vuejs Routes

Question

I am developing a CMS application using Laravel and VueJs so I want to achieve these:

• I want use VueJs Routing for SPA
• I want to use Laravel Routing for the admin side

And here is the problem:

• If I use the below approach admin will not work

  return view('welcome');
    })->where('any','.*');

• If I use the other way around SPA will through 404 error message

Answer 1

You cannot use both router to return your html. You have to make a choice here.
Since you want an SPA, you will have to use the VueJs router to navigate within your view/route.
Your Laravel app will be used as an Api endpoint to get the data (as Json format probably)

Answer 2

Most modern applications are adopting in one way or another the concept of client-side routing, especially when it comes to component-based frameworks such as react and vueJS as in your case.

Where is the process of routing from one path to another is done with JavaScript on the browser without the need to request the path from the backend and refresh the page every time. Instead of the traditional method, the rendering of the components is done on the client side, and if there is data that needs to be loaded, it will be via HTTP Requests. Since this will reduce the amount of data transmitted, it will necessarily speed up the server response time and make our application better and faster performance.

So far no problem, but in Laravel. When we try to build an SPA we will run into a conflict between Laravel Routing and the client-side routing. And since it is normal that the client-side routing process is led by a JavaScript file, it will itself be loaded from a page provided by the server side for the first time.

Meaning: if we have a page that asks for the path admin/articles to be rendered through the client side, it will not be possible to go to it by just printing the link randomly and submitting the request on a new window in the browser, for example. The server will receive the request and return a response with an error Not Found 404. This is normal because this path is not defined on the server side, but it is on the client side, and since it is requested first by the server, it will not be displayed.

As a solution to this problem, we will need to tell Laravel which paths we want it to direct to the same view from which the client side router is loaded so that this request can be processed for that path. In this we need a regex description that includes all or some of the paths you want the client router to handle. using the method where can be helpful at that point

Route::get('/{any}' , function(){
   return view('your_spa.blade.php');
})
->where('any' ,'.*');

you may need to exclude routes that are prefixed with admin like so:

Route::get('/{any}' , function(){
   return view('your_spa.blade.php');
})
->where('any' ,'^((?!.*admin.*).)*%');