Alpine.js : comment l'utiliser dans un projet Laravel

Qu’est-ce que Alpine.js ?

Alpine.js est un framework JavaScript minimaliste créé dans le but d’accélérer le développement d’interfaces utilisateurs avancées. Imaginez-le comme un Vue.js dépouillé et plus pragmatique.

Êtes-vous prêts à aimer le JavaScript à nouveau ?

Comment installer Alpine.js dans un projet Laravel ?

Si vous avez déjà rêvé d’un framework JavaScript sans processus de compilation compliqué, vous allez être servis. Encore mieux, Alpine est extrêmement léger (9 Ko gzippé) et vous permettra de créer un composant en 5 minutes chrono, sans exagération. À la fin de ce tutoriel, il ne vous restera pas beaucoup d’efforts à fournir avant de créer quelque chose de concret.

Avec Vite, le serveur de développement JavaScript

Installez Alpine depuis le registry NPM :

npm i --save alpinejs

Ensuite, dans resources/js/app.js, écrivons un peu de JavaScript afin de créer une instance d’Alpine :

import Alpine from 'alpinejs'
 
Alpine.start()

Dans votre vue Blade, appelez votre JavaScript grâce à la directive Vite :

<!DOCTYPE html>
<html>
    <head>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body>
        …
    </body>
</html>

Enfin, démarrez Vite, le serveur de développement JavaScript :

yarn dev

Depuis un CDN

Avec un CDN tout est forcément plus simple et l’installation d’Alpine ne requiert qu’une seule ligne de code dans votre balise <head> (on peut remercier l’attribut defer).

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

Comment installer un plugin Alpine.js ?

Installer un plugin avec Vite

Pour cet exemple, nous allons choisir Intersect. Il permet d’exécuter du code JavaScript lorsque l’utilisateur atteint un élément donné lors de sa navigation :

npm i --save @alpinejs/intersect

Signalons le plugin à Alpine :

import Alpine from 'alpinejs'
import Intersect from '@alpinejs/intersect'
 
Alpine.plugin(Intersect)
 
Alpine.start()

Veillez bien à ce que Alpine.start() soit appelé après les plugins.

Installer un plugin depuis un CDN

L’utilisation d’un plugin Alpine.js est toujours aussi simple grâce à l’utilisation d’un CDN. En revanche, veillez à bien l’appeler avant Alpine.

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

Pfiou, c’était terriblement compliqué… 😅

Comment utiliser Alpine.js ?

Alpine.js est maintenant opérationnel sur notre projet et nous pouvons tester son bon fonctionnement en copiant/collant ce composant dans notre HTML :

<div x-data="{ count: 0 }">
    <button @click="count++">Increment</button>
 
    <span x-text="count"></span>
</div>

C’est aussi simple que ça ! Maintenant, laissez votre créativité s’exprimer grâce à ce formidable outil.

Aller plus loin avec Alpine.js

Si vous ne connaissez pas encore Alpine.js, je vous suggère l’excellente documentation officielle. Suivez le parcours suggéré et vous n’aurez aucun mal à prendre ce petit framework JavaScript en main.

Il me reste une chose à préciser qui vous fera gagner un temps précieux ; Alpine.js propose une série de plugins officiels très utiles. Ne perdrez pas votre temps à écrire plus de JavaScript que nécessaire en les réimplémentant vous-même ou à utiliser d’autres packages JavaScript open source :

Mask, qui permet de formater à la volée l’entrée d’un utilisateur dans un champ de texte ;
Intersect, qui permet d’exécuter du code lorsque l’utilisateur atteint un élément donné en scrollant ;
Persist, qui permet de conserver les états d’Alpine via l’API Web Storage ;
Focus, qui permet de gérer le focus sur votre page à la sauce Alpine.js.
Collapse, qui permet d’animer les transitions sur la hauteur.