How to Install Livewire in Laravel Project

hello everyone in this tutorial I am going to show you how you can install Live Wire in your laravel project so first of all let's go and create a fresh variable project so here I'll create a larva project over here so let's go and open the command prompt here let me just zoom in and here I am going to send laravel new and let's our project name will be laravel underscore Live Wire then press enter so it will create a laravel project for us so right now I'll just fast forward the video so here you can see our project creation is complete so let's go to Project directory we'll say here CD laravel underscore Live Wire then press enter so let's run our project PSP artisan serve and there you can see it is running let me just copy this let's go to our browser and paste it here so this is our specificated project so right now we are going to install live bar in our label project so in order to install Library we need to run a command so first of all let's go to Live Wire dot laravel.com then press enter so you need to conclude this link and I'll also give this link in the description and after coming here you need to click on the start here button just click Start here and it will take you to this page so here you can see I think we are in the quick start page so we click here installation just click installation and there you can see command here composer requires slash Library so we are going to copy this command Ctrl C and right now we'll go to our project directory so our project was this on laravel live world let's go inside and let's just open another command from here and let me zoom in and we'll paste the command here composer require slash library then press enter so this command will install live bar in all arable project this will take just like 30 second so this command is also done so right now we'll go back to our website and here after this command we have this command PS4 edition Library publish config so I'll just copy this Ctrl C and paste it in the command prompt press enter and this is also done so let me just open the project using sub live text so I'll just open folder if and our project costs or let me just search it here Lara will underscore liver this one let's just open it so here since we run the command this command publish config so if we right now go to our config folder here there should be library.php so after this we are actually ready to write our library code in our laravel project so let me just show you so right now what we'll do is that uh let me just go to the quick start option here you can see quick start and here if you go down here you can say command paste to addition make Library counter so let me just copy this then we'll again go back to Common prompt counter so right now if we press enter there you can see congratulations you have created your first Library component so it has created component in all arrival project so right now if we just go to our project then if we now put our resources and Views here you can see we have a new folder called library and inside that Library folder we have counter.blade.php which we just write over here you can see Library counter and again if you go to app then inside app here you can see library and inside Library we have counter dot PHP so right now here you can see in the views uh Library folder here you can see just counter blade.php so nothing in the world is as soft and ending as order so this is commented out so I'll just remove the second bracket from here let's save this and let's just go to this count.blade.php for now using Library so for it after this command here we'll go down and here you can see uh this code is for the app Library counter.php so we'll go down we'll copy this later we'll go down and here you can see uh this is for the view views Library counter.date.php so again we'll go in a little bit down and here you can see registered out for the component so we are going to write this in our routes web.php so first of all we need to restart the component so we will copy this use M backslash cyber backslash counter copy then go to our code route then web.php and we'll paste it over here and after that we'll copy this route gate counter counter class let's go back and here we'll mention the class here this will be the URL slash counter and we are measuring the counter class which is basically this on count.php so right now if we just go to our browser and here if we give slash counter it will give us an error let me just show you counter and here you go see the inner Library paste component layout view not found because here you can see in the quick start if you just go a little bit down here you can see create a template layout so ah before you can visit slash counter in the browser you need an HTML layout for the component to render inside so we need to copy this command PSP Edition Library layout so we'll copy it then paste the command here press enter and there you can see layout is created so where can we find the layout in the previous component layout.php so let me just show it to you uh if you go to views here you can see you have a component folder inside component we apply autoplay.php so we do not have to do anything here so right now if we just refresh our press space here here you can see nothing in the alt is as soft as yielding as order so here you can see our view so let me just explain a little bit so here when we are giving the slash counter it will calling the counter class so this will call this one app live bar counter dot PHP and this count.phc will render as a view which is Library dot counter and that is here in the views here you can see liver dot counter.play.ps this one so this is how we are getting the view so right now let me just copy this code from here app Library counter so we are going to copy this code from here onto C and we're going to write or we are going to paste this code in the app Library counter.php so let's go back so here apply bar counter.php so let's just remove everything and paste the code save it again let's go to our browser let's go down and here you can see this is the code for the blade file counter.blade.php so let me just copy this Ctrl C then paste it uh here views basically what we are doing is that whenever someone called the counter route then it will come over here in this component and here by default the count value is on and if someone click on the increment function then it will increase the account value by on and if someone click on the document then it will decrement the count value by on and there won't be any loading and then it will enter the view so let me just save this here and here then let's go back to browser and if we refresh here you can see we have a counter if I click plus it will increase the value if I click minus it will decrease the value without replacing the page so this is how you can install library in your laravel project and write your code there is a way to write live or code you can you can check out the documentation full documentation or if you want to like watch a conflict video on library then you are probably seeing a video on the skin where I discuss everything about liver you can check out that video you will get full knowledge on Libor I tried my best to create the tutorial for laravel Library watching make sure to subscribe I really appreciate that and I hope to see you in the future tutorials

Channel: Web Tech Knowledge

Views: 1,301

Keywords: laravel livewire, laravel livewire tutorial, laravel, laravel livewire project, laravel project, laravel livewire crud, laravel tutorial, livewire, laravel livewire install, laravel livewire tutorial in hindi, laravel livewire 3, laravel livewire basics, laravel livewire for beginners, install laravel livewire, how to install livewire in laravel, laravel livewire installation, livewire tutorial, laravel and livewire project, livewire 3 laravel

Id: vkRHnW4mrR4

Length: 9min 21sec (561 seconds)

Published: Fri Oct 06 2023