Laravel 8 - Components - Complete Explanation

hey what's up guys welcome to lara tips so in this video we'll be talking about laravel components so in my previous video i talked about the laravel blade if you haven't watched that then you can go ahead and watch my previous tutorial so before starting the tutorial i would like to show you something so i created a bunch of video tutorials but among them one of my video tutorial was published in the laravel news official linkedin page which was laravel at routing so i just wanted to share you some of the happy moments so it's uh i'm really very happy that one of my contents is published here so thank you laravel news for that also so without any delay let's begin so if you are familiar with the vue.js then it's very much similar to that the syntax are very much similar some of the syntax since it is a psp so it has some psp sugars as well okay now how to create a blade component so there is a php artisan command for that to create a component we need to type php artisan make make component so we'll be making one alert component sorry about component and when i press enter it it will create two files one component php file and another view so let's go ahead and look into our project structure then we can see here inside app view and components alert class and inside the resource views components dot allot.black.php so it has created these two files so let me open this file and this file so let me open this in the separate splitted window so there is one this file on the left side php file and the view blade file on the right hand side so if we look at this alert php file then it is extending this component class which is inside the illuminate view component which is provided us by the laravel and it has a render method so it is returning a view which is components dot alert which one which is this as you can see here resources views components and all our so it is components dot alert components is a folder and alert is a file it is returning this okay okay now it is an empty div for now let's say alert for now okay now how to show this in our view so currently in our web.php file these are the routes that i have defined in my previous tutorial so let us go to the home controller and let us go to the let me remove this and let me go to the home dot plate so later here if i go on the home page then it is showing me this home text now to use this component we have to do is x dash alert like this we have to define it should start with x dash and the name of the file so alert so since we have named our component name as alert so it will be alert so if it is let's say uh alert message then it should be like this alert dash it should be all our dash message okay so for now we will be looking at alert and if you go ahead and refresh the page then you can see here the alert is printed which is from here now let us write some code i have defined some classes here for styling i have used tailwind css let's say the cloud meshes and let's say close button and let us give some background let's say green give the white text and if you go ahead and refresh here as you can see here this is coming from here okay now all of these are static contents now how to make this dynamic so to make it dynamic what we can do is we can pass some parameters from this component which is inside the welcome.blade.php so what we can do is let's say pass let us pass this message from here okay for that what we need to use just like the normal html attributes we can pass it like this message equals to the download message from here and to accept it inside here what we have to do is just equate messes now let's see what happens uh it will give us an error here okay when i refresh the page as you can see here it is giving us the error which is saying the variable message is not defined so we have passed the message from here and we are displaying it inside the allot.blade.php but this alert doesn't know anything about that message variable okay it is defined here but it doesn't know anything about that so it is giving us the error so to resolve this error what we have to do is we have to accept this message in the constructor of this alert dot php file okay so let's say message and this is okay and let us define it here message here now what happens is uh whenever we pass any attribute from here then it will look into this constructor method okay and if this name matches so if this name message and this name message matches then it will assign this variable to this message property here okay so now when we refresh the page it is saying that unresolvable dependency resolving error sometimes the label shows this error so to fix this error what we can do is we can clear the views hp partition clear the view is cleared what it does is it removes all the compiled views all the views that are complied compiled by the laravel okay if the if you don't know about those compile piece then you can watch my just previous lesson about the view then you will know everything about this compile views and i when i refresh the page and you can see here the alert message this message is coming from here so let me rewrite another message and when i refresh the page you can see here this message is coming from here okay okay this is the message and what if you want to let's say so some error alert message then we have to pass the another parameter from here let's say by default it will let us so the success a lot and if we pass any other type like say let's say error then it will show this uh background as a red okay so for that what we need to do is we need to pass from here let's say type is equals to error and for that we need to accept it over here let's send dollar that's a type and let us define it here also type now this type error will get received here okay now we need to sew this busy green 600 and text white it's showing this this is showing the background color as a green and this text is showing this this text as white so now let us define a method over here which will calculate which class we need to equate here okay so let's say action type class so we will say if this type is equal to error then we'll return something but by default we'll be returning these classes okay so if there is an error then we will send red so background color will be red and if if nothing is passed then background color will be green so let us remove this for now okay and if we go ahead and refresh the page the color will be gone now how to add this method over here so what we can do is equate here like this so we can do type class it will be available here as a variable but we need to give it opening and closing bracket because this method this whole method will be available here as this type class and to execute it we need to run the method so we need this opening and closing brackets okay so if we do this then what we will get is we have passed error from your type as error from here and we are accepting the type here and if the type is error then we are returning this text equal take text is white and background is read now this will be printed over here okay when i refresh the page as you can see this is being printed and when when i inspect it then you can see here the bg read 600 and text white is here now if i do not pass this text error okay i haven't passed anything but i am accepting it here then it should give us error like okay it is giving us error because we are expecting a parameter type but we are not passing it from here so to make it optional we have to do is like this we have to make it optional parameter this is a basic psp functionality and when i refresh the page now you can see it is a green color you can see here busy green 600 and text is white which is coming from here okay so this is how you execute a method this php class method inside this blade view alert component okay and this is how we equal this type this properties inside here okay okay after that suppose let's say you don't want to pass message from here you want to pass message as a dynamic content which means maybe it might be a variable or it might be a data that is coming from the session then what we can do is similar to that of the view we can do it colon in front of this and anything that is inside here is a php expression so for it to be a string we need to wrap it inside inverted commas when i refresh the page then it should be same okay now what we can do is we can pass any variable from here so let's say in this welcome.blade.psp what we are doing is this active nav is coming from the session okay so what we can do is session active lab okay so this is a php method now it should give us this home here okay there is the page and you can see here it is a home so we can so to pass any php variable or any php expressions you need to make this attribute we need to add semicolon in front of the attribute and then we can pass any php expressions over here okay now let's talk about slots so what if you don't want to pass message like this but if you want to let's say pass a message here like let's say here okay the alert message from slot now if we do it like this and if you refresh the page now it will be showing us the error because we are uh inside this old component we are expecting this message so let us remove this okay for now so we don't need this because we are not passing it as a property props okay now we don't need this so we will also be removing this message from here so to accept to pass these contents any content inside the component like this what we have to do is we have to add this slot variable this is provided by the laravel to us inside the component it is automatically available so anything we write in between these components will be replaced here okay the allot message from slot should be now available here now if i refresh the page and you can see the alert message from slot is available here and you can see here so now we can pass any uh let's say p tag will let's say any html from here so before we couldn't pass so it would be very cumbersome we could pass but it would be very cumbersome to write the html inside that attribute now we can pass any html attributes into this component now if i refresh the page and now you can see here it is now the p tag is inside the tip inside here okay so this is how you pass the slot to the collarable component okay now let's see how to pass additional attributes to the component so we have here class now let's say you want to pass any other attribute let's say style yeah let's say data dash id is equal to let's say 23 you want pass this to the component okay now let's see what it does when we pass this data id is equal to 23 so when i refresh the page and look at this no there it is not appearing here so to make this appear here inside here so here what we have to do is there is a variable that laravel provides provides us inside this component is attributes so we are simply equaling the attribute over here and now this is saved and now when i refresh the page now you can see here data id is equal to 23 now whatever we pass here except the properties that we have defined in this all that component here constructor whatever we pass that will be appended to this section okay okay now let's see we have a class already class attribute is already present here now what will happen if we pass class from here let's give us height equals to 32 okay height equals to 32 then if i refresh the page now let's see what happens oh my god all the designs are gone so you can see here inside the console here there is only s32 class all the other class are removed so whatever we pass from here will replace things here okay so what uh since we are adding these attributes in the beginning of the div so whatever we pass from here will take the priority okay now let me remove it and let me add it to the right hand side okay okay now let's see what happens now you can see we are getting the green color okay but not the 32 class is not here so whatever on the left hand side of this component will get higher priority then which is on the right hand side okay so all this data will be inserted inserted here like this but this one will get the priority okay so now we need both the classes now how can we accomplish that so for that laravel has a very useful method so let us add this in the beginning there is a method called merge merge now what we can do is plug pass the class as a key and all these classes as a value okay okay now we can add this concatenate this in the class let us remove this and after that what we can do is concatenate it like this okay doing a space now what happens is this will be the default classes that will always be available for this component and whatever we add from here will be appended after these classes okay so now if i refresh the page this s32 should be available here when i refresh the page now you can see here this the height has been increased and you can see here s 32 over here so if we want both the classes the inside the component as well as that we are passing it from outside as a property we need both of them then we need to do more like this okay so also we if we want any other default attributes then we can say let's say data name hell then this will also be available here you can see here data name is hello so this will also be available so for now let me remove this okay so you can see your data id is 23 and this is also available here now what if i do let's say data id equals to 22 and refresh the page you can see here we can get we are getting 23 which is being passed from here now again just repeating to make you clear if i remove this and add it in the beginning then this one will get precedence okay over this one so we will get whatever we pass from here uh it will be ignored and 22 will be the value you can see here the id is 22 so we we must keep this in mind always keep the attributes variable in the front of this d okay so this is how we merge the attributes that are being passed from the component and which is inside the component so there are other ways of returning so for now we are returning a view from this render method so we can also return some inline data okay inline html but that is uh i would not recommend you to use this way because separating the logic and view in a separate file is a pretty good idea and they will be separate and it will very easy for us to maintain if the app grows so if we see here let us go to the top and components in line component views and you can see we can return the values like this if we had uh three less than and the blade inside the single input inside the inverted comma and we have to end it with a blade semicolon and whatever we write inside here this part and this part will be same so we can just copy this part and paste it here if we do it like here then it will work the same way okay but i don't recommend you doing this so this is how you make a component in a laravel so now what if you you want to organize a component into a different folder structure so let's look into that so if we go ahead and look here by default laravel will generate the component inside the components folder here also inside the components folder now we want this alert to go inside the ui folders okay inside the components ui now when i refresh the page it will show us an error that components a lot is not found but we have this inside the ui folder okay so in order for that to work we will have to go inside this alert component and components dot ui dot alert now if we pass it like this now it will be okay now when you refresh the page now you can see here it is working correctly also let's look by changing this okay so if i also keep it inside the ui slash a lot and again if we refresh the page it will break our code now to make this uh to use this alert inside our inside our page what we have to do is now look at it it is x dash alert as i said that it is the name of the file okay but laravel will look by default inside the components folder but it is it is not there inside the components folder it is inside the ui folder so what we have to do is i'll select this both and what we have to do is x dash ui okay this is component so it will be x dash ui dot alert okay the all the folders will be separated using the dot sign and the file will be at the end so if you have let's say ui slash allot slash allot then it will be it would be x dash ui dot ui dot alert okay now let me refresh the page so what is it it is saying so cannot really declare the class app view components because the name is already in use it is showing this error because if we look at here inside the alert we change the namespace okay we change the folder where it lives now and here we haven't changed the name space so let's say ui here and let us refresh the page and it will not show an error here okay okay so we have done all this manually but all these folder structures can also be generated by the php artisan command okay now let us create another usb partition make component let us say ui slash upop okay now when i hit enter it will create again two files the pop-up php file and the pop-up blood file which will be inside the ui directory so you can see here it is inside the pop-up wiz inside the ui directory as well as this pop-up blade file is also in it and if we look it here pop-up the name space will automatically added by the ph blurable artisan command okay so this is how we create this components nested inside the directory okay so we can use this similarly like allot component so it will be x dash ui dot pop-up now let us go to the welcome.blade.php so let's say you have a lot of components and those are all listed within inside a lot of folders then you don't want to let's say ui dot api dot hello dot word you don't want this to be your component to look like this here okay it you just want to call it like this x that's alert and nothing and it will just reference these components okay in order to do that so let's refresh the page so currently it is unable to locate the class and view so for this to work we need to do some extra work so for that let's look into the laravel documentation and we can see at the top here we have to write some code in the app service provider in the boot method of the app service provider so you can see here like this okay so if i go to the app service provider which is inside the app providers app service provider here let me remove this now inside the boot booth method what we can do is um blade and this is imported here as you can see here element support facade blade component now whatever we want to give the name of the component we have to give here let's say ali rt so this we can reference this value here okay so and we have to give the class that we want to refresh when we are calling this allot component so this is class so this class is imported here as you can see here so now if i refresh the page it should work so now we can see here we can easily reference our component at just x that's a lot we don't need to pass dot ui dot any other expression okay so this is the way to simplify the component name now let's say you want some components but you don't want to create these files okay like the psp files so you only need the component let's say you have a card component and you only want to source pass some contents but for that you don't need to make a class okay so for that what we can do is we can directly create a file inside the components folder now if we say card dot php this now whatever file blade file we create inside the components directory will be available as a component if we go to the welcome.blade.php and if we say here let's say x test card okay now we can reference it as a as card like this since it is present inside the components okay so if we go here and create a d file and the card component and if you go ahead and refresh the page here now we can see here the card component is available here this component is can be written like this okay so what we can do is just what we have done in that previous previously slot if we write slot here and if we pass the card component from slot then we can see the same thing over here so what we can do is now let's say give some class and if we refresh the page here so you can see here the card is over here let us give it some more v8 and what we can do is let's say two and three and we don't need to worry about the styling let's let's say mbds4 okay margin bottom four and if we see here without all the design all of them will have the same design we know we don't we do not need to copy the classes in all of this components it will all be applied so it it it also works in the similar way so let's say we want this card to be inside the card folder card folder okay like this so currently so okay the com it's inside the components card and card.blade.php so in order to get this also we need to do similarly as i go x dash ui dot card sorry not card dot card x dash card is a this folder name and card is the name of the blade file at the end and if i refresh the page it will work similarly so in this way you you have you can create a component without creating component php file so this is how you make components in laravel so thank you for watching have a great day bye

Channel: Laratips

Views: 17,343

Keywords: laravel for beginner, laravel beginner tutorial, laravel tutorial for beginners, laravel 8 tutorial, laravel 8, laravel components, components, laravel 8 components, laratips, laravel component, blade, laravel blade, laravel blade component, blade component, laravel tutorila, laravel tutorials, laravel components tutorial

Id: VJ1yeoJqpr0

Length: 32min 23sec (1943 seconds)

Published: Wed Sep 30 2020