Hey,
I'm using Metronic with Laravel, and I've always run into issues when trying to make Livewire work properly — especially when using wire:navigate
. The main problem seems to be that the Metronic components stop working after navigation. Dropdowns, modals, tooltips… everything just dies...
Recently, I noticed you guys updated the docs and added a section for Livewire integration: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel-livewire
However… the issue still persists. Whenever I use wire:navigate
, the DOM updates, but Metronic components (like dropdowns, menus, etc.) stop working completely. It seems like the reinitialization just isn’t triggering as expected.
I also tried your GitHub demo and even downloaded the latest files from ThemeForest, thinking it might be a version-related issue… but still, nothing changed. The behavior remains the same.
Is there a more reliable way to hook into Livewire’s lifecycle with Metronic to ensure components reinitialize properly after navigation?
Appreciate any help!
I have the same issue. All other libraries work this way when you reinitialise all elements on the "livewire:navigated" listener.
Can you please take a look as this was marketed as compatible with livewire but this is not the case.
Thanks!
Hi
To fix this, you need to manually re-initialize the Metronic components by hooking into Livewire's navigation lifecycle.
document.addEventListener("livewire:navigated", () => {
// Re-initialize all Metronic components
KTComponents.init();
// The following are some of the most used components.
// You can add or remove them as needed.
KTMenu.init();
KTDrawer.init();
KTToggle.init();
KTScroll.init();
KTSticky.init();
KTSwapper.init();
KTRotate.init();
});
Hey Faizal, thanks for the reply!
Yeah, I had already seen the documentation and made sure to include the livewire:navigated
listener in my code. My app.js
is already reinitializing the Metronic components using a centralized initializeMetronicComponents()
function.
So even with that reinitialization logic in place, components like dropdowns, tooltips, and drawers still break after navigating with wire:navigate
.
// resources/js/app.js
import "./bootstrap";
import Alpine from "alpinejs";
// Initialize Metronic functionality
document.addEventListener("DOMContentLoaded", function() {
initializeMetronicComponents();
});
// CRITICAL: Re-initialize after Livewire updates
document.addEventListener("livewire:navigated", function() {
initializeMetronicComponents();
});
// CRITICAL: Re-initialize after any Livewire content updates
document.addEventListener("livewire:updated", function() {
initializeMetronicComponents();
});
// Centralized Metronic component initialization
function initializeMetronicComponents() {
if (window.KTDrawer) {
KTDrawer.createInstances();
}
if (window.KTMenu) {
KTMenu.createInstances();
}
if (window.KTSticky) {
KTSticky.createInstances();
}
if (window.KTScrolltop) {
KTScrolltop.createInstances();
}
if (window.KTImageInput) {
KTImageInput.createInstances();
}
if (window.KTPasswordMeter) {
KTPasswordMeter.createInstances();
}
}
window.Alpine = Alpine;
Alpine.start();
wire:navigate
... just to see if the components still behave correctly after the transition?