Alright, let's get to it. What the heck are these Blade components, and how do we track them down? Well, first, a little tip. If you are a php Storm user, have a look—unfortunately, it's not free, but I think it's worth it—have a look at the Laravel IDEA plugin. You should be able to get a 30-day free trial, and if so, it includes a bunch of things, but among those, support for Blade components and sections, which allows me to do things like this, where I can command-click on a component, and it takes me immediately to the component definition. Kinda cool.

the component definition. Kinda cool. Anyways, otherwise—you probably don't have that—otherwise, again, like a service provider, you can often guess what the component name is. In this case, GuestLayout. Let's try it. GuestLayout. There it is. How about another one? AuthCard.

How about another one? AuthCard. Let's look for it. AuthCard. There it is. In this case, this is what we would call an anonymous component. Let's do a couple more. AuthValidationErrors. AuthValidation. Again, that's an anonymous component.

AuthValidation. Again, that's an anonymous component. What about things like this? These form-specific components, like XInput. Alright, maybe InputComponent? No, let's just look for Input. Or sometimes look for the directory name, Components, Input, and there it is. So again, the point being, you can often guess where these things are located. Otherwise, for any Laravel project, the default location for a Blade component will be your resources, views directory, and then you're going to look for Components folder.

Otherwise, for any Laravel project, the default location for a Blade component will be your resources/views directory, and then you're going to look for the Components folder. Again, you can put them anywhere you want, but as a general rule, they will go here. So notice, let's see, AuthValidationErrors. There it is. Let's go back. ApplicationLogo. Where is it? There it is. Okay?

There it is. Okay? So it's just a pattern. You'll quickly memorize. Oh, when I come across what looks like an HTML tag that begins with x-, that means it's a Blade component, which means I should go into the resources/views/components directory to track it down. So you can think of a Blade component almost like a PHP include on steroids. It allows you to wrap up a block of HTML, but still make it dynamic and configurable. For example, ApplicationLogo here.

It allows you to wrap up a block of HTML, but still make it dynamic and configurable. For example, ApplicationLogo here. Alright? Here's what that wraps. Which means, if I were to remove that, this and this are identical. Notice here, Attributes. This is basically saying, give me all of the attributes that you passed to this component name. So I could replace all of that here. And now this is what ApplicationLogo evaluates to.

So I could replace all of that here. And now this is what ApplicationLogo evaluates to. And when you load it in the browser, you're not going to see ApplicationLogo. You will ultimately see this SVG tag. But you may find, especially when you're dealing with SVG, that can be pretty messy to look at. It's nicer if we can wrap that up. And then further, if elsewhere in your project you need to use the ApplicationLogo, you don't have to repeat this. So let's bring it back to what we had before.

have to repeat this. So let's bring it back to what we had before. Get rid of this. And now we're starting to understand things. So next, let's do another one. XInput. Alright? There it is. You'll see it accepts a prop. Think of a prop as something the component needs in order to do its job.

You'll see it accepts a prop. Think of a prop as something the component needs in order to do its job. So in this case, the component can be disabled or not. And you'll see, if the component is disabled, we have to add that disabled attribute to the input tag. Otherwise, we don't add it. And then finally, we are going to accept any attributes you pass to it, but we're also going to use these defaults. So notice here, this is using Tailwind. And immediately we can see that if nothing else, these Blade components solve one issue

So notice here, this is using Tailwind. And immediately we can see that if nothing else, these Blade components solve one issue that folks often have with Tailwind. You don't want to repeat this over and over. And ideally, we don't want to extract it to a CSS component where you would then use apply. You can do it if you want, but generally it's not the most recommended approach. So instead, we can wrap all of this within a Laravel Blade component. And that solves the Tailwind repetition problem. So you get a lot of bang for your buck, which ultimately means every time I say x-input, when that evaluates in the browser, you're going to add these classes to the input.

This auth card is huge. And I'm sorry, I think that I is my fault. This auth card is huge. So it looks like we have a component that consists of other components. So let's figure out how that works. We're going to go to the authCard. And I can see the HTML here, but why don't we have a look in the browser to see what it is? Okay, so I'm thinking it's probably this whole thing. Let's have a look. So a wrapper of minHScreen.

Yeah, there it is. So notice background of white, a little shadow, and some rounded corners. That corresponds to this. Then we see this slot variable. This is sort of like a magic variable when dealing with Blade components. It's a way of saying, okay, everything inside this component should be slotted in right here. Think of it like that. So for example, if I were to remove this entirely, come on back, you're not going to see anything. And then just to show you, hello, you'll see that.

come on back, you're not going to see anything. And then just to show you, hello, you'll see that. When we change this to slot though, we're now saying, okay, everything inside AuthCard, all of that, slot that in right here. And that's how that works. Which means if I wanted to change this up, hello there. Whoops, undefined variable logo. Oh yeah, it's expecting that. Let's just get rid of that temporarily. Yeah, you can see how we could set up an AuthCard there,

Let's just get rid of that temporarily. Yeah, you can see how we could set up an AuthCard there, which means you could use this elsewhere in your projects. Very cool. Anyways, let's bring it back. And that seems pretty reasonable. Okay, the final step, guest layout. So again, if you're traditionally used to things like this, where you say extends a particular layout file, or some people call it a master page,

where you say extends a particular layout file, or some people call it a master page, and then you'd have a section for your content and things like this, that's still entirely valid. Or you can do it using Blade components. Let's figure out how that works. So right here, layouts/guest.blade.php. Okay, so this is what our layout file looks like. So notice it ships with three different layout files. One for your application, another for the guest specific layout.

And I'll show you that a little bit later. But for now, this is the layout file we are working with. And notice once again, we're slotting in some content there. So that means when we come to register, we're saying, all right, start with that layout file we just looked at. And then right where that slot was echoed, we're going to add everything you see here. All right, so now we understand Blade components, what they are, why they're useful. They can clean up and normalize many of your HTML components, so to speak.

what they are, why they're useful. They can clean up and normalize many of your HTML components, so to speak. We've learned where they're located. And we've also learned how to edit them. So if I decide an AuthCard is now going to, for some horrible reason, have a background color of red, well, we change it in one place. And now everywhere I use an AuthCard will now have an ugly red background. All right, we're making good progress. In the next episode, we're going to move away from Blade components.

All right, we're making good progress. In the next episode, we're going to move away from Blade components and figure out what happens when I try to register a new account. And how is that configured?