Getting Started With Alpine.js
What is Alpine.js?
Alpine.js is a JavaScript framework that enables us to enhance our JavaScript applications with their reactive and declarative nature. You use its directives to bind data and any changes made to it reverberates in the whole app regardless of the level of the emanation. Alpine.js is more like a UI interaction framework. If you have used Vue.js or Angular.js especially Alpine.js will be easy to wrap your head around because it is the same syntax as Angular.js.
Installation
There are two ways to install Alpine.js
- Include the CDN link using <script>
- Import it as a module
Include the CDN link using <script>
<html>
<head>
...
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
...
</html>
Here, you have to put the version number in the CDN link.
Import it as a module
npm install alpinejs
Then, include it in your script
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
Common Alpine.js directives
Alpine.js has 14 built-in directives. In the below sections, we will learn about the basic directives.
- x-data → used to declare a new component and provides the reactive data for that component.
- x-show → toggles expression (true or false).
- x-bind → set attribute value to JavaScript expression result.
- x-on → allows you to easily run code on dispatched DOM events.
- x-init → , when a component is initialized, runs an expression.
- x-if → toggling elements on the page like x-show.
- x-model → binds the value of an input element to Alpine data.
- x-for → to create new DOM elements by iterating through a list.
- x-text → sets the text content of an element to the result of a given expression.
- x-html → used to update the element innerHTML content.
- x-ref → used to retrieve the raw DOM elements.
- x-transition → used to apply classes to element transition stages.
- x-cloak → used for hiding pre-initialized reusability.
- x-spread → offers better reusability when binding Alpine directives to an object.
x-data
Syntax:
<div x-data="[JSON data object]">...</div>
Example:
<div x-data="{ message: 'Welcome' }">
<div x-text="message"></div>
</div>
x-show
Syntax:
<div x-show="[expression]"></div>
Example:
<script>
function show() {
return true
}
</script>
<div>
<div x-show="show()">Show</div>
<div x-show="false">Hide</div>
</div>
x-bind
Syntax:
<div x-bind:[attribute]="[expression]">...</div>
Example:
<div x-data="{ val: true }">
<input x-bind:disabled="val" type="text" />
</div>
x-on
Syntax:
<div x-on:[event]="[expression]"></div>
Example:
<script>
function clickHandler(e) {
console.log("Clicked")
}
</script>
<div>
<button x-on:click="clickHandler">Click</button>
</div>
x-init
Syntax:
<div x-data="..." x-init="[expression]"></div>
Example:
<script>
function setOpen() {
this.open = false
}
</script>
<div x-data="{ open: true }" x-init="setOpen()">
<div>Open?: <span x-text="open"></span></div>
</div>
x-if
Syntax:
<template x-if="[expression]"><div>...</div></template>
Example:
<div x-data="{ val: true }">
<template x-if="val">
<div>Renders on x-if directive.</div>
</template>
</div>
x-model
Syntax:
<div x-model="[data item]"></div>
Example:
<div x-data="{ val: 'Nnamdi' }">
<input type="text" x-model="val" />
</div>
x-for
Syntax:
<template x-for="[data] in [data]"><div>...</div></template>
Example:
<div x-data="{ fruits: ['orange', 'mango', 'lime' ] }">
<h3>List of fruits</h3>
<template x-for="fruit in fruits">
<div x-text="fruit"></div>
</template>
</div>
x-text
Syntax:
<div x-text="[expression]"></div>
Example:
<div x-data="{ text: 'I am Chidume' }">
<span x-text="text"></span>
</div>
x-html
Syntax:
<div x-html="[expression]"></div>
Example:
<div x-data="{ html: '<i>I am Chidume</i>' }">
<span x-html="html"></span>
</div>
x-ref
Syntax:
Example:
<div x-ref="title"><span>Title</span></div>