Hi,

We have tested your code and it works fine. However, there is rendering condition in your components that needs attention. Please ensure that your menu element is rendered correctly.

Additionally, verify that the MenuComponent initialization still exists in the src/core/plugins/keenthemes.ts file.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

yes, MenuComponent initialization still exists in the src/core/plugins/keenthemes.ts file

import {
DrawerComponent,
MenuComponent,
ScrollComponent,
StickyComponent,
SwapperComponent,
ToggleComponent,
} from "@/assets/ts/components";
import { ThemeModeComponent } from "@/assets/ts/layout";
import type { App } from "vue";
import KTIcon from "@/core/helpers/kt-icon/KTIcon.vue";

/**
* @description Initialize KeenThemes custom components
*/
const initializeComponents = () => {
ThemeModeComponent.init();
setTimeout(() => {
ToggleComponent.bootstrap();
StickyComponent.bootstrap();
MenuComponent.bootstrap();
ScrollComponent.bootstrap();
DrawerComponent.bootstrap();
SwapperComponent.bootstrap();
}, 0);
};

/**
* @description Reinitialize KeenThemes custom components
*/
const reinitializeComponents = () => {
ThemeModeComponent.init();
setTimeout(() => {
ToggleComponent.reinitialization();
StickyComponent.reInitialization();
MenuComponent.reinitialization();
reinitializeScrollComponent().then(() => {
ScrollComponent.updateAll();
});
DrawerComponent.reinitialization();
SwapperComponent.reinitialization();
}, 0);
};

const reinitializeScrollComponent = async () => {
await ScrollComponent.reinitialization();
};

/**
* Initialize KTIcon global component instance
* @param app vue instance
*/
function initKtIcon(app: App<Element>) {
app.component("KTIcon", KTIcon);
}

export {
initializeComponents,
reinitializeComponents,
reinitializeScrollComponent,
initKtIcon,
};

Hi,

The src/core/plugins/keenthemes.ts just contains helper functions for our components initialization.

Make sure that initializeComponents is triggered in src/App.vue.

onMounted(() => {
 nextTick(() => {
 initializeComponents();
 });
 });

In src/App.vue I have :

onMounted(() => {
 nextTick(() => {
 initializeComponents();

 bodyStore.removeBodyClassName("page-loading");


 });
 });

when i click on router-link then back to open actions button
its open

<template v-slot:more="{ row: row }">
 <router-link
 :to="PATHS(row.id)"
 class="btn btn-icon btn-secondary w-30px h-30px me-3"
 >
 <KTIcon icon-name="tablet-text-down" icon-class="fs-1 mx-2" />
 </router-link>
 <router-link
 :to="PATHS(syncSource)"
 class="btn btn-icon btn-light-primary w-30px h-30px me-3"
 >
 <KTIcon icon-name="text-number" icon-class="fs-1 mx-2" />
 </router-link>
 <button
 class="btn btn-sm btn-light btn-active-light-primary fs-8"
 data-kt-menu-trigger="click"
 data-kt-menu-placement="bottom-end"
 data-kt-menu-flip="top-end"
 >
 {{ t("actions") }}
 <KTIcon icon-name="down" icon-class="fs-8 m-0" />
 </button>
 <div
 class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fs-7 w-50px py-2"
 data-kt-menu="true"
 >

Hi,

Do you encounter a similar issue on our preview page?
https://preview.keenthemes.com/metronic8/vue/demo1/dashboard#/

Are you experiencing this problem with all the menu trigger buttons on the page, or is it only related to specific buttons?

Regards,
Lauris Stepanovs,
Keenthemes Support Team