Livewire wire:navigate: Blade Views ↔ Livewire Runtime – Should navigation be global or selective?
0 reputation · 26 Oct 2024, 15:56 UTC
Goal
Enable smooth, SPA‑like navigation between Laravel routes that return Blade views containing Livewire components.
Constraints & Uncertainty
Livewire v3 introduces wire:navigate to intercept link clicks and perform a background fetch, swapping the <body> without a full reload. The feature merges the <head> and preserves previously loaded scripts, which can affect third‑party JavaScript that expects a full page load. Additionally, state that lives in browser memory (e.g., open modals, Alpine.js component state) does not persist automatically; developers must use @persist or listen to livewire:navigated events. A key decision is whether to apply wire:navigate globally across all links or selectively to avoid breaking scripts that rely on a full reload.
Unresolved Decision
- Should
wire:navigatebe enabled on every link by default, or should developers manually add the attribute to only those that require SPA‑like behavior? - When using global navigation, how can third‑party scripts that initialize on
DOMContentLoadedbe reliably re‑initialized after awire:navigateswap? - What is the best strategy for preserving per‑page JavaScript and CSS across
wire:navigatetransitions while avoiding unnecessary asset duplication?