Aug 27, 20237 min read

Download Livewire

Como baixar o Livewire: um framework full-stack para Laravel

O Laravel é um framework PHP popular que torna o desenvolvimento web fácil e agradável. No entanto, construir interfaces dinâmicas com o Laravel pode ser um desafio, especialmente se você tiver que usar frameworks JavaScript complexos como Vue ou React. É aí que entra o Livewire.

download livewire

Download Zip

O que é Livewire e por que usá-lo?

Livewire é um framework full-stack para Laravel que simplifica a construção de interfaces dinâmicas, sem deixar o conforto do Laravel. Ele permite que você escreva um código PHP que se comporte como JavaScript, atualizando a página sem recarregá-la. Ele também se integra bem com o Blade, o mecanismo de modelagem do Laravel, para que você não precise aprender uma nova sintaxe ou ferramenta.

Recursos e benefícios do Livewire

Alguns dos recursos e benefícios do Livewire são:

É fácil de usar e aprender. Se você conhece Laravel e Blade, pode usar o Livewire.

É rápido e eficiente. Ele envia apenas a quantidade mínima de dados necessária para atualizar a página, reduzindo a largura de banda e a latência.

É compatível com SEO. Ele renderiza a saída do componente inicial com a página, portanto, é compatível com rastreadores e bots.

É poderoso e flexível. Ele suporta validação, paginação, uploads de arquivos, autorização, eventos, ganchos de ciclo de vida e muito mais.

É compatível com outras bibliotecas. Você pode usar Alpine.js para interatividade extra, Tailwind CSS para estilizar ou qualquer outra biblioteca JavaScript ou CSS de sua preferência.

Alternativas e comparações do Livewire

O Livewire não é a única maneira de construir interfaces dinâmicas com o Laravel. Existem outras alternativas que você pode querer considerar, dependendo de suas necessidades e preferências. Aqui estão alguns deles:

Inertia.js é uma biblioteca JavaScript que conecta um front-end JavaScript a um back-end Laravel sem a necessidade de uma API. Você pode usar Vue, React ou Svelte como sua estrutura de front-end.

Vue.js é uma estrutura JavaScript que permite criar componentes reativos para seu aplicativo da web.Você pode usá-lo com Laravel criando APIs ou usando diretivas Blade.

React.js é outra estrutura JavaScript que permite criar UIs interativas com componentes. Você também pode usá-lo com Laravel criando APIs ou usando diretivas Blade.

Para comparar o Livewire com essas alternativas, você pode conferir este por LogRocket.

Como instalar LiveWire

A instalação do Livewire é fácil e direta. Você só precisa seguir estes passos:

Requisitos e configuração

Para usar o Livewire, você precisa:

PHP 7.2.5 ou superior

Laravel 7.0 ou superior

Você também precisa criar um novo aplicativo Laravel ou usar um existente. Se precisar de ajuda para configurar um aplicativo Laravel, siga este por Laravel.

Instale o pacote

Para instalar o Livewire, você precisa executar este comando no seu terminal:

compositor requer livewire/livewire

Isso fará o download e instalará o pacote Livewire e suas dependências.

Incluir os ativos

Para usar o Livewire, você precisa incluir seus ativos JavaScript e CSS em seu arquivo de layout Blade. Você pode fazer isso adicionando estas linhas:

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

A diretiva @livewireStyles injetará o arquivo Livewire CSS e a diretiva @livewireScripts injetará o arquivo Livewire JavaScript. Esses arquivos são responsáveis por fazer o Livewire funcionar.

Publique o arquivo de configuração (opcional)

Se você deseja personalizar algumas das configurações do Livewire, pode publicar o arquivo de configuração executando este comando:

php artesão livewire:publicar --config

Isso criará um arquivo livewire.php em seu diretório de configuração, onde você pode alterar algumas das opções, como o caminho do componente, a URL do recurso, o driver de cache e muito mais. Você pode conferir o para mais detalhes.

Como criar um componente Livewire

Um componente Livewire é uma combinação de uma classe PHP e uma visualização Blade que trabalham juntas para criar uma interface dinâmica. Você pode criar um componente Livewire seguindo estas etapas:

Gerar uma classe de componente e visualizar

Para gerar um componente Livewire, você pode usar este comando artesão:

php artesão make:livewire componentName

Isso criará dois arquivos: um arquivo de classe PHP em app/Http/Livewire e um arquivo de visualização Blade em resources/views/livewire. Por exemplo, se você executar este comando:

php artesão make:contador livewire

Você obterá estes arquivos:

app/Http/Livewire/Counter.php resources/views/livewire/counter.blade.php

O arquivo de classe PHP conterá a lógica e os dados de seu componente, e o arquivo de visualização Blade conterá a marcação HTML de seu componente.

Passar parâmetros (opcional)

Se você deseja passar alguns parâmetros para seu componente Livewire, pode fazê-lo adicionando-os ao construtor de sua classe PHP. Por exemplo, se você deseja passar um parâmetro de título para seu componente contador, pode fazer isso:

class Counter extends Component public $title; public function __construct($title) $this->title = $title; ...

Em seguida, você pode acessar o parâmetro em sua visualização Blade usando a variável $title. Por exemplo:

<div> <h1> $title </h1> ... </div>

Adicionar lógica e dados ao componente

Para adicionar lógica e dados ao seu componente Livewire, você pode usar propriedades e métodos públicos em sua classe PHP. Por exemplo, se você quiser adicionar uma propriedade de contagem e um método de incremento ao seu componente contador, faça o seguinte:

class Counter extends Component public $count = 0; public function increment() $this->count++; ...

Em seguida, você pode usar a variável $count e a diretiva wire:click em sua visualização Blade para exibir e atualizar a contagem. Por exemplo:

