Vite support on HTML Demo 39
Dear Support Team,
I hope this message finds you well. My name is Ahmad Bilal, and I am utilizing the KT Metronic theme for our projects.
I am writing to seek assistance with Vite support on the Demo 39 which is a HTML template and we are using it in the Vue js with vite bundle. I have created a vue project using the Demo 39 components and all the things are pretty much working fine, I am using the global css file as in the index.html file now I want them to be added in the build files is it okay or should I use them as the way they are? Also I have added the global script at the end of the page but the functionality is not working like the menu drawer opening and closing, model opening, sub menu toggles. Please also help me out in it.
I checked in the developer console and it giving this error
scripts.bundle.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'on')
at Object.init (scripts.bundle.js:7:25354)
at scripts.bundle.js:7:25578
at Object.onDOMContentLoaded (scripts.bundle.js:7:18138)
at scripts.bundle.js:7:25531
init @ scripts.bundle.js:7
(anonymous) @ scripts.bundle.js:7
onDOMContentLoaded @ scripts.bundle.js:7
(anonymous) @ scripts.bundle.js:7
plugins.bundle.js:25 Uncaught TypeError: Cannot set properties of undefined (setting 'moment')
at plugins.bundle.js:25:170640
at plugins.bundle.js:25:170645<pre lang="php"></pre>
Which means the scripts are attached with the file but its not working due to some issue
Thank you very much for your time and support. We are looking forward to your assistance in resolving this issue and optimizing the user experience for our projects.
Best Regards!
Replies (3)
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
Hi Lauris,
Thanks for your reply, could you please guide me with the script issue as I mentioned, I have created a vue project using the Demo 39 and all the things are pretty much working fine, I am using the global CSS style and JS script in the index.html file the style is working but the functionality is not working like the menu in the main aside opening and closing, model opening, sub menu toggles. I checked in the browser developer tool the files are included and also check by running the script functions in the developer console and it is show. Please also help me out in it. Thanks
Best Regards
Hi Ahmad,
It is an initialization issue, as I mentioned in my previous comment for Vue you should handle our js components initialization differently.
You can trigger initialization from onMounted function in our Vue component.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
