#[Lazy]
Load components only when they enter the viewport.
Basic Usage
Mark a component as lazy to defer its loading until it's visible.
use LiVue\Attributes\Lazy;
#[Lazy]
class HeavyChart extends Component
{
public function mount()
{
// This only runs when the component enters viewport
$this->data = $this->loadChartData();
}
}Custom Placeholder
Show a placeholder while the component loads.
#[Lazy]
class Comments extends Component
{
public function placeholder(): string
{
return '<div class="animate-pulse">Loading comments...</div>';
}
// Or return a view
public function placeholder(): string
{
return view('placeholders.comments');
}
}Load After Page Load
Use #[Defer] to load immediately after the page loads (not waiting for viewport).
use LiVue\Attributes\Defer;
#[Defer]
class Notifications extends Component
{
// Loads after initial page render
}How It Works
-
1
Initial render shows placeholder
A lightweight
<livue-lazy>wrapper is rendered. -
2
IntersectionObserver watches
The browser monitors when the placeholder enters the viewport.
-
3
Component loads via AJAX
A request fetches and renders the full component.
Benefits
Faster Initial Load
Heavy components don't block the initial page render.
Reduced Server Load
Components below the fold may never be loaded if users don't scroll.