markmead / alpinejs-tash

Use a more familiar syntax when rendering Alpine JS `{variables}` 🚀

Alpine JS Tash

Use a more familiar syntax when rendering Alpine JS {variables} 🚀

Install

It's very easy to install Alpine JS plugins! 🙌

With a CDN

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

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

With a Package Manager

npm i -D alpinejs-tash

yarn add -D alpinejs-tash

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

Alpine.plugin(tash)

window.Alpine = Alpine

Alpine.start()

Example

Plugin

<div x-data="{ name: 'John Doe', age: 50, company: 'GitHub' }">
  <p x-tash="name, age, company">
    Hello, I am {name}! I am {age} years old and I currently work at {company}!
  </p>

  <!-- Hello, I am John Doe! I am 50 years old and I currently work at GitHub! -->
</div>

You don't have to use {variable} as your syntax.

If you prefer Vue syntax use x-tash.vue and you can write {{ variable }} 🐸

If you prefer Angular syntax use x-tash.angular and you can write {{variable}} 🦞

By default it will use the {variable} syntax that React, Svelte, Solid, Astro... And many others use.

All variables you pass to x-tash use Alpine JS reactivity!

Stats