Metronic Bootstrap with Laravel Livewire: UI Elements Stop Working After Navigation
We purchased the **Metronic theme** and started with the **Tailwind HTML template**, manually migrating it to **Laravel**. Initially, we faced issues with **Livewire** (`wire:navigate`) breaking JavaScript functionality. We resolved it by reinitializing the functions provided by the theme like this:
document.addEventListener("livewire:navigated", () => { KTMenu.init = function () { KTMenu.createInstances(); KTMenu.initHandlers(); }; }, { once: true });This worked fine, but we ran into limitations with Tailwind's UI options. To address this, we moved to the Metronic Bootstrap HTML theme and added its bundled assets to our Laravel project. However, we encountered the same issue: Livewire navigation breaks the JavaScript functionality for UI elements like:
- Tooltips
- Dropdowns
- Sidebar animations
The earlier solution (reinitializing functions) doesn't seem to work with Bootstrap's bundled scripts:
<script src="{{ asset("v2/assets/bootstrap/plugins/global/plugins.bundle.js") }}"></script> <script src="{{ asset("v2/assets/bootstrap/js/scripts.bundle.js") }}"></script>I've also tried using the
data-navigate-once attribute with no success.Key Points:
- I don't want to manually reinitialize every individual script.
- The Laravel version of the theme isn't an option as it changes the UI elements and has limited features.
- I'm using Demo 1 of Metronic Bootstrap with static HTML and migrating it into Laravel.
Question:
Is there a **quick and efficient way** to resolve these **conflicts** between Livewire and the Bootstrap JavaScript? Any help or suggestions would be greatly appreciated!
Replies (4)
Hi Umar,
Could you please check this post about a similar issue? Hopefully, it helps.
https://devs.keenthemes.com/question/components-freeze-after-livewire-navigate#answers
Thanks
I added the following code to the Blade file:
@stack("scripts") <!--begin::Global Javascript Bundle (mandatory for all pages)--> @livewireScripts <script> document.addEventListener("livewire:navigated", () => { KTMenu.createInstances(); KTMenu.initHandlers(); }); </script>Problem: The filter is still not working when clicked. Even after performing a hard refresh of the entire page, the issue persists. The filter dropdown does not function as expected after the wire:navigate event.
Filter Code
Here is the filter code that is not working:
<div class="m-0"> <!--begin::Menu toggle--> <a href="#%22%20class=%22btn%20btn-sm%20btn-flex%20btn-secondary%20fw-bold%22%20data-kt-menu-trigger=%22click%22%20data-kt-menu-placement=%22bottom-end" target="_blank" rel="noopener noreferrer"> <i class="ki-duotone ki-filter fs-6 text-muted me-1"> <span class="path1"></span> <span class="path2"></span> </i>Filter</a> <!--end::Menu toggle--> <!--begin::Menu 1--> <div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" > <!--begin::Header--> <div class="px-7 py-5"> <div class="fs-5 text-gray-900 fw-bold">Filter Options</div> </div> <!--end::Header--> <!--begin::Menu separator--> <div class="separator border-gray-200"></div> <!--end::Menu separator--> <!--begin::Form--> <div class="px-7 py-5"> <!--begin::Input group--> <div class="mb-10"> <!--begin::Label--> <label class="form-label fw-semibold">Status:</label> <!--end::Label--> <!--begin::Input--> <div> <select class="form-select form-select-solid" multiple="multiple" data-kt-select2="true" data-close-on-select="false" data-placeholder="Select option" data-dropdown-parent="#kt_menu_673c0c98abe07" data-allow-clear="true"> <option></option> <option value="1">Approved</option> <option value="2">Pending</option> <option value="2">In Process</option> <option value="2">Rejected</option> </select> </div> <!--end::Input--> </div> <!--end::Input group--> <!--begin::Input group--> <div class="mb-10"> <!--begin::Label--> <label class="form-label fw-semibold">Member Type:</label> <!--end::Label--> <!--begin::Options--> <div class="d-flex"> <!--begin::Options--> <label class="form-check form-check-sm form-check-custom form-check-solid me-5"> <input class="form-check-input" type="checkbox" value="1"> <span class="form-check-label">Author</span> </label> <!--end::Options--> <!--begin::Options--> <label class="form-check form-check-sm form-check-custom form-check-solid"> <input class="form-check-input" type="checkbox" value="2" checked="checked"> <span class="form-check-label">Customer</span> </label> <!--end::Options--> </div> <!--end::Options--> </div> <!--end::Input group--> <!--begin::Input group--> <div class="mb-10"> <!--begin::Label--> <label class="form-label fw-semibold">Notifications:</label> <!--end::Label--> <!--begin::Switch--> <div class="form-check form-switch form-switch-sm form-check-custom form-check-solid"> <input class="form-check-input" type="checkbox" value="" name="notifications" checked="checked"> <label class="form-check-label">Enabled</label> </div> <!--end::Switch--> </div> <!--end::Input group--> <!--begin::Actions--> <div class="d-flex justify-content-end"> <button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true">Reset</button> <button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">Apply</button> </div> <!--end::Actions--> </div> <!--end::Form--> </div> <!--end::Menu 1--> </div>
Umar, are you a developer?
Yes, I am a developer working with the Bootstrap HTML 8.2.9 theme from Metronic. However, reinitialization has been quite challenging. Reviewing the entire codebase requires significant time and effort, and I’ve realized that reinitializing functions individually is necessary. While some functions, like KTComponents.init(), offer full component reinitialization, they often cause issues—for instance, specific elements start working as expected, but previously functional elements stop working.
Given our limited time, I’m looking for a way to reinitialize only the necessary scripts for key components such as the header, footer, sidebar, and main content without disrupting the rest. This would be immensely helpful. I’ve also explored the livewire:navigated event script into the script.bundle.js, but it doesn’t seem to resolve the problem. Could you please assist me with finding a better solution?
