Check out some of the updates to Blade components in Laravel 7. So here my home route returns a welcome view. The welcome view extends a layout file and declares a section. And here's our layout file. Really simple stuff. Now, if I view this in the browser, that's what you'd expect. Alright, so you'll notice we are building from the bottom up. However, for a while now in Laravel, you can reverse that direction by using Blade components. Here's a quick recap. If this is our default content or slot, let's just echo it out there.

Here's a quick recap. If this is our default content or slot, let's just echo it out there. Now in my welcome view, we're going to reverse it. Declare a new component, the file name is layout, and here is our default content that will be slotted in wherever we echo it out. So now check it out. Back in Firefox, refresh, you get the same thing. And this is all a recap. Nothing new in Laravel 7 yet. So let's see what is new.

Nothing new in Laravel 7 yet. So let's see what is new. What if I now create a new directory called components, and I'm going to throw our new component there. As it turns out, Laravel is going to scan this directory, and this allows us to tweak it a little bit. But a quick warning, you don't have to change anything, so this component directive is not being deprecated. But if you'd like, you can now use a more view HTML-like structure. If I say x and then the name of the component within the components directory, in this case

But if you'd like, you can now use a more view HTML-like structure. If I say x and then the name of the component within the components directory, in this case layout, check it out, hello world again. Come back to Firefox, refresh, and nothing changes. But now we've switched to using this new syntax here, and it does come with some perks. So yet again, if you're familiar with view files and single file components, you're going to feel right at home here. Let's imagine our layout file accepts a subpage that will go in the header, and maybe it'll be called title. All right, at the moment, if I refresh, it's going to blow up.

be called title. All right, at the moment, if I refresh, it's going to blow up. It doesn't know what a title is. All right, let's pass it in. We can do it as a prop or an attribute. title equals welcome page. Now it'll be available, and it works again. Now what about custom slots? Let's say for a typical layout, maybe you have a two-column website. So let's do this.

Let's say for a typical layout, maybe you have a two-column website. So let's do this. We'll have a sidebar, and then your main content, and that's where our default slot will go. Next, if I want these side-by-side, I will set a display of flex. Let's maybe make this one like a width of one-fourth, and then the main section will flex to fill the remaining space. All right, let's remove that. So we have our sidebar, and if I come back to Firefox and refresh, this is what we get. Okay, but now let's say in some situations, and for some pages, you have a sidebar, but for other pages, you don't.

Okay, but now let's say in some situations, and for some pages, you have a sidebar, but for other pages, you don't. Let's do this. We'll say, we'll wrap this. If we have a sidebar defined, only on that condition should we display one. Okay, so now if I refresh, we don't see a sidebar because our welcome view didn't define one. All right, let's switch back. Now we have our default content that goes here, but now we need a new slot for the sidebar. We can declare one with x-slot, and then provide the name.

Now we have our default content that goes here, but now we need a new slot for the sidebar. We can declare one with x-slot, and then provide the name. We called it sidebar. All right, so this is a named slot, and anything outside of it represents the default slot. Come back to Firefox, refresh, and now you have your sidebar again. So you might find that you can wrap your mind around this a little bit better. This layout file represents a top-level component, and we simply spit out the data we expect. A title here, a conditional sidebar there, the default content there. Then each of your views constructs things from the top level down. We have our layout file.

Then each of your views constructs things from the top level down. We have our layout file. Maybe you have a notification, maybe you have a different component, and you work your way down. Okay, so what you've seen here is what we might call anonymous components. We threw a Blade partial within this directory, and it was instantly available to us using this syntax. However, when you need to, you can add an additional layer, almost like a view model that backs one of these components, and I'll show you how. If from the command line we run php artisan make:component, this is brand new in Laravel.

that backs one of these components, and I'll show you how. If from the command line we run php artisan make:component, this is brand new in Laravel 7, why don't we call this one Notification. Now when we run this, you'll see two things. First, Laravel generates a notification Blade partial, and then in your app directory, in a view folder, you'll find what is effectively a view model for that component. Any public properties or methods that we define here will instantly be available within the partial. So for example, if we say here's the description for the Notification, and then we define it up here.

So for example, if we say here's the description for the notification, and then we define it up here. Let's initialize it, and make it public so that it's accessible to the view, in the same way email works in Laravel. Alright, so we have this new component. We've declared a required property, effectively. And then we render it by loading the components.notification view, where we spit out the description. Now the only remaining step is to render it wherever we need to. So for example, we might start in our layout file at the very top. And it's the same workflow.

