Tash

Если вы привыкли к записи переменных в React, Vue или Angular, то этот плагин поможет использовать более привычный синтаксис при отображении Alpine JS {переменных} 🚀.

Установка

Вы можете использовать этот плагин, включив его из тега <script> или установив с помощью менеджера пакетов.

Через CDN

Вы можете подключить CDN-сборку этого плагина с помощью тега <script>, только подключать нужно ДО основного JS-файла Alpine.

jsDelivr CDN

<!-- Tash Plugin -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs-tash@latest/dist/tash.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

unpkg CDN

<!-- Tash Plugin -->
<script defer src="https://unpkg.com/alpinejs-tash@latest/dist/tash.min.js"></script>

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

Через менеджер пакетов

Вы можете установить Tash для использования внутри вашей сборки следующим образом:

npm

npm i alpinejs-tash

pnpm

pnpm add alpinejs-tash

yarn

yarn add alpinejs-tash

Затем инициализируйте его в своей сборке:

import Alpine from 'alpinejs';
import tash from 'alpinejs-tash';

Alpine.plugin(tash);
Alpine.start();

Использование

Стиль React

<div x-data="{ name: 'Вася', age: 50, company: 'GitHub' }">
  <p x-tash="name, age, company">
    Привет, я {name}! Мне {age} лет и я работаю в {company}!
  </p>
</div>

Привет, я Вася! Мне 50 лет и я работаю в GitHub!

Стиль Vue

<div x-data="{ name: 'Вася', age: 50, company: 'GitHub' }">
  <p x-tash.vue="name, age, company">
    Привет, я {{ name }}! Мне {{ age }} лет и я работаю в {{ company }}!
  </p>
</div>

Привет, я Вася! Мне 50 лет и я работаю в GitHub!

Стиль Angular

<div x-data="{ name: 'Вася', age: 50, company: 'GitHub' }">
  <p x-tash.angular="name, age, company">
    Привет, я {{name}}! Мне {{age}} лет и я работаю в {{company}}!
  </p>
</div>

Привет, я Вася! Мне 50 лет и я работаю в GitHub!