New Livewire Volt: Practical Example Component

hello guys recently on Twitter I saw Benjamin posting his laravel blog as open source and I decided to dive into the code and review it but not in terms of quality of is it good or bad but basically noticing some interesting parts to shoot a video or to tweet about like tips about laravel or certain features that Benjamin has implemented on his blog his blog is free on GitHub and I'll link that in the description below as well as the original tweet and in a few videos I will choose the topics to demonstrate to you something interesting from that source and this is one of the best ways to actually learn laravel or whatever is dive deeper into already prepared code base especially if that code base is for Real project that is already live and running like his blog and topic of today is how he used a recently launched laravel Vault for Live Wire first I will demonstrate to you the page each how it works so I've installed that blog locally for that Benjamin has instructions in the readme of the repository and one of the pages is migrating PHP unit tests to test with a new drift plugin of pest 2.9 by the way I have a video about best 2.9 latest release and I'll link that as well in the description below but basically if you have a PHP unit test here Benjamin would help you to migrate it to past syntax so I try to find any random PHP unit test and in one of my older courses about booking com API there's a test to show apartment so I just copy The Source paste here with PHP in the beginning paste and then migrate to past and then I get the result with some syntax migrated to past syntax like users here test here and maybe some other stuff changed but that's not the point this video is not about past or PHP unit it's about how that page works as you can see there's no page refresh I can also click migrate another test which would clear up the text area here so how that works with Vault vault is a pretty new addition to laravel family here's the official blog post about it it was introduced at larocon us and I have mistakenly been calling that laravel Vault it's not actually laravel Vault it's Vault for Live Wire and the documentation for that is not on laravel.com it's on live while laravel.com Vault Vault allows you to create Live Wire components without actually creating the full component let me demonstrate so what Benjamin has on his blog is this we're talking about this page so there's route view which is URL and then view file the blade file if we go to that blade file this is a typical blade file nothing really fancy with blade components for layout and we are interested in this part so in the middle of that page there's a live wire cam component with a weird name Paul West which somehow stands for PHP unit 2 Pest and the main part what Vault does that live wire posed it's not a live wire component in full so if you go on the left hand side there's no app HTTP Live Wire folder as it was in Livewire 2 in Live Wire 3 it has been changed to app Live Wire but also no folder of app Live Wire which means that the full Live Wire component is just in Live Wire blade part so let's take a look at that one so here's that file resources views Live Wire pole West blade so there's non-live wire blade and inside of that you have Live Wire component and by the way I'm a big fan of using Live Wire in this way so the project the full project is laravel with typical blades and then inside of blades whenever you need the dynamic Behavior then you inject the Live Wire it's not a full page component so yeah with Vault you have a state of variables and you import state from Vault so basically you have two variables here code and result then you have a function which you would otherwise declare in the Live Wire component your function does something in this case it uses best drift class so this one converts the code and assigns that to this result so again we're working with result and the code this code and this result and then another function called again or I would call it cleanup or something just clears up the variables and those variables then look like a typical Live Wire component so there's wire click again migrate another test if we have the result else we have wire submit with my grade with Live Wire 3 by the way there's no need to have submit prevent because it's the default and I have a separate video on new features of Live Wire 3 and I will link that as well in the description below and then we have wire model code and button for submit so nothing really fancy here but what I wanted to show you is Livewire vault in action where all your logic is just in Blade it could be a debatable thing and part of me inside my kind of internal voice tells me that it is kind of bad to have everything in one file especially if it has much more logic than this one because it's kind of against off separation of concerns and classical MVC and architecture but for examples like this one with simple page with just a few variables and a few methods I think is pretty cool it reminds a view component with logic and then template just in Live Wire without writing any JavaScript what do you think about this one have you used vault in action already what is your impression about it let's discuss in the comments that's it for this time and see you guys in other videos

Channel: Laravel Daily

Views: 7,399

Keywords:

Id: wa_NQTH1sQc

Length: 5min 53sec (353 seconds)

Published: Mon Aug 21 2023