Плагины

Плагины добавляют в Alpine новые директивы и магические свойства. У Alpine есть официальные плагины для типовых задач: сохранить данные между перезагрузками, удержать фокус в модальном окне, узнать, что элемент появился на экране, плавно раскрыть блок.

Подключение

Через CDN скрипт плагина ставят в index.html перед скриптом Alpine. Первый пример — плагин collapse, он плавно раскрывает блок по высоте директивой x-collapse:

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ open: false }">
  <button @click="open = !open">Описание задачи</button>
  <div x-show="open" x-collapse>
    <p>Купить молоко 2,5%, литр. Зайти в магазин после работы.</p>
  </div>
</div>

Блок не появляется рывком, а плавно выезжает вниз и так же сворачивается.

В проекте с npm плагин устанавливают пакетом и регистрируют в src/main.js до Alpine.start():

npm install @alpinejs/collapse

// src/main.js
import Alpine from 'alpinejs';
import collapse from '@alpinejs/collapse';
 
Alpine.plugin(collapse);
Alpine.start();

persist: сохранение данных

Плагин @alpinejs/persist добавляет $persist. Обёрнутое им значение сохраняется в localStorage и восстанавливается после перезагрузки страницы:

<!-- index.html, после подключения @alpinejs/persist и Alpine -->
<div x-data="{ tasks: $persist([]).as('todo-tasks') }">
  <button @click="tasks.push('Задача ' + (tasks.length + 1))">Добавить</button>
  <p x-text="tasks.join(', ')"></p>
</div>

Добавьте несколько задач и обновите страницу — они останутся. Метод .as() задаёт ключ в хранилище. Этот пример не запускается на странице урока: окну результата запрещён доступ к localStorage.

focus: ловушка фокуса

Плагин @alpinejs/focus добавляет директиву x-trap. Пока её значение истинно, клавиша Tab переводит фокус только между элементами внутри блока — это нужно модальным окнам:

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ open: false }">
  <button @click="open = true">Новая задача</button>
  <div x-show="open" x-trap="open" style="border: 1px solid #ccc; padding: 8px">
    <input placeholder="Название">
    <button @click="open = false">Закрыть</button>
  </div>
</div>

После открытия курсор сразу стоит в поле, и Tab переключает только поле и кнопку «Закрыть».

intersect: появление на экране

Плагин @alpinejs/intersect добавляет x-intersect: выражение выполняется, когда элемент попадает в видимую область. Так подгружают следующую страницу списка:

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ count: 10 }" style="height: 150px; overflow: auto; border: 1px solid #ccc">
  <template x-for="i in count">
    <p x-text="'Задача ' + i"></p>
  </template>
  <div x-intersect="count += 10; console.log('Загружено:', count)">Загрузка…</div>
</div>

Прокрутите блок вниз — каждый раз, когда показывается «Загрузка…», добавляются ещё десять задач, а консоль печатает их число. Модификатор .once выполняет выражение только при первом появлении.

Частая ошибка

Поставить скрипт плагина после скрипта Alpine. Alpine запускается раньше, чем плагин зарегистрируется, и директива вроде x-collapse просто не работает: блок появляется без анимации. Плагины подключают выше Alpine, а в npm-проекте вызывают Alpine.plugin() до Alpine.start().