Livewire | Laravel Livewire
Search
×
Docs
Screencasts
Support New
GitHub
{ $dispatch('set-nav-open', value) })"
class="border-blue flex h-10 w-10 items-center justify-center rounded-full border bg-gray-100 px-2 focus:outline-none lg:hidden"
@click="open = ! open"
Docs
Screencasts
Premium Support New
GitHub
{ $dispatch('set-nav-open', value) })"
class="border-blue flex h-10 w-10 items-center justify-center rounded-full border bg-gray-100 px-2 focus:outline-none lg:hidden"
@click="open = ! open"
Building modern web apps is hard.
Tools like Vue and React are extremely powerful, but the complexity they add to a full-stack developer's workflow is insane.
It doesn’t have to be this way...
Ok, I'm listening...
Say hello to Livewire.
Hi Livewire!
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.
Consider my interest piqued
It's not like anything you've seen before. The best way to understand it is to just look at the code. Strap on your snorkel, we're diving in.
...I'll get my floaties
Platinum Sponsor
Fly App performance optimization
Other Lovely Sponsors:
Ok, let's see some code
Here's a real-time search component built with Livewire.
1use Livewire\Component; 2 3class SearchUsers extends Component 4{ 5 public $search = ''; 6 7 public function render() 8 { 9 return view('livewire.search-users', [10 'users' => User::where('username', $this->search)->get(),11 ]);12 }13}
App\Http\Livewire\SearchUsers.php
1<div>2 <input wire:model="search" type="text" placeholder="Search users..."/>3 4 <ul>5 @foreach($users as $user)6 <li>{{ $user->username }}</li>7 @endforeach8 </ul>9</div>
resources/views/livewire/search-users.blade.php
You can include this component anywhere in your app like so.
1<body>2 ...3 @livewire('search-users')4 ...5</body>
resources/views/welcome.blade.php
When a user types into the search input, the list of users updates in real-time.
Bonkers, I know...
How the he*k does this work?
Livewire renders the initial component output with the page (like a Blade include). This way, it's SEO friendly.
When an interaction occurs, Livewire makes an AJAX request to the server with the updated data.
The server re-renders the component and responds with the new HTML.
Livewire then intelligently mutates DOM according to the things that changed.
Livewire 2022.
Built with Laravel
and Tailwind CSS.
Need help? Email
[email protected]