https://github.com/markmead/alpinejs-axios
Alpine JS magic methods wrapper for Axios API methods 📨
https://github.com/markmead/alpinejs-axios
alpinejs alpinejs-data alpinejs-plugin axios axios-plugin
Last synced: about 1 year ago
JSON representation
Alpine JS magic methods wrapper for Axios API methods 📨
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-axios
- Owner: markmead
- License: mit
- Created: 2023-10-03T15:12:30.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T08:13:45.000Z (about 1 year ago)
- Last Synced: 2025-03-24T20:12:30.034Z (about 1 year ago)
- Topics: alpinejs, alpinejs-data, alpinejs-plugin, axios, axios-plugin
- Language: JavaScript
- Homepage:
- Size: 146 KB
- Stars: 26
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS Axios
Alpine JS magic methods wrapper for Axios API methods 📨
## Install
### With a CDN
```html
```
### With a Package Manager
```shell
yarn add -D alpinejs-axios
npm install -D alpinejs-axios
```
```js
import Alpine from 'alpinejs'
import api from 'alpinejs-axios'
Alpine.plugin(api)
Alpine.start()
```
## Example
### GET
```html
Get
```
### POST
```html
Create
```
### PUT/PATCH
```html
Update
```
### DELETE
```html
Delete
```
## Filtering the Response
A lot of the times you only need a property from the response object, this is
usually `data`. You'll see/write stuff like this:
```js
const { data } = axios.get('https://dummyjson.com/products/1')
```
With this package you can do that by adding `[data]` to the end of the URL.
```html
Get
Get
```
This works for all the requests and isn't limited to the `data` property.
Anything that is part of the response object can be used to filter the response.
For example, `[status]`.
_Heads up! Syntax is important, the filter property key must be place in square
brackets `[x]`._
### Nested Filters
Sometimes you don't want the whole object back, in this example `data` returns a
lot of information but we only want `title` and `price` back. Here's how you can
do that.
```html
Get
```
This will return with the first key, in this case `data` omitted.
```json
{
"title": "iPhone 9",
"price": 549
}
```
_Note! You can still pass other filters in when using nested filters, something
like `[data.title, status]` will work fine!_
## Stats
