# Alpine.js - lazy load assets
This package provides directives for lazy loading JavaScript and CSS assets in [Alpine.js](https://alpinejs.dev/) projects.
**Note:** This package is specifically designed for lazy loading css/js assets but does **_not_** handle lazy loading of Alpine components. You should use [Async Alpine](https://async-alpine.dev/) for that.
However, it is the perfect companion to use alongside Async Alpine to lazy load all the assets required by your Alpine.js components.
## Features
- Lazily load CSS and JS files on-demand.
- Prevent redundant loading of the same asset.
- Saves loaded assets in Alpine global state to avoid reloading them, and to check asset existence.
- Position scripts in head, body-start or body-end.
- Optionally dispatch window events when assets have finished loading.
## Installation
## CDN
Laravel Filament users, see end of page.
```html
```
## NPM
```bash
npm install alpine-lazy-load-assets -D
```
#### Script Bundle
To add the `x-load-css` and `x-load-js` directives to your project, register the plugin with Alpine.js.
```js
import Alpine from 'alpinejs';
import AlpineLazyLoadAssets from 'alpine-lazy-load-assets';
Alpine.plugin(AlpineLazyLoadAssets);
window.Alpine = Alpine;
window.Alpine.start();
```
#### Script include
```js
import AlpineLazyLoadAssets from 'alpine-lazy-load-assets'
document.addEventListener('alpine:init', () => {
window.Alpine.plugin(AlpineLazyLoadAssets)
})
```
#### Livewire v3
```js
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import AlpineLazyLoadAssets from 'alpine-lazy-load-assets';
Alpine.plugin(AlpineLazyLoadAssets);
Livewire.start();
```
# Usage
### x-load-js
* The `x-load-js` directive adds a `