### CDN Installation for Async Alpine.js and Alpine.js

Source: https://async-alpine.dev/docs/index

Installs Async Alpine.js and Alpine.js using CDN links. Async Alpine must be loaded before Alpine.js. This method is simple for quick setups.

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

--------------------------------

### HTML Setup for Async Alpine.js Component Loading

Source: https://async-alpine.dev/docs/index

Sets up an HTML element to load an Async Alpine.js component. The `x-load` attribute marks it as an async component, `x-load-src` specifies the component file, and `x-data` initializes the component.

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

--------------------------------

### Install Async Alpine via npm

Source: https://async-alpine.dev/docs/install

Install Async Alpine using npm and import it into your JavaScript bundle. This method requires registering Async Alpine as a plugin before starting Alpine.js.

```bash
npm install async-alpine
```

```javascript
import AsyncAlpine from 'async-alpine';  
import Alpine from 'alpinejs';  
Alpine.plugin(AsyncAlpine);  
Alpine.start();
```

--------------------------------

### Initialize Async Alpine Plugin (JavaScript)

Source: https://async-alpine.dev/docs/upgrade

Demonstrates how to initialize Async Alpine as a plugin for Alpine.js. This replaces the previous `AsyncAlpine.init` and `AsyncAlpine.start` calls with `Alpine.plugin(AsyncAlpine)`.

```javascript
import AsyncAlpine from 'async-alpine';
import Alpine from 'alpinejs';

// Old initialization (commented out):
// AsyncAlpine.init(Alpine);
// AsyncAlpine.start();

// New initialization:
Alpine.plugin(AsyncAlpine);
Alpine.start();
```

--------------------------------

### Configure Async Alpine Options (JavaScript)

Source: https://async-alpine.dev/docs/upgrade

Illustrates how to set global options for Async Alpine using the `Alpine.asyncOptions` function. This replaces the previous `prefix` and `alpinePrefix` options, which should now be configured using `Alpine.prefix`.

```javascript
Alpine.asyncOptions({
  defaultStrategy: 'visible'
});

// Other functions like Alpine.asyncUrl, Alpine.asyncData, Alpine.asyncAlias can be used subsequently.
```

--------------------------------

### Configure Async Alpine Options

Source: https://async-alpine.dev/docs/advanced

Shows how to configure advanced options for Async Alpine, such as changing the default loading strategy. This can be done programmatically using `Alpine.asyncOptions()` or by setting `window.AsyncAlpineOptions` for script installations.

```javascript
Alpine.asyncOptions({
	defaultStrategy: 'media (max-width:800px)'
})
```

--------------------------------

### ES Module Component Definition for Async Alpine.js

Source: https://async-alpine.dev/docs/index

Defines an Alpine.js component as an ES Module. This standalone file can be imported and used with Async Alpine.js. It includes initialization logic.

```javascript
// /components/my-component.js  
export default function myComponent(message) {  
	return {  
		message: message,  
  
		init() {  
			console.log('you said', message)  
		}  
	}  
}
```

--------------------------------

### Update HTML Attributes for Async Loading (HTML)

Source: https://async-alpine.dev/docs/upgrade

Shows the renaming of HTML attributes for asynchronous component loading. `ax-load` and `ax-load-src` are replaced with `x-load` and `x-load-src` respectively, maintaining the same syntax.

```html
<div x-data="myComponent"
  x-load="visible"
  x-load-src="/assets/path-to-component.js">
</div>
```

--------------------------------

### Media Query Loading Strategy for Async Alpine Components

Source: https://async-alpine.dev/docs/strategies

The 'media' strategy loads components when a specified media query evaluates to true, using `window.matchMedia`. This is useful for components that are interactive only under certain conditions, such as specific viewport widths or reduced motion preferences.

```html
<div  
  x-load="media (max-width: 820px)"  
  x-data="componentName"  
></div>  
  
<div  
  x-load="media (prefers-reduced-motion: no-preference)"  
  x-data="componentName"  
></div>
```

