Step 1: Choosing a JavaScript Library
For this example, we’ll integrate Chart.js, a popular JavaScript library for creating interactive charts, into a Livewire component. However, the principles covered can be applied to any library such as Alpine.js, jQuery, or FullCalendar.
Step 2: Setting Up Chart.js
1. Install Chart.js
Use npm or yarn to install Chart.js in your Laravel project:
npm install chart.js
After installation, compile your assets:
npm run dev
2. Include Chart.js in Your Layout
In your main Blade layout file (e.g., resources/views/layouts/app.blade.php), include the compiled JavaScript file:
<script src="{{ mix('js/app.js') }}"></script>
Step 3: Creating the Livewire Component
Run the following command to create a Livewire component:
php artisan make:livewire ChartComponent
This generates:
app/Livewire/ChartComponent.php– The PHP logic for the component.resources/views/livewire/chart-component.blade.php– The Blade view for the component.
ChartComponent.php
Update the PHP logic to include some sample data for the chart:
<?php
namespace App\Livewire;
use Livewire\Component;
class ChartComponent extends Component
{
public $chartData;
public function mount()
{
$this->chartData = [
'labels' => ['January', 'February', 'March', 'April', 'May'],
'datasets' => [
[
'label' => 'Sales',
'backgroundColor' => 'rgba(75, 192, 192, 0.2)',
'borderColor' => 'rgba(75, 192, 192, 1)',
'data' => [65, 59, 80, 81, 56],
],
],
];
}
public function updateChart()
{
$this->chartData['datasets'][0]['data'] = [75, 69, 90, 91, 66];
$this->dispatch('updateChart', $this->chartData);
}
public function render()
{
return view('livewire.chart-component');
}
}
Step 4: Building the Blade View
In the chart-component.blade.php file, create a canvas element for the chart and initialize it using Livewire hooks:
<div>
<canvas id="salesChart"></canvas>
<script>
document.addEventListener('livewire:load', () => {
const ctx = document.getElementById('salesChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: @js($chartData),
options: {
responsive: true,
maintainAspectRatio: false,
},
});
Livewire.on('updateChart', (newData) => {
chart.data = newData;
chart.update();
});
});
</script>
<button wire:click="updateChart">Update Chart</button>
</div>
What’s Happening Here?
livewire:load: Ensures the JavaScript runs after the Livewire component is loaded.@js: Converts the PHP array$chartDatainto a JSON object for use in JavaScript.Livewire.on: Listens for events from the Livewire component to dynamically update the chart.
Step 5: Triggering Dynamic Updates
The updateChart method in the component modifies the chart data and dispatches an event to update the chart in real time. The JavaScript listener in the Blade view handles the dynamic update by calling the chart.update() method
Step 6: General Tips for JavaScript Integration
Use
dispatch: Communicate between Livewire and JavaScript by emitting events withdispatch.Leverage
livewire:load: Ensure JavaScript initializes after Livewire components are rendered.Keep Logic Separate: Use JavaScript files or inline scripts for external library logic to maintain clean code.
Final Output
With the above setup, your Livewire component will:
Display a dynamic bar chart using Chart.js.
Update the chart data in real time with a button click.
Provide seamless integration between Livewire and JavaScript.
Key Features Covered Today
Installing and configuring external JavaScript libraries in Laravel Livewire.
Using
livewire:loadto initialize JavaScript after component rendering.Dynamically updating external library elements with Livewire events.
Best practices for JavaScript and Livewire integration.