adplus-dvertising

Getting Started With Alpine.js

TLDR; Alpine.js is a JavaScript framework that enables us to enhance our JavaScript applications with their reactive and declarative nature.

Posted by Fathima Hassana on 2021-Sep-14

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

  1. Include the CDN link using <script>
  2. 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.

  1. x-data → used to declare a new component and provides the reactive data for that component.
  2. x-show → toggles expression (true or false).
  3. x-bind → set attribute value to JavaScript expression result.
  4. x-on → allows you to easily run code on dispatched DOM events.
  5. x-init → , when a component is initialized, runs an expression.
  6. x-if → toggling elements on the page like x-show.
  7. x-model → binds the value of an input element to Alpine data.
  8. x-for → to create new DOM elements by iterating through a list.
  9. x-text → sets the text content of an element to the result of a given expression.
  10. x-html → used to update the element innerHTML content.
  11. x-ref → used to retrieve the raw DOM elements.
  12. x-transition → used to apply classes to element transition stages.
  13. x-cloak → used for hiding pre-initialized reusability.
  14. 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>