Discovering AlpineJS: An Interactive Guide to (Beginners) Mastery

ByChristopher Nathaniel | 31 May 2024

Javascript

Here it is! Javascript is one of my favourite languages; mostly for how accessible it is for every developer and really teaches and allows the demonstration of some key problem solving skills on the modern web – but every so often a framework or language that becomes quite popular slips through the net.

AlpineJS is a JavaScript framework, a lightweight one at that. Maybe the opposite end to ReactJS or AngularJS. AlpineJS makes it easy to add dynamic behaviour to your web project. A straightforward example of an AlpineJS file that shows a simple interactive component, although this is the first AlpineJS i’ve written – its easy to see the structure it wishes you to work with.

AlpineJS Toggle:

In this example, we have a toggle button that shows and hides a text message. This seems to be the most basic way to explain how AlpineJS works (Thanks Alpine Docs!).

AlpineJS – Toggle Script

HTML

Description

Preview Code

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<div x−data="toggleMessage()" class="container">
    <button @click="toggle" :class="{'active': isVisible}">Toggle Message</button>
    <p x−show="isVisible" class="message">Hello World! (Toggled!)</p>
</div>
<script>
    function toggleMessage() {
        return {
            isVisible: false,
            toggle() {
                this.isVisible = !this.isVisible;
            }
        };
    }
</script>

Overview:
toggleMessage(): x−data defines an AlpineJS component.
toggle(): @click calls the method from the defined component.
x−show: x−show is used to show or hide based on a value.
isVisible is our value (bool).
:class="{'active' : isVisible}" is our conditional class.
.active { } can be used to style our active state.

AlpineJS TodoList:

In this example, we have a toggle button that adds and removes ToDo’s from a list (Thanks Alpine Docs!). It provides a solid example of how powerful AlpineJS is for lightweight front-end functionality.

AlpineJS – Toggle Script

HTML

JavaScript

Preview Code

    <div x−data="todoApp()" class="container">
        <h1>To−Do List</h1>
        <form @submit.prevent="addTodo">
            <input type="text" x−model="newTodo" placeholder="Add a new task">
            <button type="submit">Add</button>
        </form>
        <ul>
            <template x−for="(todo, index) in todos" :key="index">
                <li>
                    <span :class="{ 'completed': todo.completed }" @click="toggleComplete(index)" x−text="todo.text"></span>
                    <button @click="removeTodo(index)">Remove</button>
                </li>
            </template>
        </ul>
    </div>

    <script>
        function todoApp() {
            return {
                newTodo: '',
                todos: [
                    { text: 'Write article', completed: false },
                    { text: 'Publish article', completed: false }
                ],
                addTodo() {
                    if (this.newTodo.trim() !== '') {
                        this.todos.push({ text: this.newTodo, completed: false });
                        this.newTodo = '';
                    }
                },
                removeTodo(index) {
                    this.todos.splice(index, 1);
                },
                toggleComplete(index) {
                    this.todos[index].completed = !this.todos[index].completed;
                }
            };
        }
    </script>

x-data creates the AlpineJS component (scope).
x-model (two way data-binding) creates a bind between the input and JavaScript variable. When the input is updated, it will update the variable.
@submit.prevent will prevent the default and call the function (addTodo).