What is x-data in alpine and how to use

In Alpine.js the x-data directive declares a new component scope. This means in any HTML element if we write x-data attributes then it becomes an alpine component.

Hello world example in Alpine.js?

Hello World Example in HTML without Alpine

<div>
	<p>Hello World</p>
</div>

In this example we simply output Hello world in the browser, and we cannot manuplate the data inside p tag.

Hello World Example in HTML with Alpine

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

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

While using alpinejs: In this example first we add script tag with cdn link for alpine.js to work. You can also download the js file and refrence to it on your page. But using cdn link is fine for this example.

This output generate from this code is also exactly same as above example. The only difference is we are using Alpine now. And we can manuplate our data in HTML without refreshing the page or dom.

In the above example, in div tag, we write x-data="{msg: 'Hello world' }". So it make div element as an alpine component. Here we create an object which contain msg as properties with value 'Hello world'. Now, msg variable can access anywhere inside that div tag. So the value of msg is shown in a paragraph p tag with help of x-text. Anything written inside x-text is displayed in inner HTML of that tag.

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

Note: Alpine.js directives will only works on:

• an element with x-data.
• an element which is child of that x-data.

Different way of writing x-data in html file

In alpine.js we can write code either in html tags as attributes or inside script tag. Writing on properties and method on script tag will make our code clearer and separate HTML and Coding logic. The below example is same as our above Hello world example. But the only difference is the writing logic.

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

<div x-data="app()">
	<p x-text="msg"></p>
</div>

<script>
	function app() {
		return {
			msg: 'Hello world',
		}
	}
</script>

You can prefer any methods of your choice.

Summary:

• x-data is a directive that declare a new alpine component.
• alpine works only on an element with x-data and inside it's child element.
• there are multiple ways of writing alpine statement.
• we can define object of properties and methods in x-data.