Livewire é um framework full-stack para Laravel que torna simples a construção de interfaces dinâmicas, sem abandonar o conforto do Laravel.
Instalação
Para demonstrar a instalação simples do Livewire vamos utilizar o código HTML abaixo:
<html>
<head>
<title>Hello World!</title>
</head>
<body>
Hello World!
</body>
</html>
A primeira coisa a se fazer é dentro da pasta do projeto executar a linha de comando para instalar o livewire e as suas dependências:
composer require livewire/livewire
Agora, deve-se adicionar os dois códigos @livewireStyles e @livewireScripts, dentro do cabeçalho do código e o segundo antes da tag de final do corpo do código:
<html>
<head>
<title>Hello World!</title>
@livewireStyles
</head>
<body>
Hello World!
@livewireScripts
</body>
</html>
Pronto! O Laravel Livewire já pode ser utilizado neste código.
Para demonstrar o primeiro exemplo do seu uso, vamos transferir a escrita do “Hello World” para um componente do Livewire. Para isso, iremos inserir a diretiva no código acima chamando o componente “hello-world”:
<html>
<head>
<title>Hello World!</title>
@livewireStyles
</head>
<body>
@livewire('hello-world');
@livewireScripts
</body>
</html>
e para que o código funcione tempos que gerar o componente (uma espécie de controller) e a view dele utilizando o comando:
artisan make:livewire hello-world
o artisan irá criar os respectivos arquivos: “app/Http/Livewire/HelloWorld.php” e “resources/views/livewire/hello-world.blade.php”.
Componente:
<?php
namespace AppHttpLivewire;
use LivewireComponent;
class HelloWorld extends Component
{
public function render()
{
return view('livewire.hello-world');
}
}
O componente tem um método chamado render que é responsável em escrever na tela o que se deseja, e neste caso ele está enviando o conteúdo do arquivo da view “hello-world.blade.php”.
O código gerado automaticamente abaixo será alterado para imprimir o “Hello World!” na tela.
Antes:
<div>
{{ -- Be like water. --}}
</div>
Depois:
<div>
Hello World!
</div>
Se quisermos fazer um exemplo um pouco mais rebuscado, podemos demonstrar a passagem de parâmetro como um nome por exemplo. Para isso precisamos no controlador passar a variável e o valor do nome:
<?php
namespace AppHttpLivewire;
use LivewireComponent;
class HelloWorld extends Component
{
public function render()
{
return view('livewire.hello-world', [
'name' => 'José',
]);
}
}
e utilizar a variável “name” no arquivo blade.
<div>
Hello {{ $name }}!
</div>
Recarregando a tela no navegador será exibido o texto “Hello José!”.