Livewire VS Vue.js: Practical Example of Dependent Dropdowns
Vložit
- čas přidán 8. 09. 2024
- Lately, I see quite a lot of questions like "What is better to use/learn: Livewire or Vue". Let's try to answer with a practical example.
Repository: github.com/Lar...
- - - - -
Support the channel by checking out our products:
- Enroll in my Laravel courses: laraveldaily.t...
- Try our Laravel QuickAdminPanel: bit.ly/quickad...
- Purchase my Livewire Kit: livewirekit.com
- View Laravel Code Examples: laravelexample...
- Subscribe to my weekly newsletter: bit.ly/laravel-...
I prefer to use both Vue and Livewire as per their pros and cons. When it comes to complicated DOM manipulation with heavy data load, I prefer Vue. When it comes to crud operations and simple DOM manipulation then Livewire.
With composition API Vue code is more cleaner. Livewire code is clean too.
Hi I am both new to Livewire and Vue.js for Laravel and this video really helpful in explaining the two approaches. Great video!!
Easiest way to decide which one to use. If your web app is also having mobile app or planning to do so then go for vue and api way as the main backend logic is shared between apps. Else if your team only consist of laravel devs then go for livewire.
The TALL (Tailwind CSS, Alpine JS, Livewire, Laravel) stack is the best for me for both small, medium, and large-scale projects.
Logically knowing how to flip states/concerns is what brings the beauty of Livewire. It has so much to it than just the form validation part.
My opinion though.
Livewire is a complete joke if you've used other front end frameworks before.
@@chilly2171 I've used React and Next on some projects before. Again, it's my opinion...and that doesn't make them useless to me. I still use them depending on the project and delivery time.
@@celebritydev1 You literally compared Tailwind and Alpine as your stack. Not sure if I could take you seriously.
@@chilly2171 I'm not sure you understood from the beginning.
Read again.
You have your brains unless you choose not to use them.
@@celebritydev1 Like I said, can't take you seriously. Internet warrior ragemonger. lmfao.
Excellent video as always Povilas! I would love to see a video with your thoughts on using Vue "traditionally" (without inertia) vs using it with inertia. I do not really understand the difference or the pros and cons of it.
The full stack VILT (VueJS, Inertia, Laravel and Tailwind) it's best for medium and large projects, it's much more complete and powerfull.
Me too!
I prefer to separate the front-end and back-end environment easy to understand codebase, decoupled environment makes debugging, scaling and optimization ops are is little bit easy plus beauty of an api, re-usable for devlopment on other platforms or devices, as for livewire i am not sure how it will look on large scale web service I want to see how it will turnout these provides great insights. thank you for the awesome video.
Inertia is the best of both worlds
I feel like the more important part when working with forms is not collecting and submitting data but providing feedback to a user. Button spinner when request is being submitted, toast on success or failure, validation errors under input fields that dissapear when the field is in focus. This is where I would like to see Vue and Livewire compared. Form without proper feedback to a user is a bad design.
This is when Livewire starts to suffer...
@@jameswrightson744 oh, i see. I've never worked with livewire. When it came out I started getting more of react and vue projects. Would've been nice to see how livewire performs in real life UIs. Not just contrived examples that fetch data.
Then you may watch this video: czcams.com/video/xY0O2tSO8v0/video.html
@@LaravelDaily Thank you. It does answer some of my qustions. However in the video you are demoing happy path when you are submitting the forms. What about not so happy path? If all fields are blank, can user still submit a form? Are validation errors field specific? Is an error going to dissaper when user focuses on the field? Is there client side validation, so your server is not getting hit for no reason? I know those are small details but in real life you have to face them.
Estoy en mi proceso de aprendizaje y este video confirma mi decisión de aprender laravel/livewire. Muchas gracias por ser un gran aporte a la comunidad. 🤩
You have really a good teaching practice... I have learned a lot from you...
I think, you delivered a great comparison video included facts 👏
Started using the TALL stack and love it. Hated the context switching between PHP and JS, its so much nicer to standardize on 1 language. I don't get why so many people knock Livewire. The extra effort for the server to render a blade view instead of jusr returning json probably makes no difference in reality. So long as you optimize the setup to avoid unnecessary network requests, things are fine. And I wouldn't be surprised if within the next few years a good solution for 2 way websockets in Livewire is found. The only way I could really see myself reaching for vue, is if I decided to make Laravel my API backend only and went SPA.
answer this: does it matter to YOU if slightly more server resources are spent? you as a developer? no? it only matters to the business owner. And that extra money is a number behind the decimal point. If you want to have high performance apps, you should probably not use php anyway but c# instead.
@@Jossnaz except for I'm not developing for someone else. I'm developing web apps for my own business. The extra resources are insignificant unless you operate at a massive scale. But at that scale I'd be looking at a whole different stack and not use php. At that scale I would be doing the developing myself I could hire a dev team for any language. I could get Go developers or something to write an API only backend and seperate javascript developers to do a Vue or React front-end served form a large CDN.
When you use vue, using permission to show, hide, allow... Becomes a mess..... In Livewire can embed the permission logic
Have you heard of inertia.js?
Nice video thanks, I've been meaning to look at livewire, but I'm usually building large SPAs, and having read the comments on this video I think I'll stick with my vuetifyjs setup.
vuetify not even using vue 3...
@@Jossnaz true, hopefully it will catch up soon.
Thanks for sharing this. it will help me deicide what to do!!
The argument for Livewire is often: it's for developers that don't want to learn javascript. I think that's a wrong argument, you should choose the things that are best for the project, not for the developer. JS and React/Vuejs are not that hard to learn.
If you're core PHP back-ender, react/vue is actually pretty hard because it's the shift in mindset, different compilation and debugging procedures, totally new world.
Not impossible to learn, but Livewire is smaller jump out of comfort zone.
@@LaravelDaily I agree with you. I prefer to work only with PHP and have a maintenance low cost. I have projects where we use Angular with Laravel and the cost for maintenance it's expensive for two technologies.
@@LaravelDaily Its not, at least wasn't for me, did backend for years with PHP with and without frameworks, and learned Vue in just 3 days. Its not much difficult at all.
You have really a good teaching practice... I have learned a lot from you...
I am a beginner and don't really know about javascript hence livewire seems quite easy to me because its syntax is almost similar to Laravel.
But the problem is Livewire lacks so many features that a javascript framework offers and VueJs has its own benefits like you said its API can be used for mobile in future and it have scope and demand in market.
I want to design the SPA and I am really confused which one to choose? Can you guide me please?
Waiting for your response
Thanks & Regards,
Junaid Ali
I don't like simple problem solutions with front end framework. All of older examples are far easier than Vue solution. It is even as easy as copy and paste and it works just fine. But when things get bigger and complicated, frameworks make it easier to read understand maintain and enhance.
As for livewire it is plain Ajax and i think it is just fine. The way it works hand to hand with backend is fantastic.
Livewire is crazy good except big apps where you have alot stuff that could be done on client side with vue/js but when u are using livewire its done by server side, with might be painfull on big scale.
Great comparison
I agree. Love the TALL stack. But everyone has his own preference. It's still in the baby shoes, but in a few years... Look at vue where it came from. Everything grows in time. and if you give it enough water and positive attention it can become a beautiful 'anything'
I would have love livewire over Vue but now I learned Vue maybe more rounded and long term compatibility with future upgrade e g mobile app.
So, do you think is still usual to use VueJS inside Laravel rather than decoupling it on a separate project or using the InertiaJS adapter?
It's a totally personal preference. If it's convenient for you, you can decouple.
@@LaravelDaily never worked with vue coupled inside laravel before
I'm doing a trello clone and a car rental dealership project (both personal projects) to test it and see if its good hehehe
Both things are good. Vue for frontend develop allow to get much richer app. Livewire looks good for fast develop by backenders.
Lets livewire vs inertia js
Question really here is which renders faster.
On first load , does livewire have to query the db first then render
Or does like viejs that load first the above the fold and then the data?
have u tried livewire with allot of selections not only 3? It'll just keep loading after every selection which isn't user-friendly at all
Personaly, because i am working on solo projects like, I am full-stack developer I prefer livewire
i prefer angular or react and laravel as backend, i see livewire too limited, it lacks of so many feature that a javascript framework offer to you
Thanks, your videos are amazing
love your videos, thanks!
Hi sir Povilas Korop, I have some question. is it okay if I use eloquent observer in every model for history log feature? or is there a better way to implement history log feature ? 😅. Thank you so much 💯
Use this package: github.com/spatie/laravel-activitylog
Yes, laravel activity logger is the great choice if you want. I have using in many projects
@@LaravelDaily Oh, This save my day, Thank you so much 💯
Thanks great video
Quite a good video. I was hoping this example would use inertia for the Vue part. Would you be doing this anytime?
Yes planning some inertia in the future, especially after comments on this video.
@@LaravelDaily Thanks. I'll be looking forward to it. Your videos are awesome by the way.
I really like these type of videos, but I was thinking in case that you want to let a user selet two cities from different countries, my idea would be to add a "add more" button and then have the same inputs again under the main one and when submitting they are an array, is that possible?
Possible, but I can't show that in a CZcams comment. Search on my livewirekit.com for invoice example, it's something similar
Nice video. Btw can you make single sign on example sir plz
Too niche topic, wouldn't be popular.
very good
I don’t like JavaScript so going with Livewire.
I use alpine with axios.
i have a question
i have a food ordeing project that has menu and order models each order has a menu_id (forignkey) that belongs to the menu,
the problam is when i delete the meue all the order that belonegs to this menu will delete also,
is there is way to not delete the order and still show the menu even the menu deleted
Use soft deletes and then withTrashed() to query the deleted records.
laravel.com/docs/8.x/eloquent#soft-deleting
just curious, what was your local environment setup? is it laradock or something else?
Laravel valet on my MacBook
can i use livewire apps for api ? like if my react native app want to consume api from a laravel project which is using livewire ?
No, Livewire is for web, not API
I came from livewire, and looking at reactjs and vuejs, I am just thinking that I got lucky and picked the correct one.
@Laravel Daily what about performance, which one is better?
It depends on how well the code is written
you probably dont want to go with php if you care about performance. Certainly not with laravel.
Please answer .. i want to create a product crud with livewire,, the product has some field's which shouldn't be required, so i didn't put 'required' but other rules in the validation for those fields. For example an image is required when creating product but not required for updating the product ..bt it has to be be a image . So if i try to update its still validating the image field when I'm not selecting any image for the product.
I think you are doing validation wrong. Try reading docs on validation and use google
@@krekas thank you... You're right.. i was doing the validation wrong.. 'nullable' solved my problem.. again thanks for your help
Well that's awesome
Laravel + ReactJS is the way ;p Since Vue is very similar to React, i guess i would choose it, instead of that Livewire...
One problem with Livewire is that the network requests are only queueing component-dependent.
This caused me issues when I had a multi-tab form with the save button in the parent component, and my internet connection was slow.
When I filled in a value, then rapidly clicked the save button in the parent component, the request to save the form would sometimes be processed before my change to the field.
When the save button is in the same component as the fields the requests are queued to prevent this, but thats not the case with multi component structures.
@LaravelDaily can't One use livewire with An api?
In theory, yes, but why?
@@LaravelDaily was running away from Vue needed to learn the Vue 3 structure lol but after watching your Vue composition API and Laravel API will use Vue
I tried both and I didn't like livewire, because it renders the whole component on any change and sometimes I have complicated queries and take sometime, so, rendering the whole component everytime is not good for me. Beside, it becomes harder to make every part of the page as seperate component. And everything in livewire is done in server side.
In the otherhand, vuejs (inertia) is amazing for me, the whole app is SPA and super fast. No server side rendering, no query excution on every change on the component. So in my openion, Vuejs is way better than livewire.
No, if you make your page from individual livewire components, it only renders that changed component.
@@rosselliot8971 that's right, but it became more complicated for me. I don't know, maybe I misused livewire.
Sir could you do a video on dynamic livewire modals?
I personally hate modals, so not planning to publish tutorials about them
@@LaravelDaily I agree. Do you have an alternative to modals?
What is the topic of webstorm? UI material theme?
PhpStorm: Material Darker
Correction 1: you don't necessarily need API. In order to work with vue
So how to get data from server, or post to it?
Inertiajs
@@LaravelDaily I think he's speaking HTML!
Why did you never checkout inertia
Here is a bug as you can see in the Livewire part when selecting the country randomly the default selected city disappeared. we have to click on the city list to select. And also on the first time clicking the country, the default city appears its value not initialized in the option value. can you please give some advice on why this is happing?
The example demo may be not ideal because that wasn't the purpose, I agree there may be some glitches. From the Livewire component, you need to manually initialize the dropdown value that you want to get as automatically-selected, on the first load or after reload of the cities.
@@LaravelDaily Do you have any example or sample code? I have googled the issue but it seems all examples are the same just like you Thanks
I think in my livewirekit.com I have debugged and solved similar issues in various components
hello @Laravel daily, do you still do mentorship remotely ?
No unfortunately don't have time for that
@@LaravelDaily oops, okay thanks for reply anyways
Just when I improved my Jquery skills, this livewire shit and VueJS is out. Freakin hell
I am backend developer i prefer Livewire.
The advantage of Vue is when you want to use Vuetify for example. This UI library determines me to use Vue instead of other frameworks.
The ilvewire version could be done a little bit better. Instead of keeping the full model collections inside the $countries and $cities properties, you could just use the data you need ([id, name] pairs). That way you won't load models unnecessarily in memory. In this particular component, I see no reason for using models in the blade template.
$this->countries = Country::pluck('name', 'id');
$this->cities = collect();
...
$this->cities = City::where('country_id', $value)->pluck('name', 'id');
...
@foreach ($countries as $id => $name) {{ $name }} @endforeach
...
@foreach ($cities as $id => $name) {{ $name }} @endforeach
Good suggestion for optimization, agree.
LIVEWIRE
Laravel daily. Why don't you make a complete series on laravel for beginners on youtube
I already did, here laraveldaily.teachable.com/p/laravel-for-beginners-your-first-project
if there any way to contact you direcly? the ideas sound ok. but I have exact questions and aftermath. I need a friend or anyhow you call yo talk and go further. so on. your attitude is pretty close to mine. Just a blank question. no spam or etc. p. s. not about code manner, but very about the code attitude.) Just in case.
I don't have enough time in the day for both CZcams videos and personal consultations, sorry.
@@LaravelDaily in future cases: it was not timewasting option) Just pinging.) 40 minutes is quite short time for response. but options for both might be better) for future reference)
Wrong comparison, don't you know something called inertia is ?
I know, that's actually an idea for another comparison video in the future.
Livewire is winner
I am a single dev and use vue, but I am struggling with it. Livewire seems so much easier. But how long will it be supported? Vue might be the better choice for the long run. Do you agree?
Yes it's a bet on the future. Seems like Livewire is going strong but who knows what happens in a year or two. But, likewise, what guarantees are about Vue?
@@LaravelDaily Vue is more "standard" and versatile as it uses json apis and works for all kinds of frameworks.
In theory, yes, but same question - no guarantees it will be supported for longer than Livewire.
@@LaravelDaily 👍🏻
@@LaravelDaily there is whole team maintaining VueJs
When I compare all the comments I feel so old lol. I started with HTML 1.1 Strict, now you talking about 3rd world problems. Every Framework, every stack, library or whatever does serve a specific purpose and has it's reason to exist. But that doesn't mean anything is the best for everything.
As a Developer you have to know your Tools and choose the right thing at the right time. It's like only because you "can" nail down a nail with a brench doesn't mean it's the right thing. Why not use a hammer to nail down a nail? You know?
So, just to open your eyes up on this a bit. And if you didn't developed at HTML 1.1 times where WE (old school devs) learned everything the hard way from books, no stackoverflow, no chatgpt, no internet (on my side), then step back with your aggresive comments.
Livewire anytime.. I'm not a JS guy
Livewire is looking better for me. I dont like js 😊
Second
Livewire forever alone people :(
Live wire vs VueJs cannot be compare at all. They serve different purpose.. Why don't you make a comparison of vue-patitie vs live wire that could be more fair (vue-patitie is on test still)
You literally write vue like in 2016 and u pretend to do comparisons? Composition API?
Thats not the point of the comparison. Options or composition API will do the same thing, in this particular example.
he's trying to make PHP look cool, lols
For the sake of higher performance, VueJs shouldn't be used unless SPA is created. There are 3 better options to add interactive components: Livewire, AlphineJs, Vanilla Js.
now there is petite-vue, only 5kb and no bundling process, great for small interactions