https://github.com/rameel/ramstack.alpinegear.js
Introduces additional Alpine.js directives, magic functions, and utilities to enhance developer productivity.
https://github.com/rameel/ramstack.alpinegear.js
alpine-js alpinejs
Last synced: 11 months ago
JSON representation
Introduces additional Alpine.js directives, magic functions, and utilities to enhance developer productivity.
- Host: GitHub
- URL: https://github.com/rameel/ramstack.alpinegear.js
- Owner: rameel
- License: mit
- Created: 2024-09-26T13:45:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-16T15:13:24.000Z (about 1 year ago)
- Last Synced: 2025-06-26T06:05:25.203Z (11 months ago)
- Topics: alpine-js, alpinejs
- Language: JavaScript
- Homepage:
- Size: 279 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ramstack.AlpineGear.js
[](https://www.npmjs.com/package/@ramstack/alpinegear-main)
[](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE)
**`Ramstack.AlpineGear.js`** provides useful and convenient plugins for [Alpine.js](https://alpinejs.dev/).
## Included Plugins
**[@ramstack/alpinegear-bound](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/bound)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/bound))
Provides the `x-bound` directive, which allows for two-way binding of input elements and their associated data properties. It works similarly to the binding provided by [Svelte](https://svelte.dev/docs/element-directives#bind-property) and also supports synchronizing values between two `Alpine.js` data properties.
```html
...
For other examples, see README
```
**[@ramstack/alpinegear-format](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/format)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/format))
Provides `x-format` directive, which allows you to easily interpolate text using a template syntax similar to what's available in `Vue.js`.
```html
Message: {{ message }}
```
**[@ramstack/alpinegear-template](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/template)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/template))
Provides `x-template` directive, allowing to define a template once anywhere in the DOM and reference it by its ID.
This helps avoid duplicating templates, simplifying markup and making it easier to manage.
Moreover, it enables recursive templates, allowing you to create components like a **tree view** with ease,
something that would otherwise be quite complex to implement.
```html
{{ model.name }}
```
**[@ramstack/alpinegear-fragment](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/fragment)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/fragment))
Provides the `x-fragment` directive, allowing for fragment-like behavior similar to what's available in frameworks like `Vue.js` or `React`, where multiple root elements can be grouped together.
It is particularly useful when you want to avoid wrapping elements in unnecessary container tags.
```html
```
**[@ramstack/alpinegear-match](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/match)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/match))
Provides the `x-match` directive, which functions similarly to the `switch` statement in many programming languages, allowing to conditionally render elements based on matching cases.
```html
```
**[@ramstack/alpinegear-when](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/when)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/when))
Provides the `x-when` directive, which allows for conditional rendering of elements similar to `x-if`, but supports multiple root elements.
```html
```
**[@ramstack/alpinegear-hotkey](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/hotkey)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/hotkey))
Provides the `x-hotkey` directive, allowing easily handle keyboard shortcuts.
```html
Hello, World!
```
**[@ramstack/alpinegear-router](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/router)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/router))
Provides routing-related directives, enabling client-side navigation and routing functionality.
```html
```
**[@ramstack/alpinegear-destroy](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/destroy)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/destroy))
Provides `x-destroy` provides directive, which is the opposite of `x-init` and allows you to execute code when an element is removed from the DOM.
```html
Hello, World!
```
**[@ramstack/alpinegear-main](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/main)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/main))
Is a combined plugin that includes several directives, providing a convenient all-in-one package.
## Source Code
You can find the source code for this plugin on GitHub:
https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/main
## Contributions
Bug reports and contributions are welcome.
## License
This package is released as open source under the **MIT License**.
See the [LICENSE](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE) file for more details.