Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0wain/alpinejs-requests
✉️ Inline HTTP requests made simple for Alpine.js 🌲
https://github.com/0wain/alpinejs-requests
alpinejs alpinejs-networking alpinejs-plugin alpinejs-requests http
Last synced: 18 days ago
JSON representation
✉️ Inline HTTP requests made simple for Alpine.js 🌲
- Host: GitHub
- URL: https://github.com/0wain/alpinejs-requests
- Owner: 0wain
- Created: 2023-11-21T22:40:35.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-06-11T10:05:38.000Z (5 months ago)
- Last Synced: 2024-10-16T02:37:58.067Z (about 1 month ago)
- Topics: alpinejs, alpinejs-networking, alpinejs-plugin, alpinejs-requests, http
- Language: JavaScript
- Homepage:
- Size: 31.3 KB
- Stars: 13
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌲✉️ Alpine.js Requests
✉️ Inline HTTP requests made simple for Alpine.js 🌲
https://www.npmjs.com/package/alpinejs-requests
## What is Alpine.js Requests?
Alpine.js Requests aims to make HTTP requests easy within Alpine, allowing you to send AJAX requests without thinking twice.
The main use case for this package is for simple requests actions that do not require advance responses.
For example, you could use this package to easily send a POST request when a user presses the like button.
## Install
### NPM
Install the package with the following command:
```
npm i alpinejs-requests
```
Import and register the package:
```
import Alpine from 'alpinejs'
import requests from 'alpinejs-requests'
Alpine.plugin(requests)
Alpine.start()
```
### Script Tag
```
```
## Documentation
### x-post
`x-post` allows you to easily create a POST request on the click event of a DOM element.
In its simplest form, you can pass a string that will be used as the URL to send the POST request to.
```
Like
```
If required, additional data can be passed through the `x-post` directive.
```
Like
```
If you want to use the response from the POST request, you can access this through the `@post` event.
This event is called once the request has resolved. You can access the response object with `$event.detail.response`.
You can also access a "state" variable with `$event.detail.state`. This will be true/false depending on the success of the request.
```
```
A magic method of `$post` is also provided. This is useful for making quick requests inside other events.
```
Like
```
### x-get
`x-get` works essentially identically to `x-post`. Rather obviously, the only difference is that it makes a GET request instead of a POST request.
The functionality is identical in what can be passed to an `x-get`, and how the system resolves it. Something to note is that the event for a GET request
lands in the @get event.
```
Views
```
There is also a `$get` magic method.
```
Views
```
### x-request
`x-request` is the Alpine.js Request library in its freest form. It functions the same as `x-post` and `x-get`, but allows for the additional
definition of a method. This means you can define which method to use, including things like DELETE, PATH ect.
```
Delete
```
You can also use the magic method `$request`.