Does AlpineJS support awaiting asynchronous functions in x-init?

Does AlpineJS support awaiting async functions in x‑init?

No. In AlpineJS 3.x the x-init directive evaluates its expression synchronously. If you pass an async function or a Promise, Alpine treats the result as fire‑and‑forget – it does not pause rendering or wait for the Promise to settle.

What this means for your component

When the component mounts, Alpine immediately continues the lifecycle. Any UI that depends on data fetched in the async function will render with the initial state before the fetch completes. The framework does not provide a hook to pause or signal completion.

Recommended pattern to keep the UI consistent

• Define an async method inside x-data. Example:

  x-data="{ loading: true, data: null, async fetch() { try { this.data = await fetch('/api'); } finally { this.loading = false; } } }"
     x-init="fetch()">

• Use a loading flag. Initialize loading to true so the UI is hidden or shows a spinner until fetch() resolves.

  <div x-show="!loading">…content that uses data…</div>
  <div x-show="loading">Loading…</div>

• Wrap the await in try/catch or attach .catch() to the Promise. Errors are not surfaced by Alpine automatically.

  async fetch() {
    try {
      this.data = await fetch('/api');
    } catch (e) {
      console.error('Init error', e);
      this.error = e.message;
    } finally {
      this.loading = false;
    }
  }

Handling unhandled rejections

Alpine does not provide a built‑in listener for unhandled Promise rejections. Use the global event:

window.addEventListener('unhandledrejection', e => {
  console.warn('Unhandled rejection in x-init', e.reason);
});

Or, as shown above, catch errors inside the async method.

Verify your AlpineJS version

All current releases (3.10.x and earlier) treat x-init synchronously. If you upgrade to a future major version, double‑check the changelog, but as of 2026 no await support has been added to the directive itself.

Quick checklist

1. Define async logic inside x-data.
2. Call it from x-init.
3. Use a loading flag or x-cloak to hide UI until data is ready.
4. Wrap the async call in try/catch or attach a .catch() to handle errors.
5. Optionally listen for unhandledrejection to capture any stray rejections.

Summary

AlpineJS does not await async functions passed to x-init. The framework expects you to manage loading state and error handling manually. Following the pattern above keeps the UI in sync with asynchronous initialization logic.