Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
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
<!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
</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 (2)
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
