Fancy a modern alternative to jQuery? Meet AlpineJS

Couple of days ago I stumbled upon a great video from Fireship on YouTube. It was about creating a same todo app in 9 JS frameworks and in vanilla JS. In my opinion it is a piece worth watching, you can watch it here.

I've also never been much of a fan of jQuery, yeah it gets the job done and it can pull you out from some difficult situations but it never really grew on me. That's why AlpineJS sounded so appealing at first.

It is ultra lightweight and consists of 15 attributes, 6 properties, and 2 methods. It has bindings, listening for events, looping, and even a store.
Without a further ado I'll guide you through some basic examples for you to see how cool and simple it really is.

Let's create a toggling dropdown.

Toggling Dropdown component

Let's start by creating a regular html file named something like baby-steps-alpinejs.html
You won't need any libraries from npm everything is imported through the cdn link like so:

<html>
<head>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
</body>
</html>

As for structure we will need our main <div>, then a <button> that will do the toggling, and finally a <div> that will house our content.

...
<body>
  <div x-data="{open: false}">
    <button x-on:click="open = !open">Toggle</button>
    <div x-show="open" @click.outside="open = false">Our Dropdown contents</div>
  <div>
</body>
</html>

Now what is happening here, let's start from the beginning. The x-data is simply a directive in Alpine that declares the object of data, it is worth mentioning that every property inside this object is available to other directives inside that HTML element. Here we declare our variable open with the value false.

Next, there is a button that has an event listener expressed with x-on directive, in this case we are listening to the click event on this element. When this button is clicked we toggle the value of the previously declared variable open. So far so good.

Latest element is a div that houses the content. Here we see another Alpine directive x-show, what it does is showing and hiding a block of HTML on a page based on the input, in this case it is evaluating our variable open.

It might be a little confusing to see @click all of a sudden, it is a shorter way to implement x-on directive. Another thing is .outside attached to the @click directive. This is a modifier that is created for making your life easier. It will listen to the clicks outside of the element and apply given logic, in this case open = false.

Another handy modifier is used with submit event in forms to, you guessed it, prevent default behaviour upon form submission. It is applied simply as @submit.prevent="..." simple as that. Modifiers like window, document, outside, debounce and others are there to help you with implementations of behaviours that would otherwise be a little tricky to set. They are of great help, that's for sure.

I want to show you another directive that we didn't use here - x-text it is a directive that is used for setting the text content of the element. You can set it to the variable open in which case it will display textual boolean value true because the open is always true when it's open. We can also declare another variable in the x-data and use x-text to display it like so:

...
<body>
  <div x-data="{open: false, content: 'Our newest content'}">
    <button x-on:click="open = !open">Toggle</button>
    <div x-show="open" @click.outside="open = false" x-text="content"></div>
  <div>
</body>
</html>

This will show the text Our newest content when we toggle our element.

I hope you enjoyed a short glimpse inside the AlpineJS.

Thank you for reading and stay happy, productive, and safe.

Blog

Fancy a modern alternative to jQuery? Meet AlpineJS

Semir Teskeredzic

Toggling Dropdown component

Join Our Newsletter. No Spam, Only the good stuff.

Related