Metronic x Livewire Navigate
Hi, I'm using Metronic Demo 44 with Livewire v3.6.x, when I navigated using wire:navigate, the page content changed, but CSS of the whole page is not working. This is where the page work normally https://jmp.sh/M5hnoAly
And this is where the page not working normall https://jmp.sh/nrngDzEA
This is my code
<pre lang="php"> <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ $title ?? 'Page Title' }}</title> <link rel="shortcut icon" href="{{ asset('assets/favicon.png') }}" type="image/x-icon"> <!--begin::Fonts(mandatory for all pages)--> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700" /> <!--end::Fonts--> <!--begin::Global Stylesheets Bundle(mandatory for all pages)--> <link href="{{ asset('admin-assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" data-navigate-track /> <link href="{{ asset('admin-assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css" data-navigate-track /> <!--end::Global Stylesheets Bundle--> <script> // Frame-busting to prevent site from being loaded within a frame without permission (click-jacking) if (window.top != window.self) { window.top.location.replace(window.self.location.href); } </script>@yield('styles')
<style>
button:disabled {
pointer-events: unset !important;
cursor: not-allowed !important;
}
</style>
@livewireStyles
<!--begin::Wrapper-->
...rest of my code
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::App-->
<!--begin::Scrolltop-->
<div id="kt_scrolltop"
class="scrolltop"
data-kt-scrolltop="true">
<i class="ki-outline ki-arrow-up"></i>
</div>
<!--end::Scrolltop-->
<!--begin::Modals-->
@yield('modals')
<!--begin::Modals-->
@livewireScripts
<script data-navigate-once
src="{{ asset('admin-assets/plugins/global/plugins.bundle.js') }}"></script>
<script data-navigate-once
src="{{ asset('admin-assets/js/scripts.bundle.js') }}"></script>
<script>
document.addEventListener('livewire:navigated', () => {
KTMenu.init = function() {
KTMenu.createInstances()
KTMenu.initHandlers()
}
KTMenu.init()
KTApp.init()
KTScrolltop.createInstances()
})
document.addEventListener('livewire:init', () => {
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": true,
"progressBar": true,
"positionClass": "toastr-bottom-center",
"preventDuplicates": true,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
Livewire.on('toastr', (event) => {
const {
type,
message
} = event[0];
if (['success', 'error', 'info', 'warning'].includes(type)) {
toastr[type](message)
} else {
console.error(`Invalid toastr type: ${type}`)
}
})
})
</script>
@stack('scripts')
I don't know what's wrong. Could you please help me to fix this?
Thank you.
Replies (3)
Hi Faizal,
Thank you for replying.
I've tried your way, but still no luck.
I have to temporary remove wire:navigate from all links.
Do you have any other suggestions that I could use to overcome this issue?.
Hi Kien Hoanh
When using wire:navigate, Livewire performs a client-side navigation that preserves some elements but doesn't properly reinitialize all Metronic components.
The issue is you're only reinitializing a few Metronic components. You need to reinitialize all relevant components after navigation:
document.addEventListener("livewire:navigated", () => {
// Core components
KTApp.init();
KTMenu.createInstances();
KTMenu.initHandlers();
KTScrolltop.createInstances();
// Additional critical components
KTImageInput.init(); // For image uploads
KTDrawer.createInstances(); // For drawers/sidebars
KTScroll.createInstances(); // For custom scrollbars
KTSticky.createInstances(); // For sticky elements
KTToggle.createInstances(); // For toggle elements
KTDialer.createInstances(); // For number inputs
KTPasswordMeter.createInstances(); // For password strength
// Initialize Bootstrap components
var tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle="tooltip"]"));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
var popoverTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle="popover"]"));
popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
})Some pages might have specific components that need initialization:
document.addEventListener("livewire:navigated", () => {
// Core initialization (as above)
// Page-specific components
// Check if specific elements exist before initializing their components
if (document.querySelector("[data-kt-image-input]")) {
KTImageInput.createInstances();
}
// Add any other page-specific initializations
});If you continue having issues, you might consider using Livewire without wire:navigate for complex pages:
<!-- For simple pages -->
<a href="/dashboard" wire:navigate >Dashboard</a>
<!-- For complex pages with many components -->
<a href="/complex-page" >Complex Page</a>This way, full-page reloads handle the complex pages.
Let me know if this helps or if you need further adjustments
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
