Open-source by Keenthemes!Support our KtUI and ReUI open-source projects and help with growth.
Star on Github 
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
And this is where the page not working normall
This is my code
<!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=" />
<!--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
</head>
<body id="kt_app_body"
class="app-default">
<!--begin::App-->
<div class="d-flex flex-column flex-root app-root"
id="kt_app_root">
<!--begin::Page-->
<div class="app-page flex-column flex-column-fluid"
id="kt_app_page">
<!--begin::Header-->
@livewire("header-component")
<!--end::Header-->
<!--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")
</body>
</html>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?.
Yah same. We can't make it work.
Did you manage to find the solution?
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
