Menu items not loading on click in Metronic
We've a Metronic HTML template theme that we have implemented within a Vue.js project, leveraging the Vite bundle. Currently, we're encountering an issue with the functionality of certain theme scripts. Despite these scripts being loaded at the end of the body section, their functionality seems to be malfunctioning.
Upon checking using the browser's development console, the scripts are successfully loaded, and their functions are accessible within the console. This led us to believe that the issue might be related to the build process and the way Vite bundle handles relative paths. When we attempt to use these scripts as external scripts, they load before the content, leading to the same functionality problem.
We've experimented with various solutions such as applying the 'defer' and 'async' attributes to the script. Regrettably, the issue persists even after trying these methods.
At this stage, we're reaching out to the community for insights and guidance. Our primary concern is how to effectively run these scripts within the development environment. Any assistance, suggestions, or advice would be immensely appreciated.
Replies (1)
Hi,
Thank you for reaching out to us.
In our HTML version we initialize our components inside load event, in SPA versions content is rendered differently and to use our js components you need to move initialization from load event to onMounted function.
All components in the HTML version are initialized in js/components/_init.js, you can move this initialization into onMounted as shown below.
onMounted(() => {
nextTick(() => {
KTComponents.init();
});
});You can refer to the initialization example in file src/layouts/main-layout/MainLayout.vue in Metronic Vue demos.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
