Over the years, web development has become increasingly complex and complicated, and in some cases, even difficult. And I long to return to a day of simplicity, because I just want to sit down and write a modern web application without all of the modern stuff that goes along with it. And we have several tools that we can use to do just that. HTMX is one of them. But in the Laravel ecosystem, we have Livewire. And Livewire is the most productive way to build your next web application. It's powerful, dynamic, and you can build front-end UIs without even leaving php. And one of the great things about Livewire is how simple it is to get started.

It's powerful, dynamic, and you can build front-end UIs without even leaving php. And one of the great things about Livewire is how simple it is to get started. All you need is to install the Livewire composer package. And that's it. You are ready to start using Livewire. So I have just a plain Jane Laravel application that was created with no preset. So we can run composer require Livewire. And this is going to, of course, add Livewire to the application. Now Livewire uses Alpine. So if you have Alpine already installed in your application, then you will need to remove it.

Now Livewire uses Alpine. So if you have Alpine already installed in your application, then you will need to remove it. So that means that if you created your project using the Laravel Breeze preset, and you chose the Blade with Alpine option, then you will need to remove the Alpine that is installed with that preset. But that's easy enough to do. You just need to go to the Resources folder, JS, and then remove Alpine. Now of course, that's not the only way that you can get started with Livewire. You can also create a new project using the Jetstream preset. So I'm just going to call this Livewire from scratch.

You can also create a new project using the Jetstream preset. So I'm just going to call this Livewire from scratch. We'll choose Jetstream, and we'll choose Livewire. And I like this approach because not only does it install Livewire, but it also installs Tailwind. We also have Vite. So this preset is going to give us everything that we need to write a modern web application. Of course, because this uses Vite, we would need to run the dev script to run the Vite development server. But of course, it helps if you do that from the correct directory.

development server. But of course, it helps if you do that from the correct directory. But once it's up and running, we can see the good old Welcome view running in the browser. So we're ready to get started. Let's open up the Welcome view. And the first thing I'm going to do is add the Vite resources here. So first is going to be resources/css/app.css. Then we want resources/js/app.js. And let's get rid of most everything inside of this view. So I'm going to get rid of the background image.

And let's get rid of most everything inside of this view. So I'm going to get rid of the background image. I'm also going to get rid of the min-h-screen class on this div element. Inside of the header, let's get rid of all of these if statements. And then let's get rid of everything inside of the main element. So that we will have a single div that has Hello Livewire. And let's take a look at this in the browser. After we refresh the page, then of course we see our new content. Let's also get rid of the footer, because we don't necessarily need that. And I'm going to put these side by side, just so that we don't have to go back and forth.

Let's also get rid of the footer, because we don't necessarily need that. And I'm going to put these side by side, just so that we don't have to go back and forth between our code and the browser. So Livewire revolves around the idea of using components. That might sound a little weird, especially if you're coming from the world of Vue or React or those kind of UI frameworks. Because of course, components are something that we've used, but they've primarily been JavaScript components. In the case of Livewire, a component is a Blade view and a PHP class. And we can easily create a component using artisan.

In the case of Livewire, a component is a Blade view and a PHP class. And we can easily create a component using artisan. So inside of our console, we'll say php artisan make:livewire and then whatever we want to call our component. Let's call this greeter. Now I have an alias for php artisan. It's just simply A. This makes it a lot easier to run artisan commands, especially when you're like me and misspell artisan quite a bit. Now you're going to notice two things. We get a PHP class called greeter, then we get a Vue that goes along with that component.

Now you're going to notice two things. We get a PHP class called Greeter, then we get a Vue that goes along with that component. And now that we have this component, we can actually use it right here inside of our welcome.vue. So let's delete that div element and instead we'll have Livewire Greeter. So we are essentially telling Blade that we have a Livewire component called Greeter and we want to render it right here. So let's open up those two files. First we will have greeter.php, then we have greeter.blade.php. And I guess we need to talk about where those files are located.

First we will have greeter.php, then we have greeter.blade.php. And I guess we need to talk about where those files are located. So the class is created inside of the app directory, Livewire, and then greeter.php. The associated Vue for this component is inside of Vue's Livewire greeter.blade.php. So if we look at the class, we see that it extends the Livewire\Component and it has a render method. This render method returns a Vue called Livewire.greeter, which is our greeter Vue. And of course we don't see anything inside of the browser right now, but if we replace this comment with the text that we had before, hello, Livewire, then we are going to see that's populated within the browser.

this comment with the text that we had before, hello, Livewire, then we are going to see that's populated within the browser. So let's go over that again. Inside of the welcome Vue, we use Livewire greeter. That's going to tell Blade to use the greeter Livewire component, which is going to use the greeter class and call the render method, which in turn returns the greeter Vue, which returns the markup inside of that Vue. So for all intents and purposes, we essentially have a controller and a Vue. The component's class is the controller and the Vue is, well, of course the Vue. And if we think in those terms, then we can also assume that we can pass data from our

The component's class is the controller and the Vue is, well, of course the Vue. And if we think in those terms, then we can also assume that we can pass data from our controller or our class to our Vue. And in a normal controller, we would do so by passing a model, but we don't need to do that here. Instead, our model is the class itself, so we can define properties. So let's say we will have a public property called name, and we can assign this a value and we can use this property directly inside of our Vue. So instead of saying hello, Livewire, well, this is a greeter. We want to greet the name.

So instead of saying hello, Livewire, well, this is a greeter. We want to greet the name. And as a result, we see hello, John. And of course, if we change the value of this name property, then we will see that updated in the browser. But we can only use public properties inside of the Vue. If name is private, then we will encounter an error. We can see that the variable name is undefined. And of course, we see that because the Vue cannot find the name property because, well, it is private.

And of course, we see that because the Vue cannot find the name property because, well, it is private. So let's change that back to public, and we will see once again hello, Jeremy in the browser. So getting started with Livewire is very simple. You can install Livewire using Composer, or you can create a new project using a preset that includes Livewire. To create a component, you use the php artisan make command, which creates a class and a Vue for that class. Then you reference that component inside of whatever Vue that you want, and voila, you're using Livewire.

Then you reference that component inside of whatever Vue that you want, and voila, you're using Livewire. Now, of course, there's a lot more to this. So in the next episode, we will talk about actions.