Laravel Web Route or API Routes for application with VueJS in front end

Question

We're currently developing a multipage app using VueJS as frontend javascript framework, Element.io as CSS framework.

We're not exposing any web services or some kind.

Our application is responsive - users can create records using desktop and mobile.

Do I need to create API routes or WEB routes is sufficient enough? Are there any scenario you can think of that I need an API route?

For an authentication, for example, you should provide an API... — Bart
– Bart, Commented Sep 10, 2018 at 22:08
Bart and the other routes can be WEB route? So creating a VUEJS application doesn't require me to create API routes is this correct? — Cruze
– Cruze, Commented Sep 10, 2018 at 22:18
Unless user authentication needed, YES you can work with web routes only. However, in general, it is always better to access ajax calls via API, cause then you have a backend for creating mobile apps, which can interact with your server. And @emotatilitys answer clarifies this a lot more... — Bart
– Bart, Commented Sep 10, 2018 at 22:31
So the general rule should be to use WEB.routes for complete web pages with html code and API.routes for actions, which produce JSON responses... — Bart
– Bart, Commented Sep 10, 2018 at 22:37

emotality · Accepted Answer · 2018-09-10 22:27:55Z

5

Web routes are for frontend views where API routes would be for API calls, you would definitely need to separate them as your VueJS will make calls to your API with JSON and get a JSON response in return with error codes to handle your errors efficiently.

Web Controller:

return view('blade_file')->with(compact('var1', 'var2'));

If you set the error codes here, it will show you the blade file for that error code, eg. 404 will show you the blade view file at ./resources/views/errors/404.blade.php but your application will expect JSON response instead of HTML response.

API Controller:

return response()->json(compact('var1', 'var2'), 200); // success

return response()->json(['error' => 'bad request'], 400); // bad request

If you set error codes here, you will still get a JSON response, just with the error code specified.

Conclusion:

Separate your frontend and backend with API and Web routes as requests/responses are handled differently.

Notes:

Remember to add your CSRF token in your header when making ajax/axios requests to this API.
Make sure your middleware is api. If the API only allow authenticated users, you would need the middleware to be auth:api and you would need to use Laravel Passport.
Remember to add the namespace of Api to your API routes, either in routes/api.php file or app/Providers/RouteServiceProvider.php.

edited Sep 10, 2018 at 22:27

answered Sep 10, 2018 at 22:21

emotality

13.1k4 gold badges43 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lord Jesus Over a year ago

I know this is old thread but is it possible to use web routes for API call and have your web controllers return response like the example you provided? Will it still work?

emotality Over a year ago

@LordJesus Not sure I follow, please explain or get in touch :)

Lord Jesus Over a year ago

I meant if I am writing a laravel app using vuejs for example, I would define my routes normally in api.php. My question is can I define them in web.php instead even if it's not the convention?

emotality Over a year ago

@LordJesus ufff.. I don't know haven't done that, not sure what the headers would look like but if you get any errors, it will display text/html instead of application/json. Rather just stick with API routes and work with JSON as Laravel already takes care of handling exceptions from an API point of view.

Collectives™ on Stack Overflow

Laravel Web Route or API Routes for application with VueJS in front end

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related