Code splitting and lazy-loading components for Alpine.js!

Async Alpine is a wrapper around the Alpine.js JavaScript framework that allows you to load components asynchronously on-demand.

Alpine.js is a fantastic framework but with a large site with lots of components, the bundle size can start to become a performance problem!

Async Alpine allows you to split your components into multiple component files and only load them when they're needed, speeding up your first load!

Installation

Using a CDN:

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/async-alpine.script.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Using npm:

npm install async-alpine

For more info check out our Getting Started guide.

Documentation

Read our full documentation on our website.

Issues, Support, Requests and Contributions

If you've found an incompatibility, bug, limitation or have a feature request file an issue and we'll take a look.

For advice on how best to install or use Async Alpine or general questions about the project create a Discussion.

Have you found some bugs you want to help us fix, or do you have some great ideas that would improve Async Alpine? That's great! Before diving in file an Issue and let us know what you're planning and we can get you contributing!

License and Credits

This project is licensed under the Apache-2.0 license.

The full license is included at LICENSE.md, or at apache.org/licenses/LICENSE-2.0.

Copyright © 2022 Alistair Shepherd.