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!
Install Async Alpine
Permalink to “Install Async Alpine”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@2.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>Components
Permalink to “Components”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!
Wiring it up
Permalink to “Wiring it up”Now we set up our component within our HTML and let Async Alpine know where to find the component file:
<div
x-load
x-load-src="/components/my-component.js"
x-data="myComponent('message')"
>
...
</div>In the snippet above, x-load indicates this is an Async component and the x-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.
Success!
Permalink to “Success!”Now our component will only be loaded when it's present on the page. We can pass different strategies into the x-load attribute to control how it should load:
x-load="visible"— load the component when it's visible within the viewport;x-load="media (min-width: 768px)"— only load the component when the screen is wider than 768px.x-load="event"— wait for a JavaScript event to load!