Livewire wire:navigate: Blade Views ↔ Livewire Runtime – Should navigation be global or selective?

The Short Answer

You should apply wire:navigate selectively. While the goal is an SPA-like experience, applying it globally by default often breaks third-party JavaScript, analytics trackers, and payment gateways that rely on a full page lifecycle (DOMContentLoaded). Enable it for primary application links and internal navigation, but omit it for external links, file downloads, and pages containing heavy, non-Livewire third-party widgets.

Implementation Logic

Livewire v3 achieves this effect by fetching the next page in the background and swapping the <body> content while merging the <head>. Because the browser does not perform a hard refresh, standard window-load events do not fire on subsequent navigations.

Re-initializing Third-Party Scripts

Scripts that initialize once on page load will fail to run after a wire:navigate swap. To fix this, move your initialization logic into a listener for the livewire:navigated event.

<script>
    document.addEventListener('livewire:navigated', () => {
        // Re-initialize your third-party widgets here
        initMyPlugin();
    });
</script>

Note: Ensure your initialization function is idempotent or checks if the plugin is already active to avoid double-binding on the initial page load.

Managing Assets and State

To prevent asset duplication and maintain state, follow these structural patterns:

• CSS/JS Assets: Use @push or @section to place per-page assets in the <head>. Livewire merges the head, ensuring assets are added once and not duplicated on every swap.
• Persistent UI: Wrap elements that must survive the transition (e.g., an audio player or a global search bar) in the @persist directive.
• Transient State: Alpine.js state is destroyed when the body is swapped. Use @persist for Alpine components that need to maintain state across routes.

Verification Steps

1. Event Check: Add a console.log inside a livewire:navigated listener and verify it triggers upon clicking a wire:navigate link.
2. DOM Inspection: Use Browser DevTools to inspect the <head> after navigating between three different pages; verify that CSS files are not being appended repeatedly.
3. Widget Test: Navigate to a page with a third-party script. If the widget is missing or unresponsive, verify that the script is not relying solely on window.onload.

Diagnostic Detail Required: Are you using any specific third-party libraries (e.g., Google Maps, Stripe, or complex Chart.js setups) that manage their own DOM lifecycle? This may necessitate a more aggressive selective approach.