I have a question about the use of the Laravel API.
I have a simple application where logged in users can post messages with VueJS and the Laravel API.
What is the best practice to do it?
Use the web.php router with a standard controller, example:
Route::get('/posts', 'PostController#index')->middleware('auth');
The api.php router where I insert the user token with every VueJS request, eg.
Route::get('/posts', 'PostController#index')->middleware('auth:api');
In my opinion, the use of the api.php router is only a good solution for external use (if another application wants to use my application).
Is that correct?
Yes, the api.php routes are meant to be used for any other front end that is not built in the same folder where that laravel instance is (even though there is nothing wrong using the api.php like that also)
So if you are using the views you have built in resources/views/ or as vue components inside the same app then use web.php for routes, and for "external front end" use api.php.
True. From my experience api.php is really best place in Laravel to write api end points to be consumed from external apps like android app or even for AJAX calls from within the same Laravel App using external js frameworks such as jquery, vue etc.
Related
I'm developing a personal project using Laravel with Inertia.js. I tried retrieving data from back-end to front-end through HandleInertiaRequests Middleware. I was wondering how will malicious people could get advantage of the data I show up in front-end. Inertia.js webpage discourages retrieving sensible data in this way, but I can't figure out how that will be possible. I apologize if my answer sound a little naive, still pretty new to Laravel ad never used Inertia before. Thanks for your time!
The HandleInertiaRequests Middleware is nothing but a way to merge data into the array that will be available to your JavaScript components (Vue, React, Svelte) on the client side.
It is just a way to avoid repeating yourself on every controller for things that you'll probably need on a lot of pages. For example, instead of getting the data for a Menu component on every controller, you do this only in the HandleInertiaRequests Middleware.
So, they only warn you to be careful with what type of data you put into it. For example, you probably don't want to pass the user password through this in the same way you wouldn't do that using a Blade view instead of Inertia.
I am currently looking into Vue, as my front for my Laravel backend. Before doing anything I would like to ask a few things.
Let's assume I have a master template - a users Profile. When I first access a users profile, I get all his data (let's assume address - as another tab, personal data as another tab, and n Tabs specific ). Whenever I would access a user /user/1 I query all his sub-tabs and share this data between the tabs ( to reduce calls API ). Is such attempt possible?
When I took my first look at Vue, the first concern was that it uses Axios ( ajax ), and I do not really want to expose my endpoints, the profile data is publicly accessible so its not as simple as just gate it behind authentication. Is there a way to prerender data?
Thanks for any help.
Yes, definitely - Vue to Laravel communication is mainly done through API, especially if you cover entire front-end in Vue.js and not a mix of Vue and Bladee.
There are ways to 'kinda' prevent any abuses of your public API, but let's face it - anything can be walked around because limiting your public API will limit how your website works.
One approach would be to configure session to wipe-on-close and then generate token when someone enters the website - this way, only people who have a valid token (are currently on the website) can use public API.. but it's a two-edged sword.
I think the solution to both of your concerns would be to pass the data you need from the controller to your Blade template, and from there you echo it as json, and on you Vue side, you accept it as a component prop.
An example:
#extends('layouts.user-profile')
#section('user-data')
<user-component
:data="{{ $user }}"
>
</user-component>
#endsection
The important part here is :data={{ $user }}. Here you are echoing out the $user php variable, and Laravel will automatically convert it to json.
If you are not familiar with Vue component props, here is the documentation: https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props
I want to add next.js framework to Laravel
In preset we have
[php artisan preset react]
But I'm not sure how to do with next.js
How can I add next.js to laravel clean and correct as adding React with preset?
Adding a strong and sophisticated framework such as Next.js to laravel, would be very long long way to code and debug, and IMHO wouldn't be the optimal or feasible solution, specially if we came to SSR
Instead, you can use it as if you are making an SPA in react, which use Laravel as api or use Lumen; and then pass the data to Next.js through ajax, while using Next router.
To do this, there is a routing gotcha you need to make sure you don't fall in its trap, which is server routing and Next routing; you just pass this to Laravel route/web.php
Route::fallback(function () {
return view('your-react-page');
});
passing this will make sure that all routes are falling back to this page, if you want any other links to be served by Laravel, just make sure to add them before the fallback.
or if you want to specify a route, you can always use regex.
I'm starting a new large-scale application and after hearing a lot about VueJS + Laravel combination i thought of using it. I followed Laracasts' Learn Vue 2: Step By Step series and some tutorials to understand how it works.
But have few questions in mind:
Why do we even need to use Vue with Laravel. I understand that we can create component like <user-profile></user-profile> in Vue, and then use it in Laravel Blade. But it looks like over-complication things? Firstly we pass data from controller to blade, and then further pass it to vue. Why do we need to do that?
Laravel and Vue both have their own routing system. Which one to use?
How to structure an app using Laravel + Vue
PS. I'm making an application that will mostly be used on mobile devices.
moved from comment
Why do we even need to use Vue with Laravel.
Although you probably already knew, Vue is just one of many javascript frontend frameworks (libs?) You can consume the data send from the server any way you want. Vue is just the sister-framework of Laravel. The only thing you can probably say as to why they are mentioned together is that you can "talk" (interface) easily between them using json objects. Javascript is meant to make your page interactive, have behaviour. Use it when you need this.
Laravel and Vue both have their own routing system. Which one to use?
Whatever you want, do you want a "single page" (blade) that is rendered in 3 different pages by Vue, say like some kind of Wizard form. It really depends on where you want to put the load. I think you can think of use-cases where client side page rendering would be better, but most of the time server sided will be a great choice.
Single page applications are more snappy (faster) after initial load, but server side rendered applications are better for SEO in general. There are also ways to let a SPA render on the server to improve SEO however. And this we we can keep the discussion going for some while.
How to structure an app using Laravel + Vue
Laravel has already an example vue file under resources/assets/js/app.js. So it is safe to assume you can put everything there.
I have a Laravel application which is using Blade as the frontend. I'm feeling the better (more future proof) option would be to switch to Angular, Vue or React, (not entirely sure yet which one I will use but that's not the question of this post)
I've always thought that the backend code should expose an API in order for these JS frontend frameworks to work. I currently don't expose any sort of API.
I basically designed it in the normal way:
define route pointing to controller
create controller function and direct it to a view
create the Blade view
Couple of questions:
Should I redesign my backend to expose such an API?
Can I call Angular/Vue/React code from my controllers, similar to what I'm
doing with Blade?
In case the answer is yes to question 1,
shouldn't I consider changing to Lumen then?
using frontend framework means you would most likely build you backend as an API,
a common scenario is:
a single route the points to a controller which loads the angular/vue app
the angular/vue app would handle views and templates.
once the app is loaded you only need to communicate with the server through the exposed api's
you can't call you js code from laravel controller and you probably won't need to.
as for your question lumen vs laravel, I think it's up to you to decide that. both have pro's con's.