Obscure Livewire Tips

Little-known tips & trick that can significantly improve your Livewire apps.

LIVE THREAD: 1 tip every 15 minutes. Each one will be more unknown than the previous one

Use wire:replace

Livewire can run into weird DOM diffing issues. And the workarounds are sometimes very painful.

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.

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!

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

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

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

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

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.

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

Replace state 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.

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!

Here's an example taken from Lean. When a user tries to edit the ID of the currently edited resource, an error is shown as if there were no such public property.

Readonly properties are not a native feature of Livewire, but they can be added using my package.

And that's it for this thread. You can download the code snippets from this thread using the links below

Follow @LaravelCodeTips

Read this thread online: https://laravel-code.tips/threads/obscure-livewire-tips/

Download bonuses: https://laravel-code.tips/threads/obscure-livewire-tips/download

Join the newsletter: https://newsletter.laravel-code.tips