Obscure Livewire Tips | Laravel Code Tips

10

🔥 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!

9

🔥 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.

8

🔥 Share state with Sprucewire

If you have two components that share some state, and you'd like to keep them in sync in a more effective way than dispatching listeners back and forth, check out Sprucewire.

It works almost like Vuex for Livewire.

https://twitter.com/_joshhanley/status/1362646916333334528

7

🔥 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.

6

🔥 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

5

🔥 Advanced trait design

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

Livewire::listen() is superior to hydrate* and dehydrate* when you need access to specific parts of the lifecycle
The instanceof self check scopes the listener to the component

4

🔥 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

3

🔥 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

2

🔥 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!

1

🔥 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.