/ #alpinejs #javascript 

Alpine.js In-Depth: x-data "state" & x-text "echo"

The simplest Alpine.js application is the following HTML file. It loads Alpine.js version 2+ from the JSDelivr CDN using a script tag and has an Alpine.js component with x-data="{ msg: 'Hello Alpine.js' }" and a p element with x-text="msg".

<script 
  src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"
  defer
></script>

<div x-data="{ msg: 'Hello Alpine.js' }">
  <p x-text="msg"></p>
</div>

Which displays the following in your browser:

“Hello Alpine.js” example in the browser

We can further break down the Alpine.js application/component/widget (I’ll use the words interchangeably).

The x-data directive “Declares a new component scope” (per the Alpine.js README). Any HTML element with an x-data attribute will be initialised by Alpine.js as a component. The attribute’s value, in this case "{ msg: 'Hello Alpine.js' }" is evaluated as JavaScript, in this case that string will yield the following an object with a single key, msg whose value is 'Hello Alpine.js'.

That means <div x-data="{ msg: 'Hello Alpine.js' }"> will create an Alpine.js component with div as the root element with the object { msg: 'Hello Alpine.js' } as the Alpine.js state.

Alpine.js directives will only work:

  • on an element with x-data since it’s the component root element
  • on an element which is a child of an element that has x-data

For example: <p x-data="{ msg: 'Hello Alpine.js' }" x-text="msg"></p> will display the same as the example where x-text is on a p element inside of the div which has the x-data.

The other Alpine.js directive which is crucial to getting a quickstart is x-text. x-text is reminiscent of echo in PHP, it’s a way to interpolate JavaScript variables and expressions to the HTML document. For JavaScript developers, x-text="value" is very similar to using el.textContent = value where value is a variable.

In the case of our example, we’ve got a msg property on the Alpine.js state, which we want to show, hence we use x-text="msg".

We’ve now seen how to create a very basic read-only Alpine.js component using x-data and x-text.

You can find the examples for this post at Alpine.js Handbook Examples - 1.1 x-data & x-text

That’s it for this post, you can check out the Alpine.js tag on Code with Hugo for more in-depth Alpine.js guides.

If you’re interested in Alpine.js, Subscribe to Alpine.js Weekly. A free, once–weekly email roundup of Alpine.js news and articles.

Photo by Vidar Nordli-Mathisen on Unsplash

Author

Hugo Di Francesco

Co-author of "Professional JavaScript" with Packt. He runs the Code with Hugo website helping over 100,000 developers every month and holds an MEng in Mathematical Computation from University College London (UCL). He has used JavaScript extensively to create scalable and performant platforms at companies such as Canon and Elsevier.

Interested in Alpine.js?

Subscribe to Alpine.js Weekly. A free, once–weekly email roundup of Alpine.js news and articles