One of the biggest changes in Livewire four is view based components by default. So in Live wire three, you're used to class-based components where every component has a class in your app directory and a view or a blade view in your views directory. Well, in live Wire four we're using view based components very similar to Laravel Volt, if you're familiar with that. Livewire four just kind of ships with that functionality out of the box. So let's take a look. Here is a Vanilla Laravel application

that functionality out of the box. So let's take a look. Here is a Vanilla Laravel application with Livewire already installed. I've done nothing to it. This is just the normal Laravel welcome page. Let's go into that welcome view, wipe it out, and add a new live wire component called Counter. Okay, now we're gonna look at the experience from scratch of creating a live wire component in V four. So PHP Artisan make Live Wire Counter.

of creating a live wire component in V four. So PHP Artisan make Live Wire Counter. Okay, we click that and we get a new file, but it's just a single file now and it's in our views directory. So everything lives in this one. File your class at the top, all of your properties and methods, and then your template down below. And if we refresh the page, we see that it, it worked. We don't see anything.

And if we refresh the page, we see that it, it worked. We don't see anything. Uh, but let's fill this in with something a little bit more, I don't know, complicated. It's not even that complicated counter. You've seen this a million times public count and then an increment, and then we show that count on the page. This is just always my go-to example for just Live Warrior is working.

This is just always my go-to example for just Live Warrior is working. It's not something you'd really create in your own app, but it's a good hello world kind of thing. So we hit increment and it, it works great. Uh, one extra little thing I want to show you is, uh, script tags in V four. So if you want to add some JavaScripts to your live wire component for whatever reason, you can do that in V three with at script.

to your live wire component for whatever reason, you can do that in V three with at script. It's a blade directive and that still works. It's still backwards compatible. However you can alternatively, and I highly recommend doing this, just use a bear script tag at the bottom and it's treated a little differently. It's actually a little more powerful. So if I use a script tag at the bottom here

It's actually a little more powerful. So if I use a script tag at the bottom here and I type alert Hello world, and now if we refresh this page, it should load that JavaScript and execute it and we should get an alert dialogue at the top, which we do. Perfect. Well, the really cool thing about this, the thing that I like a lot is if we open up the dev tools and look at our JavaScript assets and refresh the page, you'll notice

and look at our JavaScript assets and refresh the page, you'll notice that a new dedicated file exists. Now a JavaScript file for our counter component. So if you have JavaScript in a component, now a single file component or a multi file component, we'll get to that in a second. When you load the page, your browser is fetching that JavaScript as an actual file. And this means that the browser will cache it.

that JavaScript as an actual file. And this means that the browser will cache it. So you can have piles of JavaScript in a component and then we're not gonna send it over the wire every time a user loads or uses that component. It's only sent once because the browser caches assets like JavaScript. And if we look at the source, you'll see that everything we typed in there just exists inside this run function.

that everything we typed in there just exists inside this run function. So you can type any browser supported JavaScript including import statements and things like that and they just work. So I really, really like this feature. We're gonna dig into JavaScript way more later on in the series, but I just wanted to show you this at a glance. Alright, so let's look at where this component gets put in our project. So you'll see that it's resources, views, components,

where this component gets put in our project. So you'll see that it's resources, views, components, and then there's our live wire component. This is just like blade components. So if you're used to using blade components like X button or something like that, those live in components. And when I was working on V four, I was thinking how like one of the troubles with people entering live wire I think is seeing a component and not knowing where to find it.

entering live wire I think is seeing a component and not knowing where to find it. But we already have an established precedent for blade components. So if I see x button in my blade file, I know even if I'm in a different project, I know that I should look in resources, views, components for the button component. So I thought, well, wouldn't that be really nice if Livewire was the same way so

So I thought, well, wouldn't that be really nice if Livewire was the same way so that there's one lookup path mentally. So you see a button livewire component, you know exactly where to look. It's in components with all your other blade components because I think of Livewire components as blade components on steroids. It's like a blade component as maybe a starting point, but then you can add functionality with livewire.

It's like a blade component as maybe a starting point, but then you can add functionality with livewire. But if these things are living right next to each other in the same directory, in the same folder and they all have dot blade PHP, it's gonna be a little confusing where you're like, well, which one's just a blade component? Which one's a live wire component? And you'd have to click into the component to actually see that.

