Alpine JS Tash

Alpine JS plugin x-tash stops the need of <span x-text="xyz"> spam to render Alpine JS data 🥳

Example 👀

Core

Here's the old way of doing things with x-text from Alpine JS

<div x-data="{ name: 'Mark', age: 24, company: 'Neon & GetCandy' }">
  <p>
    Hello I am <span x-text="name"></span> and I am
    <span x-text="age"></span> years old, currently I work at
    <span x-text="company"></span>
  </p>
</div>

Plugin

Here's the new way of doing things with x-tash from the plugin

<div x-data="{ name: 'Mark', age: 24, company: 'Neon & GetCandy' }">
  <p x-tash="name,age,company">
    Hello I am {name} and I am {age} years old, currently I work at {company}
  </p>
</div>

You can add spaces after your commas in x-tash, it doesn't have to follow the example format

🙋 You don't have to render every variable

In the example if you only wanted to render the name and the age, then you can pass x-tash="name,age and {company} will be left alone! 🤩

Install 🌟

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

CDN

<script src="https://unpkg.com/[email protected]/dist/tash.min.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

NPM/Yarn

npm i -D alpinejs-tash

yarn add -D alpinejs-tash

Then you can register the plugin.

import Alpine from "alpinejs";
import tash from "alpinejs-tash";

Alpine.plugin(tash);

window.Alpine = Alpine;

Alpine.start();

Stats 📊

Here's some stats about the Alpine JS Tash package! As you can see, it's tiny 🤏