12202 comments found.
No new update? Last update was on August 6.
Hello,
Thanks for keeping in touch.
It is ready, however we are doing final checking. Our target is to release it on Monday with a brand new unexpected “Support Forum” demo.
Best.
Hi,
When I open the below page in mobile screen it automatically hiding the first block that contains the profile menus (profile overview, profile information, change password etc). How can I fix this issue?
https://preview.keenthemes.com/metronic/react/demo1/user-profile/profile-overviewThanks, Prince J Painadath
Hi,
Sorry for the late reply.
It is a bug and we will fix it in the upcoming releases, now as a temporary solution you can follow steps below.
1)Add offcanvas toggle button:<button class="burger-icon burger-icon-left mr-4 d-inline-block d-lg-none" id="kt_subheader_mobile_toggle" > <span /> </button>2)And initialize new off-canvas instance in your profile page:
new KTOffcanvas('kt_profile_aside', {
overlay: true,
baseClass: 'offcanvas-mobile',
toggleBy: 'kt_subheader_mobile_toggle'
});
Regards,
Lauris
Can you give me a guide on vue seo optimization pre-rendering?
Hi 
,
If you need any further help with Metronic Vue please contact our support via support@keenthemes.com
Regards, Sean
Hi Sean,
I know that you said once that it is very rare that Metronic HTML code change.
Could you please tell on the Changelog page or in comments or …, if any change in the occur in Metronic Html code. Please.
it is very crusual for us.
Thank you sooooo much.
Hi ,
Noted, we will consider this in the future updates.
Regards, Sean
That’s wonderfull to hear that. Please,
Because we usualy when a new release of metronic comes out, we usualy copy all the sources to override the old one, since it is hard to track HTML changes on diff…. we take your words for granted as HTML very rare to change.
Thank you.
Hi,
Sure, we will include the core HTML changes in the changelog.
Regards, Sean
Still no update for this week, so since 14 days now (last update 6th of August)?
So there won’t be any update this week (today 14th of August, last update 6th of August) as before?
Although you announced it last week?
keenthemes 6 days ago Our next planned update will be within the next week.
Hi ,
We are preparing the new update now and it should be out in several hours.
Regards, Sean
Hi ,
Thanks for your patience. This new v8.0.23 is ready we had to reschedule to coming Monday.
Regards, Sean
Hi,
having issues when using the v8 Vue JS Demo 1 version. I just copied the files to my project, installed modules, build and run my app but I am always getting the following exception in Chrome console:
Uncaught (in promise) TypeError: Object(...) is not a function
at eval (webpack:///./src/components/widgets/tables/Widget9.vue?./node_modules/vue-loader-v16/dist/templateLoader.js??ref-5-0-1:8)
at Module../node_modules/vue-loader-v16/dist/templateLoader.js?./node_modules/vue-loader-v16/dist??ref
./node_modules/vue-loader-v16/dist/index.js?!./src/components/widgets/tables/Widget9.vue?vue&type=template&id=076baeca (13.js:23)
at webpack_require (app.js:85)
at eval (webpack:///./src/components/widgets/tables/Widget9.vue?:2)
at Module../src/components/widgets/tables/Widget9.vue?vue&type=template&id=076baeca (13.js:59)
at webpack_require (app.js:85)
at eval (webpack:///./src/components/widgets/tables/Widget9.vue?:2)
at Module../src/components/widgets/tables/Widget9.vue (13.js:35)
at webpack_require (app.js:85)
at eval (webpack:///./src/views/Dashboard.vue?./node_modules/cache-loader/dist/cjs.js??ref-
13-0-0-0!./node_modules/vue-loader-v16/dist??ref—0-1:3)./node_modules/cache-loader/dist/cjs.js??ref
Any ideas?
Thanks!
/Michaël
Hi,
It is a bug and we already fixed it, fix will be available within the next Metronic v8.0.23 release, we are planning releases for today.
As a temporary solution you can follow the steps below:
1)Delete node_modules folder and package-lock.json.
2)Run yarn command to install dependencies.
3)Run yarn serve to run the project.
If you need a fix urgently please send your email address to our support email support@keenthemes.com I will share with you the latest version with all the latest fixes.
Regards,
Lauris
Hi,
using the temp fix its working thanks.
Once more question, I am using the Vue JS version but now I see that not everything is available on the Vue JS framework? Like multiple toolbars on the HTML, other apps, ...
Any idea when all of this will be on the Vue framework available?
Because I won’t be using the header menu but instead I want the page title and breadcrumb over there.
On some pages then I will be using the toolbar using buttons and icons like toolbar 3 on the HTML version but its not included in Vue JS.
Thanks!
Regards, Michaël
Hi,
Yes currently our vue version doesn’t contain all html version features, but we are working on the integration of new plugins and functionality, we will be including them gradually. Actually, you can reuse any functionality from our html version in vue by referring to the html version codebase.
Let me know if you will need any guidance.
Regards,
Lauris
Hi,
thanks for your response, will do that!
I have another issue in the Vue tables widget. When I add a column with a button menu dropdown it doesn’t open the menu when on click.
Code:
<button class=”btn btn-sm btn-light btn-active-light-primary” data-kt-menu-trigger=”click” data-kt-menu-placement=”bottom-end” data-kt-menu-flip=”top-end” > Actions <inline-svg src=”media/icons/duotone/Navigation/Angle-down.svg” /> </button> View Delete
Any idea?
Thanks!
Regards, Michaël
You should reinitialize your menu component in widget mounted function.
Import component:
import { MenuComponent } from "@/assets/ts/components/MenuComponent";
Reinitialize instances:
onMounted(() => {
MenuComponent.reinitialization();
});
Regards,
Lauris
Hmmm tried but didn’t work. Still no menu shown, also no errors in console.
Regards, Michaël
I think it has to do with the dynamic table module where I use an async function to retrieve the data from our API. So during onMount no elements have been added so nothing to reinit in the MenuComponent.
I tried to call this method in the ’.then()’ callback of the api after I set the data on the reactive property but doesn’t work either.
Each row of the table has its own dropdown button and menu to be reinit.
Any ideas?
Thanks!
Regards, Michaël
Hi,
solved it by wrapping the reinit in a settimeout for now, don’t know if this is the correct solution, but now after the API call inside the ‘then()’ function I applied following code:
setTimeout(() => { MenuComponent.reinitialization(); }, 0);
and now it renders the menu.
Regards, Michaël
Hi,
Thanks for your feedback.
Yes, solution setTimeout is acceptable.
Can you please specify which table widget are you using?
Regards,
Lauris
Hi,
using the Table Widget 9 from the Vue template.
Regards, Michaël
In our preview page all table widget menus are working fine.
Looks like you might have problems then use widgets on other pages, the menu reinitialization on your page should help.
Regards,
Lauris
Hi Keenthemes.
Hope Vertical bootstrap tabs will be released in the next update.
thank you
Hi ,
Thanks for reminding this. We will try to release this and other features that you requested in the next week’s update.
Regards, Sean
Ah yeah, also Ajax datatables.net and filtering options as you go, 
Thank you sean.
Hi ,
Sure, so many features are in the works so hopefully we will implement this one soon as well.
Regards, Sean
I’m really looking forward for getting Metronic 8 for angular 12 as well, please release it next week because it kinda got delayed a lot and a lot of peoples are waiting for it.
Hi ,
Thanks for your interest in Metronic.
We are preparing it for release now and hopefully it will be out within the next week.
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean
When do you plan to share the Metronic 8 Demo 1 Angular 12 version? It’s a bit important to me
Hi ,
Thanks for your interest in Metronic.
We are preparing it for release and hopefully it will be out within the next week and you can get it for free.
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean
Components from the Material-UI will be available in React METRONIC 8?
Hi majcoo96,
You can use MUI (https://material-ui.com/) with React Metronic 8, but our Layout is based on Bootstrap and we don’t have a plan move from Bootstrap to MUI.
Regards, Keenthemes support
Hi i am using metronic 8 laravel version (RTL) using webpack i have problem in RTL with select2 the (after i activate RTL it’s have css problem) is there any way skip this plugin from RTL because it has own RTL support is webpack have any option todo this like gulp “compile”: { “rtl”: { “enabled”: false, “skip”: [ “select2”, “line-awesome”, “fontawesome5”, “nouislider”, “tinymce”, “sweetalert2” ] } } or there are another way to fix this and i miss something i see in online demos you fix it
Hi,
For the RTL, we use this plugin. In their docs, you can use comment in scss as directive to ignore RTLhttps://rtlcss.com/learn/usage-guide/control-directives/index.html
In this scss file, could you please try to edit
resources/assets/core/plugins/plugins.scss
/*rtl:begin:ignore*/ @import "~select2/dist/css/select2.css"; /*rtl:end:ignore*/
Thanks
hi thanks for your help but i tried it and it’s not working
Hi,
At the moment, we could not find solution for this issue. We will find a way to exclude select2 from RTL process.
Thanks
hi
please add sample folder for html called basic_sample contains only required files without any additional third party and one page only as basic startup
and later i will add any needed files or plugin need hope you consider this request
Hi ,
Thanks for your feedback. We will consider this in the next update.
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean
hi i’m using metronic 7
can you add more breadcrumber separators to metronic theme like less than icon or arrow and also support rtl and ltr for these icons
if i want to do that how can i do that?
Hi ,
Thanks for your feedback. We will consider in the next update. You can refer to “Without Separator” example and add icons within the items https://preview.keenthemes.com/metronic8/demo1/documentation/base/breadcrumb.html
Regards, Sean
Hi guys,
amazing theme congratz!
One question, I see on the image with all the tiles a green sales summary tile with Your balance and then a list of sales, revenue, growth, dispute. I want to see a preview of that but can’t find it on the demos.
Can you point me into the right direction?
Thanks!
Regards, Michaël
Hi ,
If you need any further clarifications please do let us know.
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean
Hi Sean,
its not there I already looked at that place. Its hard to share a screenshot of the tile I am talking about. Maybe I can sent you it by mail so its clear for you about which one I am talking about?
Thanks!
Regards, Michaël
Hi,
Please will you add KTDatatable support for Metronic 8 ?
I’m talking about Metronic custom plugin not Datatable.net
Hi ,
Thanks for your interest in Metronic.
Please note that KTDatatable will not be added into Metronic 8. Instead, we will be using DataTables.net plugin as the primary data table solution. For more info please check the plugin integration documentation here https://preview.keenthemes.com/metronic8/demo1/documentation/general/datatables/overview.htmlRegards, Sean
Hey,
when running npm install with demo 1 from the vue version I get this error:
npm ERR! code ERESOLE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: demo1@8.0.22
npm ERR! Found: vuex@4.0.2
npm ERR! node_modules/vuex
npm ERR! vuex@”4.0.0” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vuex@”3” from vuex-module-decorators@1.0.1
npm ERR! node_modules/vuex-module-decorators
npm ERR! dev vuex-module-decorators@”1.0.1” from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with—force, or—legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution. any fix ?
Hi,
It is a bug and we already fixed it, fix will be available within the next Metronic v8.0.23 release.
As a temporary solution you can follow the steps below:
1)Delete node_modules folder and package-lock.json.
2)Run yarn command to install dependencies.
3)Run yarn serve to run the project.
If you need a fix urgently please send your email address to our support email support@keenthemes.com I will share with you the latest version with all the latest fixes.
Regards,
Lauris
Hi , Metronic\vue3_bootstrap5\demo7 template After installing npm packages, when I run serve There is a missing dependency
import { headerFixed, headerFixedOnMobile } from ”../../../../demo2/src/core/helpers/config”;
ERROR in ../demo2/src/core/helpers/config.ts:1:26
TS2307: Cannot find module ‘vue’ or its corresponding type declarations. > 1 | import { computed } from “vue”;
| ^^^
2 | import store from "@/store/index";Hi,
It is a bug and we already fixed it, fix will be available within the next Metronic v8.0.23 release.
As a temporary solution you can follow the steps below:
1)Delete node_modules folder and package-lock.json.
2)Run yarn command to install dependencies.
3)Run yarn serve to run the project.
If you need a fix urgently please send your email address to our support email support@keenthemes.com I will share with you the latest version with all the latest fixes.
Regards,
Lauris
Greetings,
We are looking into purchasing an admin theme for use on our own projects and this looks a suitable candidate, we do have a question though about package/library management.
How do you currently handle package/library versions? Do you have to do a new release with updated packages (everything is already packaged up) or are we able to control updating packages through npm/yarn ourselves?
If it is release based, what does your lifecycle look like in respect to that?
One of the important things we need to be able to do is to keep packages up to date, in respect of vulnerabilities packages may have from time to time.
Thank you
Hi ,
Thanks for your interest in Metronic.
Metronic comes with npm/yarn package files and it’s own build tools that allows you to install all packages by yourself via yarn/npm and build the assets with gulp or webpack builders.
We keep the packages up to date with our weekly product updates by managing all the used package updates and patches. Some packages requires certain integration work so in package.json we manage the package versioning as well.
The update process is quite straightforward where you just need to reinstall the packages, and rerun the build tools after replacing the theme’s core folders(tools and src) from the latest version.
If you need any further clarifications please do let us know.
Regards, Sean
That’s great, thank you.
After looking at the docs a little more. We can take the theme and customize it to our needs, quite a bit, from the looks of it:
- Styling
- Removing unnecessary plugins (if we wanted to)
- Adding new npm packages we may need or want to useAll of this then fits into the build steps that you provide. The only thing we then need to be careful of is fitting updates around any changes that we make, I assume?
Apart from your custom plugins, which understandably will be managed within the template themselves. Which we would have to update when you release.
If there is anything I have understood incorrectly, please do let me know
I think that gives me enough information to go away with and talk to my team. Our aim, if we purchase, is to fit the HTML version of this into a .NET core MVC project and having all the build tools setup, as they are, should work well
Thank you for the quick response
Hi ,
Yes, we are on the same page. The only thing to mention that when it comes to HTML code fixes integration you can use code differ tools to find the breaking changes in the html code(if any) that happens quite rare in our updates. Anyways you can always contact via our support support@keenthemes.com for further assistance.
All the best with your projects!
Regards, Sean
Hi, I need to work with metronic 8 – demo 6 for Laravel. is there an ETA on that demo? Thanks, greatly appreciate it!
Hi ,
Thanks for your interest in Metronic.
At the moment we can’t confirm the ETA. Probably It can be out within 1-3 weeks. But we will do our best to speed those pending demos.
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean
Hi,
I would like to ask if you plan to upgrade the Vue version compatibility so the v3.2 features, such as <script setup> can be used within the theme?
Thanks for the fantastic work and continuous updates!
Hi,
We already use Vue 3 in Metronic 8, you can check the preview here: https://preview.keenthemes.com/metronic8/vue/demo1/#/dashboardRegards,
Lauris
Hi Lauris,
Yes, but for some reason when I import a Test.vue file containing the following example code into a parent component, it does not render the {{ color }} value nor the style. I thought this might be a compatibility issue, but please let me know if I’m missing something, I am quite new to vue.
Test.vue:
<script setup> import { ref } from ‘vue’; const color = ref(‘red’); </script>
<template> <button @click=”color = color === ‘red’ ? ‘green’ : ‘red’”> Color is: {{ color }} </button> </template>
<style scoped> button { color: v-bind(color); } </style>
Thank you!
Hi,
I think that your issue is in the styles section, you can’t use js variables in the styles section, but you can achieve the same result with style attribute binding.
Check the example below.
<script setup>
import { ref } from "vue";
const color = ref("red");
</script>
<template>
<button @click="color = color === 'red' ? 'green' : 'red'" :style="`color: ${color}`">
Color is: {{ color }}
</button>
</template>
Regards,
Lauris
Hi Lauris,
Thanks for the suggestions. Unfortunately the code still doesn’t work, even without the style section.
By the way, the example code I shared was taken from the official Vue site (blog.vuejs.org/posts/vue-3.2.html).
What could be the issue?
Can you please specify which version of Metronic are you using?
Regards,
Lauris
The latest, v8.0.22
Hi,
Yes, your version of the code requires Vue v3.2, we will take a look at this version and update it in upcoming releases.
If you are using the latest version of Metronic then my example should be working.
Did you have any errors in your browser console?
Regards,
Lauris
Hi Lauris,
That’s fantastic, thanks for looking into the update.
Unfortunately your example still doesn’t work. I get the button on the page with the text ‘Color is:’ but no value is shown. There are no errors in the console either.
Hi,
Can you try example with standard component structure?
<template>
<button
@click="color = color === 'red' ? 'green' : 'red'"
:style="`color: ${color}`"
>
Color is: {{ color }}
</button>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "test",
components: {},
setup() {
const color = ref("red");
return {
color,
};
},
});
</script>
Regards,
Lauris
Hi Lauris,
Yes, this works beautifully. I only encounter the problem when <script setup> tag is used.
I did some tests and it seems that on production, after running ‘yarn run build’ it is working as expected, but not when developing and running on localhost with ‘yarn serve’.
Hi,
Thank you for you feedback. We will check it, probably it is related to the vue version only.
Regards,
Lauris
Hi Lauris,
Thanks for your support. I will wait and try again with the updated Vue 3.2 version when it comes out.
Best wishes
Hi,
Glad to hear that. All the best with your project!
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards,
Lauris
This item was featured on ThemeForest
Power Elite Author
Contact the Envato Market Help Team
