Using Metronic 8 (HTML version) with Vue
Hi, I want to use Metronic 8 with Vuejs. I don't want to use the dedicated Vue version because I prefer not to work in Typescript.
I have tried to the most abvious way, by importing CSS and JS assets into Public/index.html, recreating the way it works in the Metronic HTML version. But with this setup, only the CSS asset files work. The JS features work on initial page load, but when I start naviagting between Vue views, it stops working.
Is there a way I can easily import the JS and CSS assets to make it work? I mean without converting all JS logic into Vue logic?
Thanks!
Replies (6)
Hi,
Our js components should work fine with vue as well.
Right now mostly we are initializing our js components in page load event, instead of this, you can trigger js initialization functions in your vue lifecycle hooks.
Thank you for your answer. Indeed this explains why it works on initial pageload but not after changing routes. I have no idea how to trigger the js components from a Vue lifecycle hook though. I guess it would mean doing this (for the Widgets for example) from Vue, right? :
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTWidgets.init();
});
Could you please provide any hint on how to achieve that from Vue? What would I need to export / import and how do I trigger it?
Many thanks
Yes, exactly you will need to update initialization for all files.
For example in file src/js/custom/widgets.js export the KTWidgets instance by adding the code below:
export default KTWidgets;Then in your component, you can import this instance and in the mounted function initialize it with the init function.
import KTWidgets from "path/to/widgets.js";
KTWidgets.init();Thanks!! This works for the Widgets. But how do I do with a more complex JS function like KTMenu for example? I can't just init() that. There are many event handlers and so on. Should I copy all code related to KTMenu into Vue? I tried this but it didn't work. How do I import and export something like that to make it work?
Hi,
For KTMenu you can do this in the same way, just replace the component initialization and leave the rest as it is.
Hello, am also trying to do the same, But I am getting alot of 'moment', 'KTUtil' is not defined in the '/js/custom/widgets.js' file when trying save my vue file.
