Alpine Components

Lazy-loaded components with slots for Alpine.js

$
Lazy LoadingLoad components on-demand with eager, visible, or event-based strategies. Only fetch what you need, when you need it.Learn more →
SlotsCustomize component content with named slots—just like Vue or Web Components. Define defaults, override as needed.Learn more →
Loading StatesShow placeholders while components load. Create skeleton UIs with a simple .loading.html file.Learn more →

Quick Example

// Register a component
Alpine.components.register('modal', 'modal/modal.html', 'modal/modal.js');

// Use it in your HTML
<template x-component="modal" title="Custom Title">
    <p>Custom body content</p>
</template>

Live Demo

Loading...

Get started with the full guide →

Installation

$

Configure the Vite plugin →