Laravel 8 Livewire Tutorial (Building a Simple CMS) : Understanding the Jetstream Modal (part4)

hi i'm billy and welcome to jack of traits in this video we will learn and understand the basic implementation of the livewire jetstream modal component and without further ado let's jump right into it [Music] in the previous video we used the jet stream dialog modal component to display our modal component in our crud operation this time we will tackle how in the world we can use these components quickly note that we are not going to be digging down through the larval source code but instead we are just going to emphasize how we can manipulate our jetstream dialog modal to understand its usage so go ahead and open up resources views vendor jet stream components look for the file called dialog modal.blade.php as you can see inside the xjet modal markup we can see that there is a title content and footer variables we can inject any html blink components live wire components or any data that are parsable by the blade templating engine through these variables since the jet stream dialog modal is still just another blade file we can parse all the variables we pass inside just like using blade files to display our views in our larval application another thing is do not be confused with the x-jet word that you see in any jet stream components just think of it as another laravel invention that allows laravel to distinguish the type of markup they are dealing with when it comes to parsing the blade file they just use the x-jet word to identify that it is a jet stream markup let us take the jetstream dialog modal component we used in our delete functionality as an example and open up our pages.blade.php to see what we did here the title content and footer variables will allow you to display any blade views in your jet stream dialog model we inject the view files into the jet stream modal component by writing the x slot markup with an attribute of name and you can also notice that the names values correspond to the name of the variable inside the jetstream dialog modal component we opened earlier so in other words everything you put inside the x slot markup will be injected inside the jet stream dialog modal component all the other jet stream components are pretty much the same we are just using the jet stream dialog modal component here as an example because this is the only jet stream component that can communicate with your live wire components all the other components are just merely blade files that have tailwind css styling so to further emphasize the usage of the jet stream dialog modal we will add another variable inside the jet stream dialog modal blade file note that i would not recommend updating your jet stream components but for the sake of example we will add a custom variable inside our jetstream modal component and call it another content [Music] notice that when you reload the page laravel throws an error exception this is because when we added the another content variable the jet stream blade file expects a value inside the another content variable and note that we are using two jet stream dialog modal components here the first jet stream dialog model we used is for the create an update operation the second one is for the delete operation so let's go ahead and add an xlot markup for the another content variable note that we can put the xlot markup in any order as long as it is inside the jet stream dialog modal component notice that we are putting the another content at the top but even if that happens we will see the another content slot at the position where we just put in the jet stream dialog modal blade file do as you can see we are able to display the contents inside our custom added variable and even if we put it anywhere inside our jet stream modal markup it will retain its position based on what we specified in the original jet stream dialogue modal blade file even if we only touched one topic for a jet stream component it's pretty much like the other jet stream components you can find inside your laravel 8 applications they may differ to some degree but the blade templating engine's concept will stay the same if you enjoyed this video give it a thumbs up comment share and subscribe if you're new to this channel don't forget to hit that notification bell so you'll get notified whenever a new video is up stay tuned and see you in the next video

Channel: Jack of Traits

Views: 5,198

Keywords: laravel livewire tutorial, livewire tutorial, laravel livewire, laravel livewire basics, laravel tutorial for beginners, laravel livewire for beginners, laravel 8 livewire tutorial, laravel 8 livewire tutorial for beginners, laravel 8 livewire jetstreams, laravel 8 jetstream, laravel 8 dialog modal, laravel dialog modal, laravel modal, laravel jetstream dialog modal

Id: UEJBlc7uxBE

Length: 4min 40sec (280 seconds)

Published: Mon Nov 02 2020