How to set up a Laravel Livewire component to make it not loaded again when navigated

Question

I have a Livewire component which is used on every page (eg. notifications in header) and it is being lazy loaded. I know it will be loaded again on page refresh or click a link which does not include "wire:navigate" attribute. But when I use "wire:navigate" on a link to go to another page, I want this component stay same without mounting and refreshing again so that no extra queries will be made to increase performance.

Is it possible? If so, how?

Answer 1

You can place your element(s) inside a @persist ... @endpersist block to persist elements across page visits in Livewire like so (audioplayer is an example since you didn't post any code):

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

Documentation for Persisting elements across page visits