And you'd have to click into the component to actually see that. Well, that's where this funky emoji thing comes in. Uh, you might see this at first glance and say, what in the world are you doing? And I tell you, um, I saw this in uh, another language called mojo or mojo and it kind of unlocks something in my brain. I was like, whoa, I didn't even know you could use an emoji in in a file name and you can.

I was like, whoa, I didn't even know you could use an emoji in in a file name and you can. And it's Unicode. So it's supported in Git, uh, windows, Mac, everything. And what this does is it allows us to just see at a glance which of our blade components are live wire components. And even better if you're searching for files, you know, in your project you can type a a lightning bolt emoji or I've rigged up a shortcut key to automatically inject it

in your project you can type a a lightning bolt emoji or I've rigged up a shortcut key to automatically inject it and now I can just search through my project's, live wear components, which just feels really, really good. If you hate the emoji, you can configure in our, we will show you the config file in live wire. You can configure it away and you'll never see it again. Um, but that's just something that I've really grown to love and I find that a lot of people are hesitant at first, but over time they fall in love with it as well.

and I find that a lot of people are hesitant at first, but over time they fall in love with it as well. Alright, so that's where single file components live. Now let's say that this component gets really big and bloated and you start to dislike this or maybe you don't like single file components in general. Maybe your IDE isn't good at knowing this is JavaScript and this is Blade and this is PHP. So your auto complete's all messed up or maybe your file's just huge

So your auto complete's all messed up or maybe your file's just huge and you really hate scrolling everywhere. And then you're starting to long for the olden days, a V three where you have separate files. So this is our answer to that and it's multi file components. So we can convert this single file component to a multi file component by typing PHP Artisan live wire Convert,

to a multi file component by typing PHP Artisan live wire Convert, and then the name of our component. And now it took that component and it exploded its portions in the dedicated files. So now we have a directory called Lightning bolt counter, and then inside of it separate files. The first is a PHP file for the class at the top. The second is a blade file for the blade portion. And then our JavaScript got extracted into a

The second is a blade file for the blade portion. And then our JavaScript got extracted into a dedicated JS file. So this gives you a really nice IDE experience. It makes your files seem a little bit more separated, but it preserves the co-location where if a user encounters your component, they only have to have one little lookup in their brain to know where to find all that stuff. They don't have to go to disparate places in your

to find all that stuff. They don't have to go to disparate places in your application, which I love. Alright, so if you hate all of that and you go, I don't want any of this, you can still use the old class-based component way and I'll show you how. Well, when you're creating a component, you could type artisan, make live wire, let's say fu, and then you could add class at the end.

you could type artisan, make live wire, let's say fu, and then you could add class at the end. And now it's gonna create a normal traditional class-based component right here. And then a corresponding view and resources views live wire. So this is exactly like V three. And let me tell you, if you don't like any of this, or even if maybe something you're seeing and you're going, Ooh, this looks really nice, but I have a massive live wear three application

and you're going, Ooh, this looks really nice, but I have a massive live wear three application and converting all of those components to view based components is gonna be a massive headache. Uh, that's fine. It's fully backwards compatible. If you upgrade to V four, we support all of that style out of the box. It's totally backwards compatible. You can just opt into this stuff if you'd like and even more.

You can just opt into this stuff if you'd like and even more. So let me show you the configuration. So if I type PHP Artisan livewire config, this is gonna publish a config file. So if we go to config and then livewire dot PHP, we scroll down, you'll see there is a make command config where you can set your own preference. You can say, ah, when I'm making components,

where you can set your own preference. You can say, ah, when I'm making components, I want them to be class-based. And now you're back to a V three experience entirely. You'll never see a single file component or a multi file component. Um, or you can use the new stuff SFC, or maybe you prefer MFC, whatever. And if you wanna use view base but you really hate the emoji for whatever reason,

And if you wanna use view base but you really hate the emoji for whatever reason, just set emoji to false and you'll never see the emoji again. So this is my way of setting live wire up to use the defaults that I love for my projects, but making it really, really easy for you to use your own preference. So that's view based components. There's a lot more to talk about and unwrap as we go.

So that's view based components. There's a lot more to talk about and unwrap as we go. Uh, I hope you dig it.