Alpine.js: The basics of Alpine

The basics of Alpine are pretty straightforward: you define some data inside your markup using the x-data attribute, and then you can show this data to the users using the x-text attribute on a tag, like this:

<div x-data="{ name: 'Joe' }">

<div x-data="{ name: 'Joe' }">
  <p x-text="name"></p>

Using boolean state and the x-show attribute you can easily hide or show some portions of the UI:

<div x-data="{ showThis: false }">
  <p x-show="showThis">Show this</p>

If you set the showThis variable to false, nothing will be displayed:

You can use x-show="!showThis" to do the opposite:

One thing to the data is only available on child elements of the tag with the x-data attribute.

For example in this case the second p tag doesn’t have access to the showThis value, and it’s shown regardless of its value defined in the div (it’s isolated):

Lessons in this unit:

0: Introduction
1: Installing Alpine
2: ▶︎ The basics of Alpine
3: Events
4: Defining data
5: Looping
6: Binding user input to variables
7: Watching variables change
8: Stores