Maintain component state with @persist in Laravel Livewire v3

One of the powerful features introduced in Laravel Livewire v3 is the @persist directive. This feature allows you to maintain component state across page navigations, ensuring a seamless and uninterrupted user experience. It's particularly useful for persistent UI elements like audio players, shopping carts, and more. Let’s explore how you can leverage @persist in your Laravel Livewire projects.

Understanding @persist

The @persist directive enables you to keep the state of a Livewire component intact even as users navigate between different pages. This means that the state of elements, such as inputs or media players, remains unchanged, providing a consistent experience for the user.

Basic Usage

Here’s a basic example to illustrate how @persist works:

@persist('audioPlayer')
    <audio src="{{ $episode->file }}" controls></audio>
@endpersist

In this example, the state of the audio player is maintained across page navigations, ensuring that the audio playback continues without interruption.

Real-Life Example

Imagine you are developing a podcast website where users can listen to episodes while browsing different pages. You want the audio player to continue playing without restarting every time a user navigates to a new page. Here’s how you can implement this using @persist:

use Livewire\Component;

class PodcastPlayer extends Component
{
    public $episode;

    public function mount($episodeId)
    {
        $this->episode = Episode::find($episodeId);
    }

    public function render()
    {
        return view('livewire.podcast-player');
    }
}
<!-- Blade Template (livewire/podcast-player.blade.php) -->
@persist('podcastPlayer')
    <audio src="{{ $episode->file }}" controls></audio>
@endpersist

In this example, the @persist directive ensures that the audio player retains its state, allowing the podcast to continue playing as the user navigates the site.

Benefits of Using @persist

  • Improved User Experience: Maintain the state of interactive elements, providing a seamless and uninterrupted experience.
  • Enhanced Performance: Reduce the need for reloading and reinitializing components, improving performance.
  • Simplified State Management: Easily manage state across page navigations without complex JavaScript or additional libraries.

Conclusion

The @persist directive in Laravel Livewire v3 is a game-changer for maintaining component state across page navigations. By leveraging this feature, you can enhance user experience, improve performance, and simplify state management in your applications.

Subscribe to Harris Raftopoulos

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe