How to Integrate Metronic 9.1.2 to Inertia.js or Livewire project
I try to integrate metronic demo 7 to new project, the only problem is to init KTComponents like sticky header, if first load the sticky is work, but if navigate to another page the sticky not work, the class is not add to the header.
- Inertia.js (React) Example
// resources/js/Layouts/AppLayout.jsx
export default function AppLayout({ children }) {
useEffect(() => {
KTComponents.init();
})
return <>{children}</>
}- Livewire Example
// resources/js/app.js
import "../metronic/core/index";Replies (7)
Hi El Bhiruni
Sorry for the delay. Could you please try this? Try switching to the message.processed hook.
// Use the "message.processed" hook which fires after an update is complete
Livewire.hook("message.processed", (message, component) => {
KTComponents.init();
});
Thanks
Hi
Sorry for late reply, i tried it but still not work, now i'm using laravel blade.
Thanks
Hi
Do you have the same issue when using laravel blade?
Do you still work on Livewire? or completely removed it.
Thanks
Hi
It's perfectly fine on laravel blade.
Livewire with metronic 9.1.2 and Inertia (React.js) is on my local, just for testing before implement on real project, and maybe next time i will test it again.
Thanks
Hi
You need KTComponents.init() is called every time the page changes. This can be achieved by using Inertia's usePage hook.
import { useEffect } from "react";
import { usePage } from "@inertiajs/inertia-react";
export default function AppLayout({ children }) {
const { component } = usePage();
useEffect(() => {
// Initialize Metronic components
KTComponents.init();
// Optional: Cleanup if needed
return () => {
// Cleanup logic (if any)
};
}, [component]); // Re-run effect when the component changes
return <>{children}</>;
}The KTComponents.init() is called every time the component mounts or updates.
In Livewire, you need to ensure that KTComponents.init() is called after Livewire updates the DOM. You can use Livewire's lifecycle hooks to achieve this.
import "../metronic/core/index";
import { Livewire } from "../../vendor/livewire/livewire/dist/livewire.esm";
// Initialize Livewire
Livewire.start();
// Reinitialize KTComponents after Livewire updates
Livewire.hook("element.updated", (el) => {
KTComponents.init();
});the sticky still not work
import { Header, Footer } from ".";
import { Head, usePage } from "@inertiajs/react";
import "./styles/index.css";
import { PropsWithChildren, useEffect } from "react";
import KTComponents from "@/_metronic/core/index";
interface Props extends PropsWithChildren {
title?: string;
}
export default function AppLayout({ title = "", children }: Props) {
const { component } = usePage();
useEffect(() => {
KTComponents.init();
}, [component]);
return (
<>
<Head title={title} />
<div className="flex grow flex-col [[data-sticky-header=on]_&]:pt-[--tw-header-height-default]">
<Header />
{/* Content */}
<main className="grow" role="content">
{children}
</main>
{/* End of Content */}
<Footer />
</div>
</>
);
}- the sticky still not work if navigated to other page for inertia.js (react) and livewire
- on inertia.js (react) the menu item toggle dropdown work if navigated to other page, and not work for livewire
