Support for Livewire 3 wire:navigate

[rustynail1984]

Toggle is not working after navigate in a Livewire 3 app using wire:navigate.. you need to use livewire:navigated instead of DOMContentLoaded

See here https://livewire.laravel.com/docs/navigate#dont-rely-on-domcontentloaded

[joshleblanc]

@rustynail1984 Replace themeChange() with

addEventListener('livewired:navigated', () => {
  themeChange(false);
});

This also applies to anyone using turbo:

addEventListener("turbo:load", () => {
    themeChange(false);
})

[bturski]

I have a theme selection on the top bar of my layout. I just let the initial page load set the proper selection as typical, but wrap the component with @persist directive to preserve the initial selection when wire:navigate is used until/if the user chooses to change it.

@persist('theme-selector')
<select id="theme-selector" data-choose-theme>
    <option value="light">Light</option>
    <option value="night">Night</option>
    ...
</select>
@endpersist