In this tutorial, we’ll guide you how you can add Livewire component in your module easily.

To work Livewire, we’ve installed two packages already in our core. You don’t have to install it, just letting you known to tell you the process.

1. Livewire – https://livewire.laravel.com
2. mhmiton/laravel-modules-livewire – https://github.com/mhmiton/laravel-modules-livewire

So, to work with Livewire in our product, you can just follow their docs and it would be easy enough to start any Livewire component in a minute in your custom module.

Lets try something on a custom module – TaskManager we’ve created at TaskManager custom module.

Lets assume, in Task List page, we’ll add a status change button, which will be interactive using Livewire like change task status from list page instantly.

So, In Status column we’ll add a new Livewire component or just a button which will change the status.

Run this command from core –

php artisan module:make-livewire Components/StatusChangeButton TaskManager 

After then you can see something like this –

COMPONENT CREATED  🤙

CLASS: Modules/TaskManager/app/Livewire/Components/StatusChangeButton.php
VIEW:  Modules/TaskManager/resources/views/livewire/components/status-change-button.blade.php
TAG: <livewire:taskmanager::components.status-change-button />

That means, we can instantly use it now in the list.

Lets change this live component blade file – Modules/TaskManager/resources/views/livewire/components/status-change-button.blade.php

<div x-data="{ open: false }" class="relative inline-block">
    <button
        @click="open = !open"
        type="button"
        class="badge
            {{ $status === 'completed' ? 'badge-success' : ($status === 'in_progress' ? 'badge-primary' : 'badge-warning') }}
            flex items-center gap-1"
    >
        {{ $statuses[$status] ?? __("Unknown") }}
        <iconify-icon
            icon="heroicons:chevron-down"
            class="w-3 h-3 crm:ml-3"
            :class="{ 'rotate-180': open }"
        ></iconify-icon>
        <span class="sr-only">{{ __("Change Status") }}</span>
    </button>

    <div
        x-show="open"
        @click.away="open = false"
        x-transition
        class="absolute z-10 mt-2 w-60 bg-white border border-gray-200 rounded shadow-lg"
    >
        @foreach($statuses as $key => $label)
            <button
                wire:click="changeStatusTo('{{ $key }}')"
                @click="open = false"
                class="block w-full text-left px-4 py-2 text-sm
                    {{ $status === $key ? 'font-bold bg-gray-100' : 'hover:bg-gray-50' }}
                    {{ $key === 'completed' ? 'text-green-700' : ($key === 'in_progress' ? 'text-blue-700' : 'text-yellow-700') }}"
                type="button"
                @if($status === $key) disabled @endif
            >
                {{ $label }}
            </button>
        @endforeach
    </div>

    <span
        wire:loading
        wire:target="changeStatusTo"
        class="ml-2 text-gray-500 text-xs"
    >
        {{ __("Processing...") }}
    </span>
</div>

Update Component class – Modules/TaskManager/app/Livewire/Components/StatusChangeButton.php

<?php

declare(strict_types=1);

namespace Modules\TaskManager\Livewire\Components;

use Livewire\Component;
use Modules\TaskManager\Models\Task;

class StatusChangeButton extends Component
{
    public Task $task;
    public $status;
    public $statuses;

    public function mount(Task $task)
    {
        $this->task = $task;
        $this->status = $task->status;
        $this->statuses = Task::statuses();
    }

    public function changeStatusTo($newStatus)
    {
        $this->status = $newStatus;
        $this->task->update(['status' => $newStatus]);
        $this->task->refresh();
        $this->dispatch('task-status-updated', $this->task->id);
    }

    public function render()
    {
        return view('taskmanager::livewire.components.status-change-button');
    }
}

Lets change our blade file – Modules/TaskManager/resources/views/index.blade.php

<td class="px-5 py-4 sm:px-6">
   <livewire:taskmanager::components.status-change-button
            :task="$task"
            :status="$task->status"
            :statuses="$statuses"
            :key="'status-change-' . $task->id"
    />
</td>

Great, Its done. Lets check the UI now –

Isn’t it beautiful. Now if you just change the status, it would be changed instantly without page reload and so on…

Any more confusion let us known, Lets build something for future…