Introduction: Why Alpine.js Plugins Matter
I've always loved Alpine JS but a lot of the magic that Alpine JS has and all the features that you can do with alpine JS are kind of hidden from me because of using Livewire. If you don't know Caleb porio the creator of Livewire is also the creator of Alpine JS and because of that especially in Live Wire V3 the latest version, Alpine JS and Live Wire are so connected where you don't really necessarily know what parts are Live Wire and what parts are Alpine JS.
They're one and the same but Pine GS has a whole bunch of really cool features that even if you're using it outside of Livewire, outside of Lille, that are really incredible to take a look at. So I figured I'd make a video: here's five of my favorite plugins and maybe a bonus one to use Alpine JS. I didn't even realize but I even got the the shirt on today, so there we go, repping Alpine.
Alpine JS, if you don't know, Alpine JS is just a lightweight JavaScript framework, very similar in syntax to something like View, but the premise is it's just all contained inline. Of course you can definitely separate this out. But here are some extensions that you can use within Alpine JS. In this case, Alpine JS makes it really easy to have custom extensions or plugins that you can use and input into, whether you're creating them yourselves like a custom directive or you have different plugins, and that's what we're going to look at today.
The first one I want to take a look at is this create Alpine app. And this is not a plugin, this is like that bonus one before we actually get into five of my favorite plugins for Alpine JS. But this is built by Dev Dojo, Ton Leia who oversees everything at Dev Dojo.
MPX create Al Alpine app and then you can just use whatever app you want. So this is really similar to if you were to create a Vite app, for example. A lot of times this is the go-to way to do anything within react, svelte, or view if you're not using something like nextjs or nux, and now Alpine has the same thing too. Of course you could probably use like an Astro if you want to mess around with alpine too but this is a great way to just get things started.
I to pull open my terminal and just say npx create-alpine-app, and then let's just go ahead and call this for the video. There we go, it will install everything that you need to get Alpine up and running for you. So if I was to go into this folder and let's go ahead and run npm run dev, then we just get this out of the box. So this is great. It has hot reloading. We can just modify the page of index.html and we can have everything good to go. So we're going to use this create Alpine app starter for kind of playing around with some of these plugins that we're going to take a look at.
Plugin 1: Alpine Clipboard
First up of the five plugins I think you should know about within Alpine JS is Alpine Clipboard created by Ryan Chandler. Ryan Chandler is phenomenal in the live wire, laravel, alpine JS just scene in general, and this is incredibly simple. So you can install most plugins within Alpine JS, you can install with a script tag or with MPM. I'm just going to do it through MPM right now. Let's go ahead and do that here. And then we can go ahead and add this clipboard plugin.
So open up VS Code, index.js, so now we can add that and then Alpine.plugin(isClipboard). And then it looks like we can add some data and then we can copy and use this dollar sign clipboard initiative to copy whatever is in the data to the clipboard. So I'll just go ahead and take this itself and we'll go ahead and say this right here. Okay, it's a little unstyled but let's see what this looks like.
So we can write anything in here, "Hello there YouTube," and I copied to clipboard. If I was to paste this up here, "hello there YouTube." Okay, fantastic. Incredibly easy way to just get like a clipboard up and running in your Alpine app, and this is just, I I use this plugin a lot even in my Laravel applications, my Livewire applications as well.
Plugin 2: Alpine Autosize
Next up, Alpine Auto size. So this is fantastic for text areas that need to be auto-sized. Incredibly simple. You just place this x-autosize directive on any text area and then all of a sudden you have that input. It's incredibly simple. So let's go ahead and install this, show it off. npm install. Again, you can use the CDN for most of all these plugins if this is something that you're just looking to have maybe on one page, that's probably a good way to do it within any application, Laravel, whatever have you.
And then we'll just go ahead and import that autosize plugin. So go into index.js again, and we'll put that down there. And now let's just have a text area. So in our index.html, we'll just go ahead and delete this and we'll have a text area. Maybe we'll just add some class to it too just here. Let's see. So type something here.
So it's not, there's no way to autosize it right now. If I was to copy and paste, then all of a sudden it just starts autosizing. So if I have one line of code, and of course we can change the styles if we need to. This is great for any kind of note application that you have. But you can see how that's really simple. We don't have to do anything else. It just works. It just changes the size of that text area to go with the flow.
Plugin 3: Alpine Collapse
Now this next plugin is actually a first party plugin but you still need to install it. It's not included out of the box mostly just because stuff like this you don't necessarily need to have installed out of the box. So let's install it, but then I want to show you what the difference is between using this, the collapse plugin. And there's a couple of different other plugins that Alpine JS has that are first-party plugins things like Resize or Persist, Focus, Anchor, Morph. A lot of these were built in order to have that underlying magic for a live wire but they're also just great on their own as well. But the collapse one is just really interesting and beautiful I think.
So let's go ahead and install it, npm install, and then we need to import it. index.js, place that there. And now what you need to do is just add the x-collapse to whatever you are showing. And usually within Alpine JS you have this data, and if you need to show something when that data has changed, in this case if expanded is false, this is very simple Alpine JS in the sense that this is what 90% of use cases are. You're opening a hamburger menu or you're doing like an FAQ dropdown, whatever that might be.
So let's go ahead and I just want to show this and what this looks like without the x-collapse first. So we go ahead and place this here and we'll remove x-collapse. Why don't we style this a little bit behind the scenes? All right, that's been styled. One of the cool things to also note for this Alpine JS, like the create Alpine app, is it has Tailwind out of the box, so you don't have to mess around with any other styles, or if you do, you can easily change that when you're creating a new Alpine app.
But here's just a button and this is again most of what you might use Alpine for. Alpine's incredibly flexible. This is what I use it for 80 plus percent of the time. Toggle content... and we see it, this button just turns that content on and off. But what does the x-collapse plugin do? So now I can just add x-collapse and... very nice huh? That's, I love it. And the only reason it's like jumping at the end is because of the where the scroll bar is. I deleted everything just because I don't know why the padding was making it a little stutter. Let me see if I add some margin, let's see here. So yeah, like that looks a lot smoother.
I wonder if it's because the x-collapse has the padding. So if I like had a, if I was set this to a div and then like here we have some padding, if we were like class padding 20 maybe. Yeah so it looks like it might just be I had the padding in the element that was being collapsed and shown again. This was mostly just to show off the plugin itself but it's nice that you can have something like this kind of animation without having to do much.
Plugin 4: Alpine Auto Animate
The next one is Alpine Auto animate. So if you don't know form Auto animate, an incredible little library that basically just gives you these kind of animations whenever you are doing anything on the page. You're adding something to a list, you're moving things around on a list. In Native JavaScript for example, it just changes the order, but if you use Auto animate, again this is not changing any of the underlying functions. This is just placing this Auto animate tag on the whole list, now you have this animation where it keeps tracks of all, keeps track of all the elements within that list and then animates it accordingly.
And it's pretty easy to install even if you don't use the Alpine JS plugin because it's there's a direct native JavaScript implementation where you just add this script, do all of that. Of course there is one for react, view, preact, solid, svelte, Etc. But with an Alpine Auto animate, it's even easier. So let's go ahead and install it and then we can add the plugin, and then anything that we add this x-auto-animate directive to will automatically apply those animations.
Okay with the help of Claud, I just whipped up this to-do list very quickly. And this is an implementation within Alpine JS where we're just saving these to-dos to in an array and we have some functions to be able to add those. So this works out of the box, but it's not very flashy. They're just added. There's no animations, and this is where we can showcase how incredibly simple this form kit animate works. Again there's things within, if you're using Laravel for example, Laravel live wire's animate has a lot of these kind of underlying helpers for you.
So we probably will add this to each of the LIs. Maybe we can say x-auto...animate I believe it was called that. Let's go ahead and see. So it's x-auto-animate. Let's see here. Perfect. Let's try that. Let's try adding it to the parent div. Okay, and I was mistaken. It's not best in like the list item, it's best in the parent div. And the template is something that Alpine JS uses for looping through elements so it's best to be put in the UL. So let's go ahead and see what this looks like.
So now if I add one, add another, remove, remove. Again, very simple animations but incredibly easy to add where we probably would want to clean up like the removal aspect of it. So like specific easing functions or how long you would like it to be animated for, and then you also have the ability to toggle specific animations. So maybe for the delete we wouldn't want the animate to be enabled for example. And it looks like it's also additionally configured with the autoAnimate.configure example. So it's just using Auto animate under the hood, it's just wrapping it.
Plugin 5: Introducing Alpine Ajax
Then last but not least, I put out a tweet about Alpine Ajax, something that is really similar to HTMX, but specific for Alpine and holds a lot of maybe initiatives and directives that Alpine JS uses. So it's not an additional plugin, additional library that you would have to install for your front-end Ajax inspired requests.
And in this case, Alpine Ajax uses a lot of the functionality or the syntax of Alpine, but specific for making a lot of those front end to backend calls for example. After you install it you can target a specific element on your page, in this case comments, and when you have an action towards the /common API route it will just automatically add that comment. So I already installed this and set this up within a Laravel application. So why don't we take a look at what that looks like with with Alpine Ajax.
Configuring Alpine Plugins in a Laravel/Livewire Project
Hey there! Editing Josh wanting to clarify a couple of things. Implementing or adding an Alpine JS plugin in a Laravel application is a little different because Livewire uses so much Alpine under the hood. So it's not the same as just adding an Alpine plugin using import in your app.js. Instead, you have to import Livewire and Alpine as well as the plugin you're looking to implement from this distributed livewire.esm, and then you don't have to call Alpine.start. Livewire.start starts both Alpine and Livewire. You would just have to initially initiate that plugin here.
And then wherever you are using Alpine JS and live wire in your application, in this case I'm just in the welcome.blade.php, you would have to input this @livewireScriptConfig. This just tells it that you want to use a custom Livewire script or custom Alpine script. This is all in the docs but something that's really easy to overlook. So back to Alpine Ajax.
Alpine Ajax in Action: Progressive Enhancement with Laravel
So this is the Alpine Ajax version of the to-do list that we created in strict Alpine, but this has Laravel behind the scenes where we're interacting with the routes within Laravel. And I'll probably create a separate video on this of why you might use something like HTMX or Alpine Ajax over Live Wire. And while I definitely have my own personal biases, there are benefits. In this case, if we were to turn off JavaScript with the implementation that I use that I created here, if we were to turn off JavaScript it would still work in the exact same way, but Alpine Ajax kind of enhances it. So it's a way of doing straight blade requests but making it easier for you. And this isn't perfect because you could use Laravel's fragments to do some of this, but here's just what it looks like.
If I was to create a new to-do, say "Hello There YouTube," submit it, it's automatically added. We can see that there's no refresh. If you just take a look up here, if I was to add a new one, there's no refresh to the page. It's Just Happening behind the scenes using Ajax requests. So if I was to create a new one, submit, and there's this to-do payload or to-do that is being sent off in Ajax request, and the payload is simply has this token then some text and then we're given back a new LI item. In this case, 12, submit, into this options here.
So if I was to take a look, we have this ID of to-dos in this unordered list, and then in our Alpine Ajax, we're saying I am initiating this Alpine component and I want to target the to-dos item, so that when the action of /todo is hit, we can push whatever is being received back into this UL of to-do. In this case, this x-merge is saying we want to append, appended to whatever else is here. So now if I say "Test new one," all of that's being appended to that UL. If I was to refresh, we see exactly the same because we're just passing that in as the Laravel prop or the data to this particular component.
But I'll show you why this is incredibly useful. Within, not only is the syntax very similar, so you don't necessarily have to learn a whole new syntax for HTMX, for example. You don't have the HX, the x-init, x-target is very similar to what you might see in Alpine. And we also have this ajax:success where we are able to reset the text for example.
But this works without JavaScript as well. So if I was to say disable JavaScript, okay, and we'll refresh the page, and then I'll say "hi there," submit, it still works. And you saw that there's a page refresh because we're not necessarily sending Ajax anymore. What we're doing is in our Laravel web route, we're saying if there is a header or if there's not a header of the X-Alpine-Request, and that's what Alpine Ajax kind of sends over with that request, has a header of X-Alpine-Request, then you can do whatever you want within this route. And this would probably be best to be in a controller, but you can do whatever you want to say, okay if I don't necessarily have that request then maybe I can still create the to-do, but now I'll just refresh the page or send it to a new page, whatever that might be.
And you can do, this is just returning an HTML response of that UL with the to-do title added to it. But this would be the great case for using the fragment options within Laravel. So instead of UL we could just return the view of fragment and we could probably just set that up as like here, so fragment to-dos for example. Then you could just say I want to only return this fragment from the page, but if X-Alpine-Request is not in the header, if this isn't actually an Alpine request and someone with JavaScript disabled, then I'm just going to return the whole page. You can see here how this is a great way of adding this flexibility, adding this interactivity without necessarily jumping complete into full JavaScript page. Again, I would say complete apples and oranges comparison to something like Livewire it's really just an HTMX alternative for people who are already using Alpine.
Conclusion & Further Resources
And that's it. There's so many more plugins for Alpine JS that I would advise you to take a look at, awesome-alpine-js which is going to be in the description as well. And then so many ways for you to you expand Alpine JS to, creating your own directive instead of adding a new plugin. But Alpine JS makes that incredibly simple. And it's makes it incredibly easy for people who have created plugins, so give the plugin some love, star them on GitHub. Until then, keep creating.
