Dans le précédent article, nous avons vu comment installer Livewire et l'instancier dans le code.

Maintenant, nous allons créer notre premier composant.

Créer un composant

Avec la commande suivante, nous allons créer un composant appelé counter

php artisan make:livewire counter

Le contrôleur App\Http\Livewire\Counter.php et la vue resources/views/livewire/counter.blade.php ont été générés.

Appeler le composant dans la vue

Pour se faire, rien de plus simple, il suffit d'utiliser :

@livewire('counter')

Ajouter des méthodes pour actualiser le compteur

Dans le contrôleur généré plus haut, nous allons créer 2 méthodes, une pour incrémenter notre compteur, et une pour le décrémenter.

public $count = 0;

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

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

Création des boutons et appel des méthodes

Notre premier composant est pratiquement prêt, il ne reste plus qu'à intégrer les deux boutons et à afficher notre compteur.

<button wire:click="increment">+</button>
<span>{{ $count }}</span>
<button wire:click="decrement">-</button>

Voir la démo de notre code