Sidebar submenu instantly closes (reload?) on Laravel Livewire Example Repo
Hi, I set up this repo locally:
https://github.com/keenthemes/metronic-tailwind-html-integration/tree/main/metronic-tailwind-laravel-livewire
The /demo1 renders fine, but when I click on any sidebar item (like “Dashboard” or “My Account”), the submenu briefly opens — styles like `display: flex` are added dynamically - but they are removed almost immediately. It looks like the submenu opens and then is instantly closed again.
This seems to happen inside core.bundle.js, so it's difficult to trace or debug directly.
I'm using Vite (npm run dev). I noticed that the resources/js/app.js in the repo differs from what's shown in the documentation (section 4):
https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel-livewire#convert-layouts
However, even if I copy the app.js code from the docs, I experience the same behavior.
How to fix this?
Replies (4)
Thanks for your help!
Just to clarify: according to the Livewire install guide ( you need to remove Alpine from your `app.js` if it’s already included:
> Make sure Alpine isn't already installed
> If the application you are using already has AlpineJS installed, you will need to remove it > for Livewire to work properly; otherwise, Alpine will be loaded twice and Livewire won't > function. For example, if you installed the Laravel Breeze "Blade with Alpine" starter kit, > you will need to remove Alpine from resources/js/app.js.
After digging into it, I realized that the Livewire example of the Laravel theme mainly differs in that the `base`, `footer`, `header`, and `sidebar` are provided as Livewire components.
Since I only want to use the theme in Laravel with my own custom Livewire components, I decided to stick with the standard Laravel theme instead. That way, I don’t need this JS workaround anymore - correct?
Hi
You are correct. Remove Alpine.js from app.js when using Livewire. Use standard Laravel theme for the layout structure. Add Livewire only for custom components in the content area.
Livewire Version:
- Uses livewire:demo1.sidebar, livewire:demo1.header, etc.
- Has @livewireStyles and @livewireScripts
- Includes livewire/livewire: ^3.6 in composer.json
- Uses {{ $slot }} for content (Livewire component syntax)
Standard Laravel Version:
- Uses @include('layouts.demo1.sidebar'), @include('layouts.demo1.header')
- No Livewire dependencies in composer.json
- Uses @yield('content') for content (Blade template syntax)
Your approach of using the standard Laravel theme with selective Livewire components is good solution. It's fixed the js conflicts.
Hi Adam Nielsen
This is happening because the current resources/js/app.js implementation uses custom JavaScript that conflicts with the core Metronic JavaScript functionality. We will check on this further.
The current implementation uses custom event handlers that conflict with the core Metronic JavaScript.
Replace the current resources/js/app.js with this code:
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() {
// Initialize all Metronic components
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();
}
// Add other Metronic components as needed
}
window.Alpine = Alpine;
Alpine.start();Thanks
Just tested https://github.com/keenthemes/metronic-tailwind-html-integration/tree/main/metronic-tailwind-laravel and this works without issues. Whats making the livewire theme fail?
