v-init
Execute a method when the component mounts.
Basic Usage
Call a server method once when the component first renders.
<!-- Load data on mount -->
<div v-init="'loadData'">
{{ data }}
</div>
<!-- With parameters -->
<div v-init="['loadUser', [userId]]">
{{ user.name }}
</div>Common Use Cases
Deferred Data Loading
Load heavy data after the initial page render for faster perceived performance.
Analytics Tracking
Track page views or component impressions when they appear.
Initialize Third-Party
Set up external services or widgets when the component loads.
Lazy Hydration
Combine with #[Lazy] for components that load data on visibility.
Important Behavior
v-init only fires ONCE per component lifecycle.
Template swaps from server responses do NOT re-trigger v-init. This prevents infinite loops when v-init calls a server method that updates the template.
Full Example
Dashboard.php
public array $stats = [];
public function loadStats()
{
$this->stats = [
'users' => User::count(),
'orders' => Order::today()->count(),
];
}
dashboard.blade.php
<div v-init="'loadStats'">
<div v-if="stats.users">
Users: {{ stats.users }}
Orders: {{ stats.orders }}
</div>
<div v-else>
Loading stats...
</div>
</div>