--------------------------------

### Basic Async Component Initialization with x-load

Source: https://async-alpine.dev/docs/usage

Demonstrates how to initialize an Alpine.js component asynchronously by adding the `x-load` attribute to an HTML element. The `x-load` attribute specifies the loading strategy (e.g., 'visible'), and `x-data` links to the component definition.

```html
<div  
  x-load="visible"  
  x-data="myComponent"  
>
  <div x-text="message"></div>
</div>
```

--------------------------------

### Configuring Component Alias Loading with Async Alpine

Source: https://async-alpine.dev/docs/usage

Explains how to use the `.asyncAlias()` method to specify a consistent URL structure for component files. Async Alpine can then construct the component URL based on the provided pattern or a function, simplifying management when components follow a predictable layout.

```javascript
// components are in the /components/ directory named componentName.js
Alpine.asyncAlias('/components/[name].js')

// components are in the separate directories as index.js
Alpine.asyncAlias('/components/[name]/index.js')

// provide an alias function which receives the `name` parameter, particularly handy for build tools
Alpine.asyncAlias((name) => import(`/components/${name}.module.js`));
```

--------------------------------

### Registering Component with Dynamic Import using Async Alpine

Source: https://async-alpine.dev/docs/usage

Demonstrates how to register a component using `Alpine.asyncData()`, which is particularly useful with build tools that support dynamic imports and code-splitting. The second argument is a function that returns a Promise resolving to the component module.

```javascript
import AsyncAlpine from 'async-alpine';
import Alpine from 'Alpine.js';
Alpine.plugin(AsyncAlpine);
Alpine.asyncData(
	'myComponent',
	() => import('./components/my-component.js')
);
Alpine.start();
```

--------------------------------

### Registering Component URL with Async Alpine

Source: https://async-alpine.dev/docs/usage

Illustrates how to register a component's URL with Async Alpine.js using the `.asyncUrl()` method. This allows Async Alpine to download and load the specified component when its `x-load` conditions are met.

```javascript
import AsyncAlpine from 'async-alpine';
import Alpine from 'Alpine.js';
Alpine.plugin(AsyncAlpine);
Alpine.asyncUrl('myComponent', './components/my-component.js');
Alpine.start();
```

--------------------------------

### Combining Async Alpine Strategies with Logic Expressions

Source: https://async-alpine.dev/docs/strategies

Async Alpine allows combining multiple strategies using logical operators (`&&`, `||`) and brackets for complex loading conditions. This enables sophisticated behavior, such as loading a component when it's visible and either an event has fired or a specific screen width is met.

```html
<div  
  x-load="visible && (event || media (min-width: 1024px))"  
  x-load-src="/assets/path-to-component.js"  
  x-data="componentName"  
></div>
```

--------------------------------

### Eager Loading Strategy for Async Alpine Components

Source: https://async-alpine.dev/docs/strategies

The 'eager' strategy loads components immediately upon page load with the highest priority. This is suitable for components present on the initial page view or those requiring immediate interactivity. It ensures components load quickly, similar to default Alpine behavior.

```html
<div  
  x-load  
  x-data="myHeroComponent"
></div>  
  
<div  
  x-load="eager"  
  x-data="navigation"  
></div>
```

--------------------------------

### Inline Component Loading with x-load-src

Source: https://async-alpine.dev/docs/usage

Shows how to specify the component's JavaScript URL directly within the HTML using the `x-load-src` attribute. This method is useful when asset URLs are managed in HTML, such as with CDNs or versioning systems.

```html
<div  
  x-load="visible"  
  x-load-src="/assets/path-to-component.js"  
  x-data="myComponent"  
>
  <div x-text="message"></div>
</div>
```

--------------------------------

### Event Loading Strategy for Async Alpine Components

Source: https://async-alpine.dev/docs/strategies

