Alpine JS Axios

Alpine JS magic methods wrapper for Axios API methods 📨

Install

$3

``html
defer
src="https://unpkg.com/alpinejs-axios@latest/dist/api.min.js"
>


`

$3

`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

$3

`html


`html


`html


`html


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


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]._

$3

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

@click="productData = await $get('https://dummyjson.com/products/1[data.title, data.price]')"
>
Get