Alpine.js — это минималистичный JS-фреймворк, который чувствует себя как jQuery на минималках, но с модным синтаксисом. Vue и React — это уже тяжёлые ребята, которые хотят контролировать всё. Так вот, пихать Alpine в связку с ними — это как надеть кроссовки на костюм. Не запрещено, но странно. Иногда, правда, приходится.

Например: у тебя на проекте уже стоит Vue или React, но в углу надо сделать простенький «аккордеончик» или «show/hide блок», и поднимать ещё один компонент под это — это плевок в душу. Вот тут Alpine и заходит.

Alpine.js + Vue

Установка

npm install alpinejs
# или
yarn add alpinejs

После этого тащи его в main.js или main.ts:

import 'alpinejs'

Пример

<template>
  <div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open">
      Контент
    </div>
  </div>
</template>

Vue тут, по сути, просто молча смотрит в сторону и не мешает. Всё норм, пока Alpine рулит своим кусочком. Но если Vue решит перестроить DOM — Alpine может улететь в космос. Так что не думай, что это безглючная дружба.

Alpine.js + React

Подключение

Самый быстрый способ — просто бахнуть Alpine через <script> в public/index.html:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

Пример

function MyComponent() {
  return (
    <div className="alpine-component" x-data="{ open: false }">
      <button
        onClick={() => {
          const el = document.querySelector('.alpine-component');
          el.__x.$data.open = !el.__x.$data.open;
        }}
      >
        Toggle
      </button>
      <div x-show="open">
        Content
      </div>
    </div>
  );
}

Видишь это убожество с document.querySelector? Это не я издеваюсь, это реально так приходится. React полностью рулит своим DOM, Alpine думает, что он тут главный — в итоге один постоянно подрезает другого. Работает, но как костыль.

Подводные камни

  • Конфликты. Vue/React и Alpine оба считают DOM своим. Кто первый добежал, тот и прав.
  • Дебаг. Когда что-то ломается, ты долго не поймёшь, кто виноват — Alpine или твой «большой брат».
  • Продуктовый ад. Поддерживать такую мешанину через полгода — это как чистить сортир чужой кошки.

Итог

Alpine с Vue или React — это про «сделать быстро и забыть». Для маленьких интерактивных плюшек — норм вариант. Для чего-то серьёзного — забудь, иначе потом будешь материться в три этажа.

Если тебе нужен лёгкий JS поверх бэкенда — бери Alpine. Если у тебя уже есть Vue или React, то используй их как надо, а не лепи «гибрид Франкенштейна».