Real-Time Apps with Laravel Livewire 3: Installation and Primer

hey what's up guys welcome to my channel and today we are going to look at the latest version of Livewire Livewire now is part of the laravel's official packages so if you see the latest version of live Livewire is available as a subdomain of laravel.com and right now it's on beta but I thought why don't we just start exploring it because whatever is here is kind of what eventually we will get so yeah I'm quite excited about it and you know we will explore it together and I hope you will enjoy the magic of Live Wire 3. so let's get started so if you go to the documentation there is a quick start and I'll just want to let you know that if you directly do a live wire require right which is composer required Livewire slash Livewire then you will get version 2 as of 23rd July because current stable version is 2 whereas if you see the installation guide here we are going to load the beta version so you just need to be a little aware of that now I will start with a fresh laravel installation so first let me quickly spin up a new instance by the way I'm I was trying native PHP as well so you know that's how things are um thinking of creating a different series on that as well but for now let's focus on Live Wire so I have the clean installation and as the guide suggests I will require the beta version like so and first let's follow the quick start guide and understand what we have now obviously as the documentation says you will need label version 10 or later PHP version 8.1 and I do meet all the requirements I installed the latest version of laravel which is definitely you know 10 so you know things are fine over here I have installed the beta plugin just to validate everything is fine I will do this and then make Live Wire counter okay which is their first command this will definitely create a component let us open up vs code and over here you'll see there are three files that got created it does list them over here as well one is a class file inside app Livewire and the name of the component which is counter.php okay because I said my component name is counter and a supporting view file inside resources views Livewire counter.blade.php all right so this is my counter.php where you know it's a class which extends component method uh sorry the component class okay it's an abstract class fair enough it has a render method and it Returns the blade file which was created if you see over here okay it got erased but let me show you we have resources views Livewire counter Dot blade.php okay so yeah things are fine this is the class file this is the blade file and yeah I think nothing else welcome.blade.php is something which we don't need to look at right now okay it is trying to tell us to make certain code changes but before we do that let's understand a little bit about the config file and I'm talking about the config because I feel it is important to understand what's going on behind the scenes you know before you know we start writing a bit of code because we get a lot of context when you know certain things happen so if I go to the installation you will see there is this command which will publish the config file why don't we do that okay and it copies the config file from the vendor into Livewire so why don't we open up config slash livewire.php so what are the different configs available inside the config file first of all it says that the class namespace is going to be this this is a nice way for the package to say that you know all the default components will reside inside this namespace but if we want we can change it obviously now we are not going to touch it right now but it is important to know because you know for the auto discovery of components this is important next thing is obviously the view file path we can configure it if you want something else other than the view slash Library sorry Live Wire which we saw over here right our counter dot blade.php went inside views slash Livewire so if you want to change it you can do that then the next thing is layouts file now live wire when you are running a page component which we will see in some time right these page components will need a layout file for it to render properly and that's where this configuration comes into picture Livewire also gives you the ability to upload files and for that this is the temporary file configurations I'm not going to touch anything right now they work very well out of the box now this is one configuration where it says that render on redirect what happens is if we have a redirect code right sometimes what you want to do is first re-render the component and then redirect okay so if you see this value determines if Live Wire will run a component's render method after a redirect has been triggered using something like redirect so setting this true will render The View once more before redirecting so if you want to show some kind of a feedback before you are taking the user to the next page this kind of stuff is required by default it is turned to false if you feel free to change it live wire 2 also gives us the ability to bind the models using the wire model thing a lot of things used to happen magically by default it says that the model binding will be false but if we want we can use it your decision if you want to do it feel free to make it true and use it comes the inject assets Auto inject assets is something which comes in Live Wire 3 previously you had to add these two directives inside your layout file for the Styles and scripts to be injected in the layout file by Livewire in the latest version this is done automatically okay but there are certain scenarios where you would want to control the way assets are loaded and at that point you can turn it to false and then add these two directives manually okay we will see that later on in this series also if you know you are using a lot of you know page components and you have a spa mode to your Livewire application then you know you can show this progress bar which is set to true and then this is one more configuration quite important for live web which is you know Live Wire tends to re-render you know certain pieces of the HTML right certain parts of your markup and for that it injects certain kinds of markups uh sorry markers right like if you see it says to make this process more reliable so Live Wire intelligently morphs existing HTML into the newly rendered HTML after each update to make this process more reliable Livewire injects markers into the rendered blade surrounding if class for each so basically these are identifiers as as the word suggests markers for Live Wire to know which part of the markup needs to be re-rendered and this thing is set to True okay so yeah this is what the configuration is now that we understand things a little more better let's try and follow the quick start and create our first Live Wire component to add functionality to our Live Wire component that we had created which is the counter component what we will do is let's go inside counter.php and we will add a little bit of code based on what the documentation says so a public property inside this class which is let's say count equals zero We'll add two methods like so and then inside the increment the code is pretty straightforward we take the count and we increment it by one and inside decrement we see if the count is greater than zero and only then we decremented okay so there are two public methods and one public property the reason for this being public is any public property or method inside the class is available for the component to render which means I can do something like dollar count and it should render because this is a public property similarly if I have a button called add I can do something like wire click which is a live wire you know attribute an icon mention the method name over here for Livewire to understand that on click of that button I want to execute this all right so we have a component which has some functionality in it but we want to show it on some page right so why don't we do one thing first of all let me serve the application on localhost 8000 I'll do this and inside the welcome page in here why don't we render it so Live Wire counter like this so whenever you are trying to render a live wire component this is the syntax I hit refresh and I see the counter as 0 and subtract two buttons are available if I click on ADD it is incrementing the counter count okay by the way the counter spelling is wrong and the subtract will obviously reduce it till it is zero and then it doesn't do anything right so this is working we have our basic functionality in place but right now we rendered the component inside a blade file so it's not a full page component if you want to make a full page component there are certain things that we need to do I will show you the documentation around it and then we will do it so basically we create a new route slash counter we say that the counter class will be used when that route is requested for and we need to create a template and this is important concept we need to understand why we need a template but before that why don't we go ahead inside web.php let's come over here add a route called counter and counter plus if I haven't mentioned the layout file you can see it says it is not able to find the layout file so that is obviously something which we need to create so let me open up a new version instance of the terminal and do um what was the command Live Wire layout right live wire layout that's it right okay so it will create a layout file inside app.blade.php let's open it up and see what is happening so components layouts app.blade.php we can see there is a slot in here and actually if I now refresh the page will render but it is important to know that there is a reason why this app.blade.php was created inside layouts if you remember the config file had a setting where is it data here so for example if I don't want the component to be component slash layout slash app but I want it to be admin for some reason right let me delete the previous one so that you are sure okay that the new one is being injected can you see a new file called admin.blade.php was created the component will still render and if I open up admin.blade.php can you see now we are getting that so this is the beauty of these configurations because you know I have the ability to control whatever is happening inside the application I will now switch it back to the default I will get rid of this file over here because I can easily create that go to the terminal and now we have our app.blade.php bucket get back again and admin is gone and obviously the counter will work as it should because although we are rendering inside a full page the component is still the same so yeah that's about it guys that's what we wanted to cover in this chapter this is the Quick Start we have just getting started and yeah we saw quite a few important Concepts what are layouts what are you know the reason for having those public variables public methods and stuff like that we are going to Deep dive into each essential part of the package but yeah this was the introduction hope you like it so if you like this video do click on the thumbs up icon and don't forget to subscribe to my channel

Channel: Amitav Roy

Views: 8,053

Keywords: Laravel Livewire, Laravel Livewire 3, Real-Time Apps, Real-Time Web Development, Interactive Web Applications, Laravel Tutorial, Livewire Tutorial, Laravel Livewire Installation, Laravel Livewire Primer, Laravel Livewire Basics, Real-Time UI, Laravel Development, Web Development Tutorial, Real-Time Interactions, Dynamic Web Apps, Laravel Livewire Components, Laravel Livewire Directives, Laravel Livewire Lifecycle, Interactive User Interfaces, Web Development Tips

Id: m10TZpWKAVI

Length: 16min 3sec (963 seconds)

Published: Tue Aug 01 2023