Good Template HTML5 version in Vue 3
Hi,
I have recently purchased the HTML5 version template for our product, built with Vue 3. And I have found that the sidebar (kt_app_sidebar_mobile_toggle) and the profile popup menues are not working unless I'm on the root of the page. I'm using the Vue router and after searching a bit, I see that there is a problem with init of the components.
Is there no good way around this using Vue with the HTML5 template? I have tried to make some initialization calls both within the "router.beforeEach" in main.js as well as in the "onMounted" in Vue.js. But no particular success. I have tried "KTComponents.init();" but KTComponents does not exist. So I have tried KTApp and KTMenu without any success.
I accidently purchased the React edition, but it's not being used as we don't use React. But since React and Vue has its similarities, is there a way to npm install (?) the React version of the Vue project?
It would be nice to make this work, because the template itself is very nice 
Thanks!
Replies (19)
Hi,
It's the Good Template HTML5 version in Vue 3. Everything seems to work great besides the popup menues like the sidebar, profile and select2.
Is it possible to make it work with either the HTML version we are using or with the React version of the same template that I accidentally purchased first.
Would be great to not purchase yet another template.
Hi Mats Magnem,
In our HTML version, we initialize our components inside "load" event, this approach works fine for our HTML version, but if you want to use it in SPA you need to change initialization approach.
To move initialization code into router.beforeEach and onMounted is right thing. If you do not have those global instances then I assume that you haven't included all mandatory theme scripts.
Please make sure that you have script tags below.
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/scripts.bundle.js"></script>Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi, thank you.
My index.html in Vue project looks like this:
[...]
<link href="/lib/good-template/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css">
<link href="/lib/good-template/css/style.bundle.css" rel="stylesheet" type="text/css">
<link href="/lib/main.css" rel="stylesheet" type="text/css" />
</head>
<body data-kt-name="good" data-kt-app-layout="light-sidebar" data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true" data-kt-app-sidebar-push-header="true" data-kt-app-sidebar-push-toolbar="true" data-kt-app-sidebar-push-footer="true" class="app-default">
<div class="d-flex flex-column flex-root app-root"></div>
<script src="/lib/good-template/plugins/global/plugins.bundle.js"></script>
<script src="/lib/good-template/js/scripts.bundle.js"></script>
<script type="module" src="/src/main.js"></script>
</body>And my "lib" folder is placed in the Vue "public" folder. Meaning it's not built and bundled with the rest of the Vue scripts. So it's included allright, and it's working as it's supposed to when I'm in the root of the site. When I'm navigating to a route, like "/home" or "/manage", it's not working anymore.
So something's up with the Vue router and how the KT template is initialized or a mix of those.
I have looked through all the KT bundle js-files, and there is no trace of "KTComponents" there. So I guess I would need to initialize shomething else. I have tried, as mentioned "KTApp.init()" as well as "KTMenu.init()" within both the router.beforeEach and onMounted in my App.Vue.
Would it make sense to move more stuff from index.html to App.vue? Or move things from App.vue to index.html?
Or would it make sense to defer the script tag? Maybe it doesn't make sense as initialization happens on DOM loaded?
Grasping for a solution here, sorry.
Thanks again.
Hi,
KTComponents instance is in js/components/_init.js.
This file initializes all our components it already contains initialization for KTMenu and KTApp.
You can verify that you have KTComponents instance available globally from your console in the browser, open console and run window.KTComponents, if you will receive an object then your scripts were loaded correctly.
Alternative solution which you can consider is to avoid using our bundled js files but instead use the original versions of js files and fully handle initialization inside your Vue events.
For example, you can export KTComponents instance export default KTComponents; from _init.js then you can import this instance to your Vue component and initialize it.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi again,
This is where I can't quite see what's going on. window.KTComponents always returns undefined in the DevTools console. But the side menu works as it should in mobile view (DevTools device toolbar), but not when I navigate to a route like "/home" etc. But when at root "/" it's all well and dandy.
I have checked
js/scripts.bundle.jsjs/widgets.bundle.jsplugins/global/plugins.bundle.jsI use the latest version of the Good template, downloaded just about 3-4 weeks ago. I would like and prefer to use the bundle js files as long as it's possible.
I also cannot find a js/components/_init.js file anywhere. I find a _init.sass file, but that's for css. And I would prefer to only use the bundle files. What am I missing here?
I also tried to use the template in a straight-up html project without Vue or any other framework, and that worked as it should. Just like when I'm in my root of my Vue site. It's when navigating to a route/sub page when the KT js breaks.
Hi,
Could you please specify which Good version are you using?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Good version 1.1.0, downloaded a few weeks ago, after getting an email about an update (in August) that was built on Bootstrap 5.2.
And it's the HTML version. I Lao have purchases the React version, and if that is somehow compatible with Vue, it would be nice to know how.
Hi,
Sorry for the misunderstanding, it seems like this file wasn't included in the latest production release, it will include in the next Good theme release.
But you still can initialize all the components by calling their initialization function separately.
Here is a list of components that should be initialized globally.
KTApp.init();
KTDrawer.init();
KTMenu.init();
KTScroll.init();
KTSticky.init();
KTSwapper.init();
KTToggle.init();
KTScrolltop.init();
KTDialer.init();
KTImageInput.init();
KTPasswordMeter.init();Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you, I will try that. I assume that would be have to be done in router.beforeEach as my problem is that the KT js does not seem to be working when not on the page root.
CSS is working fine, but the js seems to be not working.
Hi,
I think initialization inside router.beforeEach should work.
Also, inside router.beforeEach you can wrap your initialization code with setTimeout.
setTimeout(() => {
// do your initialization here
}, 0);Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks. I did this in router.beforeEach with no success. But I did the same thing in onMounted in my App.vue and it worked really nice.
So, I'm a happy guy now. Thanks for all help :-)
And if the Good template gets Vue support in some future, I will implement it that way.
Happy weekend!
Hi,
Glad to hear that. All the best with your project!
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Your Support Matters!
Additional side note.
The KT scripts seems to stop working when I do a window.history.replaceState(...); in case that's interressant to know. I do that on certain pages, and that causes the KTMenu sidebar (in mobile view) and profile popup (in normal view) to stop working. Probably the same reason why it was not working in Vue routes.
Hi Mats Magnem,
Do our scripts stop working in all components or only inside page?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
It seemes to be that whole page. I have a select2 in the page (within the router view) that stood working, and the sidebar and profile popup stops working (outside router view in App.vue)
Hi Mats Magnem,
This problem with components can happen for multiple reasons and it is hard to tell what causes it without debugging.
If you have already purchased our Good React version, you can check how we handle component initialization there and then apply the same approach to your Vue project.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Sure, no problem. It works now, and I know how it may be fixed in case it stops working. So thanks for all help ðŸ‘
Hi Mats Magnem,
Please don't hesitate to reach out if you need anything more from us.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
