Livewire für PHP: Das vollständige Handbuch

1. Was ist Livewire und warum wird es benötigt?

Livewire ist eine vollwertige Bibliothek für Laravel, mit der Sie dynamische, reaktive Benutzeroberflächen erstellen können, ohne JavaScript schreiben zu müssen. Sie arbeitet serverseitig und nutzt Alpine.js zur Aktualisierung des DOM, während die gesamte Logik in PHP verbleibt. Dies ist das ideale Werkzeug für Entwickler, die schnell interaktive Webanwendungen entwickeln möchten, ohne sich in komplexe Frontend-Frameworks einarbeiten zu müssen.

Das Hauptziel von Livewire ist es, die Entwicklung moderner Weboberflächen zu vereinfachen und dabei den gewohnten Laravel-Ansatz beizubehalten. Sie schreiben Komponenten in PHP, und Livewire übernimmt automatisch die Verarbeitung von AJAX-Anfragen, aktualisiert das DOM und verwaltet den Zustand. Dies ist besonders nützlich für Formulare, Administrationspanels, Chats und andere interaktive Elemente.

Die Bibliothek löst das Problem der Code-Duplizierung zwischen Frontend und Backend und ermöglicht es Entwicklern, sich auf die Anwendungslogik zu konzentrieren, anstatt WebSockets oder komplexe JavaScript-Bibliotheken konfigurieren zu müssen. Livewire ist ideal für Projekte, bei denen Entwicklungsgeschwindigkeit und einfache Wartbarkeit im Vordergrund stehen.

2. Installation

Für die Installation von Livewire verwenden Sie Composer, den Standard-Paketmanager für PHP. Führen Sie folgenden Befehl im Stammverzeichnis Ihres Laravel-Projekts aus:

composer require livewire/livewire

Nach der Installation registriert Livewire automatisch seine Service-Provider. Wenn Sie Laravel 8 oder neuer verwenden, ist keine weitere Konfiguration erforderlich. Für ältere Versionen müssen Sie möglicherweise in config/app.php folgenden Eintrag hinzufügen:

'providers' => [
    // ...
    Livewire\LivewireServiceProvider::class,
];

Stellen Sie außerdem sicher, dass in Ihrem Template (normalerweise layouts/app.blade.php) die Skripte und Styles von Livewire eingebunden sind:

@livewireStyles
</head>
<body>
    @livewireScripts
</body>

3. Schnellstart – Minimales funktionierendes Beispiel

Erstellen wir eine einfache Zähler-Komponente. Führen Sie zunächst den Artisan-Befehl aus:

php artisan make:livewire counter

Dies erstellt zwei Dateien: app/Http/Livewire/Counter.php und resources/views/livewire/counter.blade.php. Bearbeiten wir die PHP-Klasse:

<?php
namespace App\Http\Livewire;
use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Und das Template:

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+1</button>
</div>

Fügen Sie die Komponente nun in eine beliebige Blade-Ansicht ein:

<livewire:counter />

Fertig! Beim Klicken auf den Button erhöht sich der Zähler, ohne dass die Seite neu geladen wird.

4. Wichtige Methoden/Funktionen/Klassen

4.1. render()

Signatur: public function render(): View

Beschreibung: Eine obligatorische Methode, die das Blade-Template der Komponente zurückgibt. Sie wird bei jedem Rendern aufgerufen.

public function render()
{
    return view('livewire.my-component', ['data' => $this->getData()]);
}

4.2. mount()

Signatur: public function mount(...$params): void

Beschreibung: Ein Analogon zum Konstruktor, der einmalig beim ersten Rendern der Komponente aufgerufen wird. Er dient zur Initialisierung von Eigenschaften.

public $userId;
public $user;

public function mount($userId)
{
    $this->userId = $userId;
    $this->user = User::find($userId);
}