Advanced

Whether you hand-write your components or use a bundler, Async Alpine can import multiple components from the same file using unique ES module exports, as below:

// publicly available at `/assets/multiple-components.js`
export function thisComponent() {
  return { /* component */ }
}

export function otherComponent() {
  return { /* component */ }
}

// where you initialise Alpine and your components
Alpine.asyncUrl('thisComponent', './assets/multiple-components.js');
Alpine.asyncUrl('otherComponent', './assets/multiple-components.js');

To do this you should name your component to match your ESM export name to allow for differentiating component functions. How this works is by trying a set of exports in order of reduced specificity:

1. module[componentName]
2. module.default
3. module[0]

This is a more advanced strategy, as there are some performance considerations using this method. For a single component loading, it will download the entire file and use just the single export specified. So use this where it's likely all components will be used once one has been loaded.

We don't include file-based caching in Async Alpine core, however as it uses ES Modules these modules are still available in the module graph and as long as HTTP caching is configured correctly it doesn't result in significant overhead.

Although the primary purpose of Async Alpine is to load JavaScript component modules, it could be useful to use it's capabilities for delayed initialisation of Alpine components or elements within a component. When an element doesn't have a download function declared via one of the download methods, Async Alpine will manage the execution of the component when the loading strategy is met. This means you can use it with an empty or inline x-data component, or even any element within an Alpine component, like the following:

<!-- delaying the initialisation of a component
with inline x-data until it's visible -->
<div
  x-load="visible"
  x-data="{
    message: 'loaded'
  }"
  x-html="message"
></div>

<!-- delaying the initialisation of an element within
a normal alpine component until it's visible -->
<div x-data>
  <div
    x-load="visible"
    x-html="'loaded'"
  ></div>
</div>

Advanced options are provided with the Alpine.asyncOptions() function as an object. As an example here we change the default loading strategy:

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

For a script installation, advanced options can be specified by setting window.AsyncAlpineOptions to the object as above.

Async Alpine provides asynchronous loading of Alpine components, you may also want to load a component CSS or a non-Alpine JS file asynchronously.

You can do this with the Alpine plugin Alpine.js - Lazy Load Assets. This plugin adds Alpine.js directives to load CSS and JavaScript files when the component initialises.

Alternatively, it can be included within the initialisation of your component without a plugin:

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