🔥 Obscure Livewire Tips

Little-known Livewire tips.

Get the supporting resources, code examples, and Blade directives here.

Readonly properties


🔥 Readonly properties

Readonly properties

They're a great way to make your components safer and faster.

Say you have a component for editing some resource.

You enforce the ACL in mount().

But if the user could change the currently edited resource, you'd need to enforce ACL on all requests!

Replace children with a custom directive


🔥 Replace children with a custom directive

Replace children with a custom directive

Imagine that you have a nested component that depends on the parent state. You don't need to sync child state into parent, you just want to replace the child when the parent state changes.

You can use my custom directive for that.

Quick tip: Use $wire.entangle() instead of @entangle


🔥 Quick tip: Use $wire.entangle() instead of @entangle

Quick tip: Use $wire.entangle() instead of @entangle

It's good to get into the habit of using $wire, since it provides a full communication layer for your Livewire component.

It also doesn't run into issues when you use it inside single quoted attributes.

Advanced notifications


🔥 Advanced notifications

Advanced notifications

This trait allows dispatching notifications:

  • on the current page
  • on the next page (after redirect)
  • from any part of your code: you can run Lean::notify() in an action class, a model method, or anywhere else — and it will be sent to the browser
Advanced trait design


🔥 Advanced trait design

Advanced trait design

Let's look at the same trait again. It does two interesting things.

  1. Livewire::listen() is superior to hydrate* and dehydrate* when you need access to specific parts of the lifecycle

  2. The instanceof self check scopes the listener to the component

Custom response effects


🔥 Custom response effects

Custom response effects

You can add custom data to response effects. Those are separate from component data, and act more like events.

You can use them when you have some JS code that looks at Livewire responses, and when you want more control than dispatching browser events

Compose components using traits


🔥 Compose components using traits

Compose components using traits

Traits are a powerful way to reuse functionality between Livewire components.

They're generally better than component nesting, since that comes with more complexity and worse performance.

Next up: Advanced trait examples

Call methods from JavaScript


🔥 Call methods from JavaScript

Call methods from JavaScript

Livewire's properties are extremely powerful, which often makes us forget that we can also call methods from the frontend.

Livewire gives you a full component API. Use it!

Use wire:replace


🔥 Use wire:replace

Use wire:replace

As you know, Livewire sometimes runs into painful DOM diffing issues. They can usually be solved with simple workarounds, but sometimes those workarounds get quite complex.

So I built a package that adds a wire:replace directive, telling Livewire to replace an entire chunk of the DOM, instead of trying to diff individual changes.

We're writing a book, you can get it for free here.