will x-ajax be added?

[laoshaw]

something like https://www.npmjs.com/package/@imacrayon/alpine-ajax

I know vue.js does not have ajax builtin, what's the best(easiest) approach for alpine.js to do ajax calls? fetch? axios? even htmx(for html response), what about alpine.js add x-ajax directly?

[Lomacar]

I have just the answer for you. https://codepen.io/lomacar/pen/JjJBpeo?editors=1011

Use my grab() function inside the x-data, and supply the function with one or more variables that point to objects. Those objects in turn contain one or more strings which are URLs to you data, like so:

const paths = {
  items: 'https://fakestoreapi.com/products',
  books: 'https://www.googleapis.com/books/v1/volumes?q=Alpine'
}

When the data is loaded the x-data will init itself and fill your template. Feel free you use and modify as you please. I suppose it could be made into an Alpine magic function if you wanted to, but it's not necessary.

[Lomacar]

Oh yeah, I forgot to say that the stringy objects load the data onto the same keys where the strings were.

[imacrayon]

👋 creator of Alpine AJAX here. I recently added a lot of new functionality to the package and launched a documentation site. Feedback and contributions are welcome!

It would be cool to see some of these features merged into core, but I think it makes just as much sense to keep it third-party. I’m happy to keep the Alpine AJAX project maintained as I’ve got several applications using it.

[CyBueze]

Permission to use x-target in my page routes, sir

[ekwoka]

I would doubt it.

There is a loose plan for an SPA mode of alpine, but it's mostly just outside the scope of alpine now. Livewire works with alpine to provide this functionality to laravel apps.

But mainly, just use fetch. Axios is crap, and most cases don't make a lot of sense.

Also, I made an x-ajax plugin to mess around (https://www.npmjs.com/package/@ekwoka/x-ajax)

Broadly speaking it's just using Alpine kind of in the wrong way I'd say.

[simonferndriger]

PS: In my personal experience, AlpineJS is doing a great job and is indeed a great choice already for creating (simple) SPAs. The only thing I was struggling with was the (path and hash) routing.

[ekwoka]

That is safe and stable. It's just very unrefined. Nothing about it's API would be changing, and I will likely fix any bugs you run into, but it's very much a tiny brick. But for a lot of cases it could do a lot of basic things you might do with like htmx.

But i have no idea if the jsdelivr script would actually work. I do not support static CDNs. Looks like you'd still have to import it as a module.

[laoshaw]

what about https://alpine-ajax.js.org/ for alpine-ajax for ajax in alpine?
use either fetch or ajax in alpine, I don't see the need of htmx much anymore, in fact I would say htmx needs alpinejs more for client-side interactivity. alpinejs can do without htmx just fine(due to fetch/ajax which is really what htmx is about)
it will be super cool to make alpinejs a "vue1.x" with simple routing and state management built-in, that will be the best lightweight SPA(something like mithril, but better)

[simonferndriger]

@ekwoka
What is recommendation recarding (fetch) caching? In case there is a breaking change in one of the external files loaded with x-ajax, do I need to add a version parameter to the url (include.html?v=x.x.x) or is the browser usually clever enough to reload it if needed?

[ekwoka]

The most ideal situation is that you hash all of your files into the name.

So like main.akc52638.js

This is what most bundlers do.