The 'event' strategy loads components upon receiving a specified event on `window`. You can provide the event name in brackets or rely on the default `async-alpine:load` event. This strategy is highly flexible, allowing components to load based on custom triggers or interactions from other libraries.

```html
<!-- on a button click using Alpine's $dispatch -->  
<button x-data @click="$dispatch('async-alpine:load', { id: 'my-component-1' })">Load component</button>  
<div  
  id="my-component-1"  
  x-load="event"  
  x-data="componentName"  
></div>  
  
<!-- load our component after another library emits the `another-library-init` event -->  
<div  
  x-load="event (another-library-init)"  
  x-data="componentName"  
></div>
```

--------------------------------

### Visible Loading Strategy for Async Alpine Components

Source: https://async-alpine.dev/docs/strategies

The 'visible' strategy employs `IntersectionObserver` to load components only when they enter the viewport, akin to lazy-loading images. An optional `rootMargin` can be specified to trigger loading as the component approaches the viewport. This is ideal for components not in the initial view.

```html
<div  
  x-load="visible"  
  x-data="componentName"  
></div>  
  
<!-- using custom `rootMargin` -->  
<div  
  x-load="visible (100px 100px 100px 100px)"  
  x-data="componentName"  
></div>
```

--------------------------------

### Idle Loading Strategy for Async Alpine Components

Source: https://async-alpine.dev/docs/strategies

The 'idle' strategy utilizes `requestIdleCallback` (or a fallback delay) to load components when the main thread is less busy. This is best for non-critical components, allowing more important tasks like initial rendering and other JS to take priority.

```html
<div  
  x-load="idle"  
  x-data="productCarousel"  
></div>
```

--------------------------------

### Dynamically Load Alpine Component with Shopify Asset URL

Source: https://async-alpine.dev/docs/usage

This snippet shows how to use Alpine.js's `x-load` and `x-load-src` directives to load a component asynchronously. It's particularly useful for platforms like Shopify, where asset URLs are often managed through versioning or CDNs. The `x-load="visible"` attribute ensures the component loads when it becomes visible, and `x-load-src` points to the asset URL generated by Shopify's `asset_url` filter.

```html
<div  
  x-load="visible"  
  x-load-src="{{ 'my-component.js' | asset_url }}"  
  x-data="myComponent"
></div>
```

--------------------------------

### Delay Component Initialization with x-load

Source: https://async-alpine.dev/docs/advanced

Demonstrates how to delay the initialization of Alpine.js components or elements within a component until a specific loading strategy (e.g., 'visible') is met. This is achieved using the `x-load` directive.

```html
<div 
  x-load="visible"  
  x-data="{
    message: 'loaded'
  }"  
  x-html="message"
></div>

<div x-data>
  <div 
    x-load="visible"
    x-html="'loaded'"
  ></div>
</div>
```

--------------------------------

### ES Module Component Definition for Async Loading

Source: https://async-alpine.dev/docs/usage

Shows the structure of a standalone ES Module JavaScript file for an Alpine.js component. The component is exported as a default function, which Async Alpine can then import and initialize.

```javascript
// publicly available at `/assets/path-to-component.js`
export default function myComponent() {
  return {
    message: '',
    init() {
      this.message = 'my component has initialised!'
    }
  }
}
```

--------------------------------

### Asynchronously Load CSS and JavaScript

Source: https://async-alpine.dev/docs/advanced

Illustrates how to asynchronously load external CSS and JavaScript files within an Alpine.js component's initialization. This method bypasses the need for a separate plugin and directly manipulates the DOM to append script and link tags.

```html
<div 
	x-load="visible"
  x-data="{
    init() {
      const head = document.getElementsByTagName('head')[0]

      // add script
      const newScript = document.createElement('script')
      newScript.src = '/assets/my-asset.js'
      head.appendChild(newScript)

      // add CSS file
      const newCSS = document.createElement('link')
      newCSS.src = '/assets/my-asset.css'
      newCSS.rel = 'stylesheet'
      head.appendChild(newCSS)
    }
  }"
></div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.