Installation

There are two recommended methods of loading Async Alpine. Adding a script tag with a CDN or importing it into your bundle with npm.

Which method you use will depend on how you prefer to use and import Alpine.js.

If you load Alpine from a CDN like jsdelivr with a script tag you can load Async Alpine via the same method:

<script defer src="https://cdn.jsdelivr.net/npm/async-alpine@1.x.x/dist/async-alpine.script.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

When loading via this method you need to make sure that Async Alpine loads first. This is generally done by including the script tag for Async Alpine before Alpine. Watch out if you use type="module" or async on your script tags.

Install from npm with:

npm install async-alpine

Import it into your bundle alongside Alpine and run AsyncAlpine.init(Alpine) and AsyncAlpine.start() before Alpine.start():

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