Livewire para PHP: guia completo

1. O que é e para que serve

Livewire é uma biblioteca completa para Laravel que permite criar interfaces dinâmicas e reativas sem precisar escrever JavaScript. Ela funciona no lado do servidor, usando Alpine.js para atualizar o DOM, mas toda a lógica permanece em PHP. É a ferramenta ideal para desenvolvedores que desejam criar rapidamente aplicações web interativas sem se aprofundar em frameworks frontend complexos.

O principal objetivo do Livewire é simplificar o desenvolvimento de interfaces web modernas, mantendo a abordagem familiar do Laravel. Você escreve componentes em PHP, e o Livewire processa automaticamente as requisições AJAX, atualiza o DOM e gerencia o estado. Isso é especialmente útil para formulários, painéis de controle, chats e qualquer outro elemento interativo.

A biblioteca resolve o problema de duplicação de código entre frontend e backend, permitindo que os desenvolvedores foquem na lógica da aplicação, em vez de configurar WebSocket ou bibliotecas JavaScript complexas. Livewire é perfeito para projetos onde a velocidade de desenvolvimento e a facilidade de manutenção são prioridades.

2. Instalação

Para instalar o Livewire, use o Composer — o gerenciador de pacotes padrão do PHP. Execute o seguinte comando na raiz do seu projeto Laravel:

composer require livewire/livewire

Após a instalação, o Livewire registrará automaticamente seus service providers. Se você estiver usando Laravel 8 ou superior, nenhuma configuração adicional é necessária. Para versões mais antigas, pode ser necessário adicionar em config/app.php:

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

Certifique-se também de que os scripts e estilos do Livewire estejam incluídos no seu template (geralmente layouts/app.blade.php):

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

3. Início rápido — exemplo mínimo funcional

Vamos criar um componente de contador simples. Primeiro, execute o comando artisan:

php artisan make:livewire counter

Isso criará dois arquivos: app/Http/Livewire/Counter.php e resources/views/livewire/counter.blade.php. Vamos editar a classe PHP:

<?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');
    }
}

E o template:

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

Agora insira o componente em qualquer view Blade:

<livewire:counter />

Pronto! Ao clicar no botão, o contador aumenta sem recarregar a página.

4. Principais métodos/funções/classes

4.1. render()

Assinatura: public function render(): View

Descrição: Método obrigatório que retorna o template Blade do componente. É chamado a cada renderização.

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

4.2. mount()

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

Descrição: Análogo ao construtor, é chamado uma vez na primeira renderização do componente. Usado para inicializar propriedades.

public $userId;
public $user;

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