Alpine на страницах с сервера

Главная сила Alpine — работа поверх HTML, который сформировал сервер. PHP, Laravel, Django или Rails выводят страницу целиком, а Alpine добавляет к ней поведение: меню, вкладки, фильтр по уже выведенному списку. Нужно лишь передать данные из серверного кода в x-data.

Данные из Laravel Blade

В Laravel шаблоны лежат в папке resources/views. Контроллер передаёт в шаблон массив задач, а директива Blade @js превращает его в безопасную запись JavaScript:

<!-- resources/views/tasks/index.blade.php -->
<div x-data="{ tasks: @js($tasks), filter: 'all' }">
  <select x-model="filter">
    <option value="all">Все</option>
    <option value="active">Активные</option>
  </select>
 
  <ul>
    <template x-for="task in tasks.filter(t => filter === 'all' || !t.done)" :key="task.id">
      <li x-text="task.title"></li>
    </template>
  </ul>
</div>

Сервер подставляет вместо @js($tasks) готовый массив объектов, и браузер получает обычный x-data с данными. Фильтр работает без запросов к серверу. Сам скрипт Alpine подключается в общем макете, например в resources/views/layouts/app.blade.php, или через Vite, как в уроке о подключении.

Данные из обычного PHP

Без Blade то же самое делают функцией json_encode, а результат экранируют htmlspecialchars, чтобы кавычки в данных не сломали атрибут. В шаблоне это одна строка: значение x-data собирается из json_encode($tasks) внутри htmlspecialchars(...). Директива @js в Laravel делает то же самое за вас.

Улучшение готовой разметки

Не обязательно переносить данные в JavaScript. Часто сервер выводит список как обычно, а Alpine лишь добавляет поведение:

<!-- resources/views/tasks/show.blade.php -->
<div x-data="{ open: false }">
  <h2>{{ $task->title }}</h2>
  <button @click="open = !open">Подробнее</button>
  <div x-show="open" x-cloak>
    {{ $task->description }}
  </div>
</div>

Текст задачи выводит Blade через {{ }}, а показ и скрытие описания делает Alpine. Без JavaScript страница по-прежнему содержит весь текст. Про x-cloak — следующий урок.

Livewire

Livewire — пакет Laravel, в котором компоненты интерфейса пишутся на PHP, а обновления страницы приходят с сервера. Livewire 3 уже содержит Alpine и подключает его сам, поэтому отдельный скрипт Alpine добавлять не нужно — иначе он запустится дважды. Внутри компонента Livewire объект $wire в выражениях Alpine даёт доступ к свойствам и методам PHP-компонента: например, @click="$wire.save()" вызывает метод save на сервере.

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

Писать :class у Blade-компонента, то есть у тега вида <x-button>. Для Blade двоеточие означает «значение — выражение PHP», и он попытается выполнить код Alpine как PHP. Чтобы Blade передал атрибут в HTML без изменений, пишут двойное двоеточие: ::class="{ active: open }". У обычных HTML-тегов в Blade-шаблоне одинарное двоеточие работает как обычно.