<div> <h1>Counter</h1> <p>The current count is $count .</p> <button wire:click="increment">+1</button> </div>

A diretiva wire:click dirá ao Livewire para chamar o método de incremento quando o botão for clicado e atualizar a contagem na página sem recarregá-la. Como incluir um componente Livewire em uma exibição Blade

Depois de criar um componente Livewire, você pode incluí-lo em qualquer exibição Blade usando uma destas duas maneiras:

Use a tag ou diretiva livewire

Você pode usar a tag ou diretiva livewire para incluir um componente Livewire por seu nome. Por exemplo, se você quiser incluir o componente contador em seu arquivo welcome.blade.php, você pode fazer isso:

<div> <h1>Welcome to Livewire</h1> <livewire:counter title="Simple Counter" /> </div>

Ou isto:

<div> <h1>Welcome to Livewire</h1> @livewire('counter', ['title' => 'Simple Counter']) </div>

Ambas as formas renderizarão o componente do contador em sua visualização Blade e passarão o parâmetro do título como "Contador Simples".

Use Alpine.js para interatividade extra (opcional)

Se quiser adicionar alguma interatividade extra ao seu componente Livewire, você pode usar o Alpine.js, uma biblioteca JavaScript leve que funciona bem com o Livewire. Alpine.js permite adicionar alguns comportamentos simples aos seus elementos HTML, como alternar, ocultar, mostrar, repetir e muito mais. Você pode instalar Alpine.js adicionando esta linha ao seu arquivo de layout Blade:

Em seguida, você pode usar as diretivas x-data e x-show em sua exibição Blade para adicionar algumas funcionalidades do Alpine.js. Por exemplo, se você deseja mostrar ou ocultar o componente do contador com base em um clique de botão, você pode fazer isso:

<div x-data=" showCounter: false "> <h1>Welcome to Livewire</h1> <button @click="showCounter = !showCounter">Toggle Counter</button> <div x-show="showCounter"> <livewire:counter title="Simple Counter" /> </div> </div>

Isso criará um botão que alternará a visibilidade do componente do contador quando clicado.

Conclusão e perguntas frequentes

Neste artigo, aprendemos como baixar o Livewire, como criar um componente do Livewire e como incluí-lo em uma visualização Blade. Também vimos alguns dos recursos e benefícios do Livewire, bem como algumas das alternativas e comparações. Esperamos que este artigo tenha ajudado você a começar a usar o Livewire e aproveitar sua mágica.

Se você tiver alguma dúvida ou comentário sobre o Livewire, sinta-se à vontade para deixar um comentário abaixo. Você também pode conferir o oficial para mais informações e recursos.Aqui estão algumas perguntas frequentes que também podem ajudá-lo:

P: Como faço para atualizar um componente Livewire de outro componente?

R: Você pode usar o método emit em sua classe PHP para disparar um evento de um componente e usar a propriedade $listeners ou o método listen em outro componente para ouvir esse evento e executar uma ação. Por exemplo, se você deseja atualizar um componente de carrinho quando um item é adicionado de um componente de produto, você pode fazer isso:

// Em Product.php public function addToCart($item) // Adiciona a lógica do item $this->emit('cartUpdated'); // Em Cart.php protegido $listeners = ['cartUpdated' => 'refresh']; public function refresh() // Atualiza a lógica do carrinho

P: Como posso validar a entrada do usuário em um componente Livewire?

R: Você pode usar o método de validação em sua classe PHP para validar a entrada do usuário em relação a um conjunto de regras. Você também pode usar a propriedade $rules ou o método rules para definir as regras para seu componente. Por exemplo, se você deseja validar uma entrada de nome em um componente de formulário, pode fazer isso:

// Em Form.php public $name; $regras protegidas = [ 'nome' => 'obrigatóriomín:3máx:20', ]; public function submit() $this->validate(); // Enviar lógica

P: Como uso a paginação em um componente Livewire?

R: Você pode usar o método paginate em sua classe PHP para paginar uma coleção de itens de seu banco de dados. Você também pode usar as visualizações de paginação Livewire para renderizar os links de paginação em sua visualização Blade. Por exemplo, se você deseja paginar uma lista de postagens em um componente de blog, pode fazer isso:

// Em Blog.php use Livewire\WithPagination; class Blog extends Component use WithPagination; public function render() $posts = Post::latest()->paginate(10); return view('livewire.blog', compact('postagens')); // Em blog.blade.php Blog

@foreach ($posts as $post) $post->title

$post->excerpt

@endforeach $posts->links()

P: Como faço upload de arquivos em um componente Livewire?

R: Você pode usar a diretiva wire:model em sua visualização Blade para vincular uma entrada de arquivo a uma propriedade pública em sua classe PHP. Você também pode usar o método validFile ou as regras de arquivo para validar o arquivo carregado. Por exemplo, se você deseja carregar uma imagem de avatar em um componente de perfil, pode fazer isso:

// Em Profile.php public $avatar; $regras protegidas = [ 'avatar' => 'imagemmax:1024', ]; public function save() $this->validate(); // Salvar lógica // Em profile.blade.php Perfil

@error('avatar') $message @enderror Salvar

P: Como faço para depurar um componente Livewire?

R: Você pode usar o método dd em sua classe PHP para despejar e eliminar qualquer variável ou expressão. Você também pode usar a diretiva wire:loading em sua visualização Blade para mostrar um indicador de carregamento enquanto o Livewire está processando. Por exemplo, se você quiser depurar a propriedade de contagem e mostrar um controle giratório em seu componente contador, faça o seguinte:

// Em Counter.php public function increment() $this->count++; dd($este->contagem); // Em counter.blade.php Counter

A contagem atual é $count . +1

0517a86e26

THE

LOOK

STUDIO