v2.0.0

I'm thrilled to announce Async Alpine 2, a complete rewrite based on Alpine's plugin system. This reduces the library size and improves performance*, and makes it much easier to install and use. 🚀

Async Alpine 2 has all the great functionality of v1, however there are some syntax changes so it’s not backwards-compatible. Upgrading is relatively easy with straightforward changes that are often possible with a simple search & replace.

🚀 How to upgrade

To make upgrading as seamless as possible, I’ve put together an Upgrade Guide with everything you need to know. Here's a quick overview:

1. Update your CDN link to 2.x.x or run npm install async-alpine@latest for the latest version.

2. Adjust the plugin initialisation in your JavaScript:

  import AsyncAlpine from 'async-alpine';
  import Alpine from 'alpinejs';
- AsyncAlpine.init(Alpine);
- AsyncAlpine.start();
+ Alpine.plugin(AsyncAlpine);
  Alpine.start();

3. Switch the old attributes from ax-load to the new x-load format:

  <div
    x-data="myComponent"
-   ax-load="visible"
-   ax-load-src="/assets/path-to-component.js"
+   x-load="visible"
+   x-load-src="/assets/path-to-component.js"
  ></div>

4. Update your JS APIs for component loading:

• AsyncAlpine.url → Alpine.asyncUrl
• AsyncAlpine.data → Alpine.asyncData
• AsyncAlpine.alias → Alpine.asyncAlias

Other changes

• Removed prefix and alpinePrefix options — use Alpine.prefix instead;
• x-ignore is now optional, even for dynamically inserted components.
• New keepRelativeURLs option to maintain JS-relative URLs;
• Added Playwright for automated testing.
• Simplified the build process for easier maintenance and reduced dependencies.
• Adopted new style rules and updated ESLint.

Full Changelog: 1.2.2...2.0.0

* The ESM file (unminified, uncompressed) has reduced to 7.63kB, a 22% improvement from v1.2.2. Runtime performance improvement comes from the removal of functionality duplicated by Async Alpine and Alpine.js core, most significantly mutation observers.