So for example, we might start in our layout file at the very top. And it's the same workflow. X and then the name of the component. Notification. Description is placeholder description. And we can self-close that. Alright, come back to Firefox, give it a refresh, and there's your new notification. So this is kind of cool if you think about it. Notice that the blade partial needs a description to do its job. And that description is provided by the notification component class.

Notice that the Blade partial needs a description to do its job. And that description is provided by the Notification component class. So it's almost like a controller for your Blade components, which is kind of neat. And in the process, it should clean up your top-level controllers. But do notice, if I come back and I remove the description, if we try to run it now, it's going to fail. We have a required parameter here, description, and you didn't pass that through. And that's what we want. Okay, so now we can style this new component. Maybe I can say it has a background color of red and text white, and then a little padding.

close. You'll find that you now have a location to store common logic that muddies up your view files. For example, often when dealing with forms, you'll have some kind of logic to see if a particular form option was selected. Well now, just create a new method called isSelected and perform your logic there. All right, let's move on. Now you'll see down here in the render method, we return a view. However, you could also just return a string. Now if I come back to Firefox and refresh, now we've changed the structure of our Blade.

However, you could also just return a string. Now if I come back to Firefox and refresh, now we've changed the structure of our Blade component. And in fact, for some situations, this is what you want. So for those cases, let's copy this. For those cases, Laravel makes it really easy. I can delete this, and if I do it all over again, and pass the inline flag, think of that as an inline component. And the only difference is you get the same thing, but notice right down here, rather than loading a view, which sometimes makes things a little more complicated, you're now

And the only difference is you get the same thing, but notice right down here, rather than loading a view, which sometimes makes things a little more complicated, you're now managing two different files when it just might not be necessary, if the component is simple enough. So in those situations, you can echo out a string. So let's bring back my description there before, and yeah, right down here, we could spit it out. And notice we're using now heredoc here. It's the same thing as heredoc. What a weird term.

It's the same thing as here docs. What a weird term. Same thing as here docs, but it's the single quote equivalent, so we can echo out the variable like this, and it won't be escaped. Anyways, now back to Firefox, refresh, and we have that description again. Kind of cool, isn't it? So now here, you could do the same thing. red, text white, and again, for simple components, this is fine. And actually, in the latest version of php, I can even do this to make it cleaner. Come back, refresh, and there you go.

And actually, in the latest version of php, I can even do this to make it cleaner. Come back, refresh, and there you go. We just need our padding back. Cool. So the benefit here is now you maintain a single file for the Blade component, and you don't have to worry about this directory at all. In fact, I could delete this, and it's still going to work. All right, so now you've learned about anonymous components, and that's basically creating any file within the components directory that is then available using the x-tag syntax. You've learned about inline components, which returns a string from the render method, and

any file within the components directory that is then available using the x-tag syntax. You've learned about inline components, which returns a string from the render method, and then you've learned about the new standard components that will load a companion view, where this then serves as a controller of sorts for that view. Now I'm going to let you go in just a second, but one final thing. Sometimes when you declare these tags, you want HTML attributes associated with the parent element within it. So for example, what if in this case I want to set a special class here other than the default? Here's how you might do it.

default? Here's how you might do it. In fact, let's just remove everything for the time being. We're going to add this special attributes variable. This represents any standard HTML attributes that you have not defined. So if I give it a refresh, nothing is added there, as you see there. Let's change that though. Let's say class, and once again, background-color of red, text of white. Now if I come back and refresh, it is inserted there, and we get what we had before. So maybe what we could do is store some default attributes, and we can do that through the

Now if I come back and refresh, it is inserted there, and we get what we had before. So maybe what we could do is store some default attributes, and we can do that through the merge method, so the default class attribute will be text-white, and also a little bit of padding. All right. Come back. One more time. Let's just remove this entirely. Refresh. Oh, yeah.

There we go. Or green. Or of course, you can control this on the component level. For example, type equals success, and now we can use that to render the class. It's entirely up to you. The important thing is we can accept those attributes and render them wherever we need to using this special attributes variable. So now to finish up, if you just want to see how this might work, let's accept a type. We want to make sure that's public. And now, if we scroll down, we could do something like this.

All right. Let's give it a shot. If I switch back, we're starting with a success notification type. And there we go. Let's change it to error, or basically anything that is not success. And now it'll be red. So that's how you might control that. All right. So that was a quick review of some of the updates to Blade components in Laravel 7.

So that was a quick review of some of the updates to Blade components in Laravel 7.