Best Practice for Using Livewire Without a Component

#1

I just ran into an interesting situation where I knew I wanted to use Livewire because it was so darn simple, but what I was doing actually had no relation to any component.

I’m building a platform for a video course I’m launching and I wanted to detect when the user updates the playback speed on a video and save that value to the db, so for future videos the saved playback speed is used. I already had a different component on the page, so I just added the following in the blade template:

@push('scripts')
    <script>
        function onPlayerPlaybackRateChange(event) {
            @this.call('setPlaybackRate', event.data);
        }
    </script>
@endpush

And the following in the component:

public function setPlaybackRate($value)
{
    $user = request()->user();
    $user->update([
        'playback_rate' => $value,
    ]);
}

You’ll notice this has nothing at all to do with the component. I’m wondering if other people have run into this type of implementation. It works great, but if I didn’t have another component on this page, I would have had to create a new Livewire component that just did nothing to enable this API request.

I’m wondering if other people are using Livewire in the same way, and if so, if there should be some kind of stripped down version of a Livewire component where you don’t even have a render function.

#2

Really interesting, I imagine this is a pretty common case. Basically headless Livewire.

Can’t envision anything off the top of my head right now, but interested to hear others thoughts.

#3

I made a middleman component that was basically headless. I had a few components that were using some data all modified in the same way. So instead modifying in each component, or using a trait, the middleman listened for it -> modified -> and sent it to the rest of the components. I left the view portion how it was and registered and put the component in the footer, not that it mattered where.

Maybe a headless class you could extend instead that doesn’t throw an exception when you don’t return a view, or just flat doesn’t have a render method on it?

(could always register them with @deadwire…)