Laravel Livewire

Publicidade

Livewire é um framework full-stack para Laravel que torna simples a construção de interfaces dinâmicas, sem abandonar o conforto do Laravel.

logotipo do framawork Laravel Livewire

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 App\Http\Livewire;

use Livewire\Component;

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 App\Http\Livewire;

use Livewire\Component;

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é!".

Laravel
junho 18, 2022
0

Comentários

Menu

Pesquisar

Últimos Comentários

Fale Comigo