Getting Started

There are several methods of installing Async Alpine depending on how you set up Alpine and how you manage your JavaScript.

To get started, let's set up a page with the CDN installation and inline components. This may not be the best for you, but is the easiest!

Add script elements for Async Alpine and Alpine.js. Async Alpine has to be loaded first:

<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>

More on installation

The easiest way to use Async Alpine is with ES Module components using export default in standalone files. If you write your JavaScript by hand, you'll want to write your Alpine.js components so they look like this:

// /components/my-component.js
export default function myComponent(message) {
	return {
		message: message,

		init() {
			console.log('you said', message)
		}
	}
}

Make sure this file is in a publicly-accessible location within your website!

More on components

Now we set up our component within our HTML and let Async Alpine know where to find the component file:

<div
	ax-load
	ax-load-src="/components/my-component.js"
	x-data="myComponent('message')"
	x-ignore
>
	...
</div>

In the snippet above, ax-load indicates this is an Async component and the ax-load-src attribute points to the URL of our component file.

Make sure to add your x-data attribute as you would normally with Alpine.js, and you also need to add the x-ignore attribute to your components.

Getting Started

Install Async Alpine

Components

Wiring it up

Success!

Next Steps