Laravel Alpine / KTMenu
Hello,
I am using Laravel and have essentially cloned the Livewire repo from here: https://github.com/keenthemes/metronic-tailwind-html-integration/tree/main/metronic-tailwind-laravel-livewire
At the moment I see 'Detected multiple instances of Alpine running' in console. I can resolve by commenting this out in the app.js file but suspect that's probably not the intended approach given this is an example for Livewire?
I was reading the docs on the templates for this (https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel-livewire) and would welcome guidance on step 4 to preserve JS functionality as KT menu highlighting isn't working for me at the moment and wonder if I'm missing something. I'm new to Laravel/Livewire so not sure where the code listed would need to be included in relation to the templates.
Any support most welcome.
Many thanks
Replies (5)
Hi
KTMenu has the functionality KTMenu.updateByLinkAttribute() function exists and can automatically highlight menu items based on URL
The function works by finding menu elements with data-kt-menu="true", then looking for links with matching href attributes, and calling setActiveLink() to expand parent accordions and highlight the active link
Looking at your sidebar code, I notice you're using custom CSS classes (kt-menu-item, kt-menu-link) instead of the standard Metronic classes (menu-item, menu-link). The KTMenu JavaScript expects the standard Metronic menu structure.
You need to add JavaScript to call KTMenu.updateByLinkAttribute(window.location.pathname) on page load. However, there are two approaches:
Option 1 (Recommended): Update your menu HTML to use standard Metronic classes and add the JavaScript call.
Option 2: Keep your current structure but manually handle the active states with Blade templating.
Hi Matthew
Could you please send screenshots of the issue? You can use imgbb.com to upload an image. (link without https)
Thanks
Hi Matthew
Please try this fix.
https://github.com/keenthemes/metronic-tailwind-html-integration/commit/d2bca746e9babdba90754707208b94a763738afd
Thanks
Hi Matthew
We have weekly updates. We will try to include the fixes within this week.
Thank you
Hi Matthew
warning occurs because Alpine.js is being initialized both by Livewire and manually in your app.js file. Here's the immediate workaround:
- In your resources/js/app.js file, comment out or remove the manual Alpine.js initialization:
- Replace the manual Alpine.js initialization with a check to prevent double initialization:
We will fix these issues in the boilerplate repository. We will update the integration to properly handle Alpine.js initialization conflicts and KTMenu highlighting works correctly with Livewire's DOM updates.
