Laravel Livewire Integration
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!
Replies (2)
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();
});every time you navigate using wire:navigate, all the necessary Metronic components are re-initialized.
Thanks
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();I followed the docs step-by-step, but the issue is still happening.
Would it be possible for you guys to test this on your end? The current demo in the docs only covers demo1 and demo2... Maybe try adding a simple extra page, like "users", and test navigating to it using
wire:navigate... just to see if the components still behave correctly after the transition?Is there anything else I might be missing or another recommended approach?
Really appreciate your time!
