Step-by-Step: Using the Livewire Component in Your Dashboard
1️⃣ Install Livewire (if not yet installed)
Run this in your terminal:
bash
Copy
Edit
composer require livewire/livewire
bash
1 line, 35 characters
Copy code
Then publish the config (optional):
bash
Copy
Edit
php artisan livewire:publish --config
bash
1 line, 38 characters
Copy code
2️⃣ Create a Livewire Component
You can generate it with:
bash
Copy
Edit
php artisan make:livewire OrdersDashboard
bash
1 line, 42 characters
Copy code
This will create:
app/Livewire/OrdersDashboard.php (logic)
resources/views/livewire/orders-dashboard.blade.php (view)
3️⃣ Paste the Logic (Step 2) into OrdersDashboard.php
Location: app/Livewire/OrdersDashboard.php
Replace the contents with this:
php
Copy
Edit
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Order;
class OrdersDashboard extends Component
{
public $orders = [];
// Listen for broadcast events
protected $listeners = [
'echo:order-dashboard-updates,OrderCreatedEvent' => 'updateOrders'
];
public function mount()
{
$this->orders = Order::latest()->take(10)->get();
}
public function updateOrders($payload)
{
// You can also add $payload data instead of refetching
$this->orders = Order::latest()->take(10)->get();
}
public function render()
{
return view('livewire.orders-dashboard');
}
}
php
25 lines, 664 characters
Copy code
4️⃣ Edit the Livewire View
Location: resources/views/livewire/orders-dashboard.blade.php
Add your UI, like:
blade
Copy
Edit
<div>
<h2 class="text-xl font-bold mb-4">📦 Latest Orders</h2>
<ul class="space-y-2">
@foreach($orders as $order)
<li class="p-2 bg-gray-100 dark:bg-gray-800 rounded shadow">
{{ $order->user->email ?? 'N/A' }} - ${{ $order->total }} - {{ $order->created_at->diffForHumans() }}
</li>
@endforeach
</ul>
</div>
blade
10 lines, 376 characters
Copy code
5️⃣ Include the Component in Your Dashboard Blade View
Wherever you want it to show, just include:
blade
Copy
Edit
@livewire('orders-dashboard')
blade
1 line, 30 characters
Copy code
For example, in your dashboard.blade.php file (or the main Blade where you're showing revenue), add this anywhere in the layout:
blade
Copy
Edit
<div class="mt-6">
@livewire('orders-dashboard')
</div>
blade
3 lines, 60 characters
Copy code
6️⃣ Ensure Livewire Scripts Are Included
At the end of your main layout (like layouts/app.blade.php):
blade
Copy
Edit
@livewireScripts
@livewireStyles
blade
2 lines, 33 characters
Copy code
Make sure you have these lines (usually inside <head> and before </body>).
7️⃣ Broadcast the Event
Make sure you're triggering the OrderCreatedEvent with broadcasting enabled, like:
php
Copy
Edit
event(new \App\Events\OrderCreatedEvent($order));
php
1 line, 50 characters
Copy code
And that the event class looks like:
php
Copy
Edit
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class OrderCreatedEvent implements ShouldBroadcast
{
public $order;
public function __construct($order)
{
$this->order = $order;
}
public function broadcastOn()
{
return new Channel('order-dashboard-updates');
}
}
php
13 lines, 316 characters
Copy code
✅ Done!
Now when OrderCreatedEvent is triggered on the server, the Livewire component updates in real-time without needing to write any JavaScript. 🎉