Livewire SPA: Modal, Scrollable, Toggle
I’m using Laravel + Livewire, along with the wire:navigate feature for page navigation. I started from the template available on GitHub (https://github.com/keenthemes/metronic-tailwind-html-integration/tree/main/metronic-tailwind-laravel-livewire). Some things are working well, but others are not.
For example, when navigating between pages, the sidebar breaks the scrollable behavior. Also in the sidebar, the collapse button stops working (I believe it might be related to the Toggle functionality). Another issue is with the modal component, which also stops working after navigating between pages.
Has anyone experienced this situation and found a solution? I’ve been trying a few approaches here, but so far without success.
Thanks in advance!
Replies (2)
After updating my source files to the latest version of the Metronic Livewire integration, the scrollable behavior is now working perfectly.
However, Modal and Toggle are still not working properly. I tested the following commands (below) to see if they would have any effect. The Toggle worked fine, but the Modal is still having issues — I believe it might require an additional function to work properly. 
The code I created was added to be called in the same places where reinitDrawers() is called.
If I remove wire:navigate, the modal works normally.
function reinitToggle() {
// Use KTToggle.reinit() from modified KTUI to clear stale instances
// and recreate fresh ones after wire:navigate navigation
if (typeof KTToggle !== "undefined" && typeof KTToggle.reinit === "function") {
try {
KTToggle.reinit();
} catch (error) {
console.error("KTToggle reinitialization failed:", error);
}
} else if (typeof KTToggle !== "undefined" && typeof KTToggle.init === "function") {
// Fallback: Use KTToggle.init() if reinit() is not available
try {
KTToggle.init();
} catch (error) {
console.warn("KTToggle initialization failed:", error);
}
} else {
console.warn("[Toggle Reinit] KTToggle.reinit() not available");
}
}function reinitModal() {
// Use KTModal.reinit() from modified KTUI to clear stale instances
// and recreate fresh ones after wire:navigate navigation
if (typeof KTModal !== "undefined" && typeof KTModal.reinit === "function") {
try {
KTModal.reinit();
} catch (error) {
console.error("KTModal reinitialization failed:", error);
}
} else if (typeof KTModal !== "undefined" && typeof KTModal.init === "function") {
// Fallback: Use KTModal.init() if reinit() is not available
try {
KTModal.init();
} catch (error) {
console.warn("KTModal initialization failed:", error);
}
} else {
console.warn("[Modal Reinit] KTModal.reinit() not available");
}
}
Hi Luiz Giorgi
Please try the latest Metronic Livewire integration starter first. We recently updated fixes for wire:navigate re-initialization issues, including component lifecycle handling after navigation.
1. Re-clone or update from the latest integration repo branch.
2. Rebuild assets (npm install + npm run dev / build) and clear Laravel caches.
3. Verify your app uses the latest Livewire integration flow from docs, especially post-navigation component re-init.
4. Retest sidebar scroll, drawer toggle, and modal behavior.
