Livewire is a full-stack framework for Laravel that makes building dynamic front-ends as simple as writing vanilla PHP (literally). — Caleb Porzio (@calebporzio) 5/26
The Livewire component namespace App\Http\Livewire; use Livewire\Component; class Counter extends Component { public function render() { return view('livewire.counter'); } } 12/26
Let's add some functionality class Counter extends Component { public $count = 0; public function increment() { $this->count++; } public function decrement() { $this->count--; } public function render() { return view('livewire.counter'); } } 15/26
Let's add some functionality class Counter extends Component { public $count = 0; public function increment() { $this->count++; } public function decrement() { $this->count--; } public function render() { return view('livewire.counter'); } } 15/26
Let's add some functionality class Counter extends Component { public $count = 0; public function increment() { $this->count++; } public function decrement() { $this->count--; } public function render() { return view('livewire.counter'); } } 15/26
Let's add some functionality class Counter extends Component { public $count = 0; public function increment() { $this->count++; } public function decrement() { $this->count--; } public function render() { return view('livewire.counter'); } } 15/26
Let's add some functionality class Counter extends Component { public $count = 0; public function increment() { $this->count++; } public function decrement() { $this->count--; } public function render() { return view('livewire.counter'); } } 15/26
1. Livewire hears the click because of wire:click="increment" 2. Livewire sends an ajax request to PHP 3. PHP calls the corresponding method, which updates $count 4. PHP re-renders the Blade template and sends back the HTML 5. Livewire receives the response, and updates the DOM 19/26
Should you replace all your Vue components with Livewire components now? Not exactly. [...] it's better to use JavaScript for things that need to be instant (like animations) [...] A good rule of thumb is: any JavaScript components that rely on ajax for server communication, will be better off as Livewire components. — Caleb Porzio 22/26
Can you use it in your projects? Right now, the project is still in pre-release. Sign up for my email newsletter to get notified when It's ready for prime-time. — Caleb Porzio 23/26
Livewire Fiddle I'm really taking my time with this to make sure it's beautiful, functional, secure, and user friendly. Honestly, it has some features I wish CodePen had. — Caleb Porzio 24/26