Loading Strategies

Control when your components load using modifiers. This is key to optimizing performance—only load what you need, when you need it.

Eager (default)

Loads immediately when Alpine initializes. Best for above-the-fold content.

<div x-component="modal"></div>
<div x-component.eager="modal"></div>

Visible

Loads when the element enters the viewport. Uses IntersectionObserver for efficiency.

<!-- Load when visible -->
<div x-component.visible="modal"></div>

<!-- Load 100px before visible -->
<div x-component.visible.100px="modal"></div>

Event

Waits for a custom event before loading. Perfect for modals, dropdowns, and on-demand content.

<button @click="$dispatch('openModal')">
    Open Modal
</button>

<div x-component.event.openModal="modal"></div>

Default event: If you omit the explicit event name, .event waits for alpine-components:load and matches on detail.id.

<button @click="$dispatch('alpine-components:load', { id: 'modal' })">
    Load Modal
</button>

<div x-component.event="modal"></div>

Visible Strategy

The visible strategy uses the Intersection Observer API to detect when an element enters the viewport. This is ideal for:

Below-the-fold content
Long pages with many components
Image galleries and carousels

Root Margin

Add a margin to trigger loading before the element is visible:

<!-- Load 200px before entering viewport -->
<div x-component.visible.200px="gallery"></div>

Demo

[IMAGE: visible-strategy.gif] — Recording showing component loading as user scrolls it into view

Event Strategy

The event strategy waits for a custom DOM event before loading. This is perfect for:

Modals and dialogs
Dropdown menus
Content that appears on user interaction

Usage Pattern

<!-- Trigger button -->
<button @click="$dispatch('showSettings')">
    Settings
</button>

<!-- Component loads only when event fires -->
<div x-component.event.showSettings="settings-panel"></div>

Default Event

If you use x-component.event="name" without specifying a custom event name, the component waits for alpine-components:load and only loads when detail.id matches the component name.

<button @click="$dispatch('alpine-components:load', { id: 'settings-panel' })">
    Load Settings Panel
</button>

<div x-component.event="settings-panel"></div>

Demo

[IMAGE: event-strategy.gif] — Recording showing button click triggering component load

Choosing a Strategy

Strategy	Use When	Trade-offs
`eager`	Above-the-fold, critical UI	Increases initial load, but no delay
`visible`	Below-the-fold content	Slight delay on scroll, reduces initial load
`event`	On-demand UI (modals, menus)	Delay on first interaction, minimal initial load