Getting Started with Alpine.js

Alpine.js is a relatively lightweight and minimal JavaScript framework. It lets us build reactive applications with a small size of 4kb gzipped.

You can think of Alpine.js as a modern jQuery or a Tailwind for JavaScript. It's more lightweight than React or Vue and is used to enhance your markup, not take it over.

Alpine.js is a collection of 14 attributes, 6 properties, and 2 methods. Take a look at the official site to see all the attributes, properties, and methods. It's a succinct way to see the framework.

Alpine.js Home Page

Alpine can quickly add functionality to our HTML applications, especially server-side generated ones.

To add Alpine on top of existing HTML, we just need to add the <script> tag found on the Alpine.js installation docs:

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

Once we have the script installed, we can tell Alpine to watch certain parts of our application by adding the x-data directive to our HTML elements. x-data defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference.

html
<div x-data>
  content in here is part of a new alpine component
</div>

Once you have the Alpine script, we need to you can add a click handler like so:

html
<button x-data @click="alert('button was clicked')">
  Click Me
</button>
<button x-data @click="alert('button was clicked')">
  Click Me
</button>

We can add some data to this example and hide and show a div based on that data:

html
<div x-data="{ isShowing: false }">
    <span x-show="isShowing">i am content that will show or hide</span>
</div>

Finally, we can add the button with the click handler to toggle the isShowing variable on and off.

html
<div x-data="{ isShowing: false }">

  <button @click="isShowing = !isShowing">
    Toggle Content
  </button>

  <span x-show="isShowing">i am content that will show or hide</span>

</div>

By using the Alpine attributes like x-data, x-on, and x-show are used to quickly add functionality.

<div x-data="{ isShowing: false }">
  <button @click="isShowing = !isShowing">
    Toggle Content
  </button>
  <span x-show="isShowing">i am content that will show or hide</span>
</div>

React and Vue can be seen as larger JavaScript tools to build any size application you need. However, you will need to learn a lot of the ways that React and Vue do things. Topics you'll need to learn in React and Vue land are:

  • Components
  • Component Methods
  • JSX for React
  • Creating Vue instances

Alpine.js is more lightweight and has a smaller learning curve.

With Alpine.js, you are adding quick functionality on top of your existing HTML.

React and Vue take over the rendering of your application to build fully featured single page applications.

Alpine.js is closer to jQuery than it is to React. It allows us to add functionality like listening for events and binding data to an HTML element.

For a quick look at how Alpine and jQuery let us write a click event faster, here's the comparison between JavaScript, jQuery, and then Alpine.

javascript
document.querySelector('button').addEventListener('click', () => {
    alert('button was clicked!');
});
javascript
$('button').click(() => {
    alert('button was clicked');
});

Unlike the JavaScript and jQuery, we'll do the click handler right in our HTML.

html
<button @click="alert('button was clicked')">
  Click Me
</button>

In addition to handling events with the x-on directive (or the @ shorthand), Alpine.js can handle things like binding data with x-bind, and setting text with x-text.

Here's an example of how we can loop over a list. It shows some new directives and an array in data along with a function.

We can create data in a list with an array:

html
<ul x-data="{ people: ['chris', 'kap', 'lynne'] }">

</ul>

Now we can loop over it with the x-for directive and display text using x-text.

html
<ul x-data="{ people: ['chris', 'kap', 'lynne'] }">

  <template x-for="person in people">
    <li x-text="person"></li>
  </template>

</ul>
<ul x-data="{ people: ['chris', 'kap', 'lynne'] }">
  <template x-for="person in people">
    <li x-text="person"></li>
  </template>
</ul>

x-model is the directive to use to listen to an input. It will two-way data bind the input to a value:

<div x-data="{ message: 'this is a message' }">
  <input x-model="message">
  <p x-text="message"></p>
</div>

We can take the looping example from above further by adding a form and listening to its input with x-model. x-model will bind an input to a variable so that the variable will be updated on typing into the input.

html
<ul x-data="{ 
  value: '', 
  people: ['chris', 'kap', 'lynne']
}">

  <form>
    <input x-model="value" />
  </form>

  <!-- ... removed for brevity -->

</ul>

Let's add to our people list. Now that we have this new form and we are updating the value variable, we can listen to the form submission and add whatever has been typed into the input to the people list.

We are using a new function called add() to Array.push() to the people array.

html
<ul x-data="{ 
  value: '', 
  people: ['chris', 'kap', 'lynne'], 
  add() { this.people.push(this.value) } 
}">

  <form @submit.prevent="add">
    <input x-model="value" />
    <button>Add</button>
  </form>

  <template x-for="person in people">
    <li x-text="person"></li>
  </template>

</ul>

We are listening for the submit event and preventing the default behavior of refreshing the page (HTML forms do that) using @submit.prevent.

Now when we use our form and press Enter, we should see a new item added to our list!

<ul x-data="{ 
  value: '', 
  people: ['chris', 'kap', 'lynne'], 
  add() { this.people.push(this.value) } 
}">
  <form @submit.prevent="add">
    <input x-model="value" />
    <button>Add</button>
  </form>
  <template x-for="person in people">
    <li x-text="person"></li>
  </template>
</ul>

Alpine.js is great for applications that need a little frontend functionality but don't need a complex JavaScript application. Alpine is perfect for situations where you need to:

  • Respond to events like clicks or typing
  • Update text
  • Fetching and updating data

Alpine is a great fit for devs that use Laravel or some kind of server side generated HTML. It would be a great fit for those using something like Eleventy.

Give the official website and the docs a read through to see examples of how to use the attributes. The Alpine 101 gives three examples like:

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.