Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markmead/alpinejs-tash
Use a more familiar syntax when rendering Alpine JS `{variables}` 🚀
https://github.com/markmead/alpinejs-tash
alpine-js alpinejs alpinejs-data alpinejs-directive alpinejs-plugin angular hacktoberfest javascript react svelte
Last synced: 7 days ago
JSON representation
Use a more familiar syntax when rendering Alpine JS `{variables}` 🚀
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-tash
- Owner: markmead
- License: mit
- Created: 2021-12-05T16:41:36.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T10:50:30.000Z (7 months ago)
- Last Synced: 2024-10-14T08:24:38.433Z (21 days ago)
- Topics: alpine-js, alpinejs, alpinejs-data, alpinejs-directive, alpinejs-plugin, angular, hacktoberfest, javascript, react, svelte
- Language: JavaScript
- Homepage: https://js.hyperui.dev/examples/utility-variable-interpolation
- Size: 25.4 KB
- Stars: 92
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - Alpine.js Tash - Render data in moustache syntax
README
# 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
```html
```
### With a Package Manager
```shell
npm i -D alpinejs-tash
yarn add -D alpinejs-tash
```
```js
import Alpine from 'alpinejs'
import tash from 'alpinejs-tash'
Alpine.plugin(tash)
window.Alpine = Alpine
Alpine.start()
```
## Example
### Plugin
```html
Hello, I am {name}! I am {age} years old and I currently work at {company}!
```
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
