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
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 have some settings in my app that can by changed by admin (like categories of products that every user can choose from when creating new product). I'm storing them in database 'settings' table that consists of 'name' and 'value' columns.
I also added a Service Provider that adds those settings to config and caches them. I can access them from Laravel easily, but not from frontend (using Vue).
Is there any way to access Laravel config values from Vue? I've tried this answer but with no success. Should I make request for settings with every API call?
If your setting is dynamic you must request them each time on a API call.
If not you can get those setting once when you deploy your fronted code.
I don't know if I'm understanding your question correctly but...
Laravel configurations are part of the backend. The only way to access them on the frontend is by passing them to it.
Unless there's some fancy trickery I'm not aware of, a Vue.js app, which loads and runs on the client-side, wouldn't have access to your server-side configurations -- unless there's something that say drags them in during compilation that I don't know about, which would strike me as risky at best.
But generally speaking, client-side headless app can't access server-side data unless the server says "here client, have this data."
E.g.
class MyApiController extends Controller
{
function getThisConfig()
{
return config('this');
}
}
With:
Route::get('/api/config/this', ['uses' => 'MyApiController#getThisConfig']);
And then your Vue.js app sends an AJAX request to /api/config/this.
Disclaimer: this is not entirely a programming question, i am asking for your opinions. In case this post does not belong here, please let me know and I will remove it.
I am on the process of planning a rather big app using Laravel and VueJS. My main question is what is the best way to do it?
The app will involve users registrations, login, different user roles and permissions, profile pages etc.
Is it a good idea to use Laravel router to load the pages and create multiple Vue instances for each page? i.e. have one Vue instance handle the frontpage, have another Vue instance handle the profile page etc?
Or is it better to create one Vue instance with multiple components and use Laravel purely as API server?
Do you have any tutorials or resources that might help me decide on one approach or the other?
I would appreciate if you give me your view on this.
Thank you for reading :)
=====
Update
Thanks for your replies and time you spend on this. I got another question. Lets say I decided to go with MPA and I have 1 Vue app to handle one page, is it possible to use Vue router for each page? for example
'/profile page will be rendered by laravel
Everything after /profile should be handled by Vue'
Now if I want VueJS to handle routing I put this in web.php
Route::get('/{any?}', function () {
return view('vueentrypoint');
})->where('any', '[\/\w\.-]*');
Can I do something like
Route::get('/profile/{any?}', function () {
return view('profileentry');
})->where('any', '[\/\w\.-]*');
Route::get('/user/{any?}', function () {
return view('userentry');
})->where('any', '[\/\w\.-]*');
If you need multiple in an Laravel instance, you should separate applications with more than one Vue instances. For example you have a e-commerce web application and you have three area and them is;
Customer Dashboard: Customer information, wish lists, delivery information, bought items, help tickets etc.
E-Commerce Website: Home page, Categories, Lists, Item Reviews and Buy Items
Worker Dashboard: System updates, new items, new categories, new lists, help ticket views etc.
Note: Maybe Customer Dashboard and E-Commerce applications can be one but I love to separate customer dashboard from everything.
That three applications can separate with three Vue instances. And it is not best practice to make new Vue instances for just one page.
Route::get('/w/{any?}', 'SpaController#worker')->where('any', '.*')->name('spa.worker');
Route::get('/c/{any?}', 'SpaController#customer')->where('any', '.*')->name('spa.customer');
Route::get('{any}', 'SpaController#website')->where('any', '.*')->name('spa.website');
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.