So you just saw view based components in livewire four. Really easy way to get a component up and running and then you can render them inside of any blade view. Well, what about routing directly to those components as full pages? You could already do this in V three, but we kind of rethought the story and I think the structure is really pleasant. So let's take a look. Here's that app that we had before with the root endpoint and then a welcome view.

So let's take a look. Here's that app that we had before with the root endpoint and then a welcome view. And we're just rendering that counter component. And in the sidebar we have resources, views, components, and that's where all the kind of generic components for your app lives. But what about a page and what about a layout? Well, we we've, we've rethought that a little bit. So watch this. PHP Artisan make, nope, live wire layout.

So watch this. PHP Artisan make, nope, live wire layout. Okay? And now it said layout created resources, views, layouts, app do PHP. So it just created a new folder in the root level of the views directory called layouts. And this just feels really good to me. So you can put your app layout in here, you could put dashboard, admin base, whatever you have, you put them all in layouts

you could put dashboard, admin base, whatever you have, you put them all in layouts and it just lives in this really kind of home space. And pages are the same way. So watch this. If I say PHP Artisan make live Wire and we're gonna create a component of post create component. We'll make an actual form, but if you wanna put it inside of the pages directory, you prefix it with pages, colon, colon. So this is a namespace just like namespace in Blade

with pages, colon, colon. So this is a namespace just like namespace in Blade that you're probably familiar with. They now exist in live wire in pretty much the same exact way. It's the same syntax. So if I create this component now it just put it in our pages, namespace in the post directory, and there is our create component. So this to me is a great default.

and there is our create component. So this to me is a great default. App structure for most applications is components where all your generic components live layouts where all your layouts go, and then pages where all your pages go. So let's actually get this rendered on a page. So for the layout, I'm gonna replace this with a little bit of a BVR layout just to show you like a blank sidebar. And then the page right here will do, I don't know,

of a BVR layout just to show you like a blank sidebar. And then the page right here will do, I don't know, I mean we'll replace the whole thing here. So let's, I have a snippet, and this is just a like a create post form. So public title content, a save method, and then a form element with some inputs in it. Okay, so now we have those two kind of filled out. I can say route. And now this is new because in V three you're used to doing route,

I can say route. And now this is new because in V three you're used to doing route, get the thing you want, like post create. And then here you would actually reference the class of the live wire component. And you can still do all this. It's totally still supported, but if you think about it, these view based components, they don't have classes, they're just views. So I thought, well how do you do that in, in Laravel?

they don't have classes, they're just views. So I thought, well how do you do that in, in Laravel? Well, in Laravel you can route directly to a view with route colon, colon view, and then you just type the view name like welcome and it'll just work. So I thought we'll go off that precedent and we'll make that for Livewire. So route Livewire, you put the actual endpoint that you want, the path, and then in here you just say the

So route Livewire, you put the actual endpoint that you want, the path, and then in here you just say the name of any live wire component in your app. And in our case it's gonna be pages, colon, colon. 'cause that's the namespace post. Do Create. Okay? And this is gonna automatically use layouts app by default. And now if we load the page, it doesn't work because we didn't route to it. So let's go to the URL bar type post create. And there we go. We have our post create component

So let's go to the URL bar type post create. And there we go. We have our post create component and it's rendered inside this blank skeleton little app layout for now. And you can do all the things that you're used to. If we go into this and you wanted to change what the layout is, this is all V three stuff. But you would type, layout, import that attribute, and type something else like layouts, colon, colon, fu. And it's gonna say, Hey, VFU is not found.

and type something else like layouts, colon, colon, fu. And it's gonna say, Hey, VFU is not found. But if we make this app, we can also pass perms like title set to create post and now refresh. And you'll see that in the title bar it says Create post. So I think that this is a really pleasant life where everything is namespace at a root level. And the final little thing here is if I open up the config, you can see exactly where these things are registered. So the first two items in the config,

you can see exactly where these things are registered. So the first two items in the config, the first one is component locations, which shows you the root level live wire components where Livewire is gonna look for those. And that's in V components and views. Livewire, you can configure this for your own needs. It's really flexible and customizable. We rewrote all of the guts of live wires component lookup stuff,

We rewrote all of the guts of live wires component lookup stuff, and we added a lot of affordances for people to customize it to their heart's desire. And the second one is component namespaces. And we register the layouts in the pages namespace by default, you can put whatever you want in here. Like already people have been using livewire for and they're going, this namespace feature is incredibly powerful.

and they're going, this namespace feature is incredibly powerful. I have a modular app and I have all of these different domains and I wanna make something like blog and put all of the components related to a blog inside the blog namespace. So now they can just say, Livewire, blog something, do something, and it's gonna render that on their page. Um, so yeah, namespace is a really nice feature

do something, and it's gonna render that on their page. Um, so yeah, namespace is a really nice feature that kind of snuck up on me. I, I built it for this, but then I realized, oh, this is really powerful and a lot of people are going to love namespace. And when we register a a component namespace for Livewire, you're also internally registering it for Blade. So you can put blade components in those namespace and access them as normal namespace blade components.

So you can put blade components in those namespace and access them as normal namespace blade components. All right, so that's page components in Livewire. Uh, I think it's a really nice structure. Everything from before is still backwards compatible, so you don't have to worry. Um, there you go.