Alpine.js Example in Laravel: Master-Detail Form

Hello guys, today in this video I want to show you an example reminding you of some text tack choice that is really underrated in Laravel community and in general in JavaScript world which is AlpineJS and usually Alpine.js GS is tied together with LiveWire because it comes from the same author Caleb Porzio and in a typical composer JSON of Laravel project with LiveWire starter kit you may find this which means that some Alpine is already under the hood but recently I had a case which I want to show you where AI agent cloud code generated this complex form for me with AlpineJS without live wire. So this is an example how you can use typical blade form with alpine on top for some dynamic behavior which means if you have a regular Laravel project with blade without react without Vue.js and you don't want to learn them but you still want to have some JavaScript with some very small dynamic things on the website. AlpineJS is exactly for that case. So here's a form to add recipe. This is zoomed in version. Let's fill something in with fake filrom extension. Some tags, some ingredients. And then I can add ingredient. So this is AlpineJS. So we add something something quantity. This is probably too much zoomed in because drop-downs are on one another. Then similar thing add step. So this is Alpine.js as well. And for example, if we save that, this is the page to view that recipe. And then in the edit form you can choose more or less ingredients. So for example we can delete the ingredient and for now it's deleted only with JavaScript. The submission of the form only then saves the data update the recipe and then we have only one ingredient. This is live wire starter kit. If you do something like that with live wire for example add step and then you add new item to the array of livewire instructions it will call server side. This is how livewire works. If you do that with alpine you're working with local JavaScript array of instructions and only then after I submit all the form it gets submitted to the server. So basically you're working locally with JavaScript which is exactly the point of such dynamic form. So let me show you the code of that page. This project itself is live wire starter kit but this specific page is recipe controller regular controller in routes web. We have route resource and this is kind of a side note you can use livewire starter kit but inside of that you can do laravel controllers without any livewire. This is one of the reasons why there's no blade starter kit in Laravel 12. Livewire starter kit is considered to be that thing. So yeah, we have a controller with create and then edit forms with route model binding here as you can see. So there is no live wire here. And if we go to that edit blade, it uses the same layouts app from livewire starter kit. But inside of that file, you cannot find any wire something. So it's not live wire, it's just alpine. And where do we see that Alpine here? First, we see some PHP operations to have the collection map through recipe ingredients and recipe instructions. To be honest, I would probably move that to the controller method in the edit form. As I said, this code is not mine. It's written by Claude Code fully for one of the experiments. So, I sometimes feel in the shoes of code reviewer like I used to do more often on this channel, but I was reviewing junior code. Now, quite often I review AI written code, which is quite good actually. But we have to pay attention to the details. But unexpectedly I didn't ask for that cloud code generated alpine here like this. So we have a regular form with action route. This is not a dynamic form. So no react or Vue.js or LiveWire. But inside we have local variables. This is how you define data in AlpineJS. So we have ingredients instructions and then methods for add or remove something. And those methods work with local this instructions and this ingredients. Then also move instructions. So basically these two local variables are the main things in that Alpine.js component. So it's basically whenever you have X data everything inside of that is considered Alpine.js component. And then if we scroll down to ingredients for example flux button it does use flux components the starter the free version of flux but here we find this at click add ingredient and that add ingredient is the function defined earlier as you saw in AlpineJS component. So basically if you haven't seen AlpineJS in action before it's not using separate components it's all kind of in line of the same div or form in this case and the methods are defined on top and then everywhere inside of that form we can use those methods like this or perform some AlpineJS inline operations like this for example. So this is AlpineJS code for loop for ingredient we show X model ingredient name then X model ingredient quantity and so on. So the main idea and benefit of AlpineJS in my opinion is it feels similar to React or Vue with syntaxes like this where you define the variable and the modeling but it doesn't require extra components thinking about the structure. It's all inside the same blade. So you saw the loop of ingredients and then also at the bottom we have button with add click remove ingredient which is another method inside of the same alpine component and same down below with instructions template for instruction index and then pretty similar code and at the end of that whole page we have just form and there's no JavaScript here at the bottom or on top the same inputs which you dynamically work with AlpineJS the same inputs are provided as form confirm data in a regular Laravel action to update method of recipe controller. Here's that method which then performs the update with just regular request and validated data. So yeah, this is what I want to emphasize and show AlpineJS in action with the idea that you can use it outside of LiveWire. You can install it separately without livewire or if you're using livewire starter kit which contains Alpine you can create regular blade page and then add X data with AlpineJS inside and you can learn more about AlpineJS of course on its official website. So this is a very simple example like hello world counter. So you define X data with well data and then inside you do X whatever with Alpine. So this actually works. And then in the docs we have more directives and more things you need to learn. Or you may prefer my way of teaching. I have a course on AlpineJS on Laraveville daily. Actually very old course from 2022. But at the same time Alpine didn't change since then. If you find in the course any details that are actually changed, please report in the comments. But from my understanding, AlpineJS is pretty stable for basically many years because it's a small library just for these types of operations. So if you prefer my way of teaching in video in 1 hour, I will link that course in the description below. What do you think about AlpineJS? Are you using it in your projects or what maybe are the reasons why you're not using that? Let's discuss all of that in the comments below. That's it for this time and see you guys in other