590 comments found.
how are we supposed to use the alert component? they are literally just styled divs… how should we make them work as notifications?
Hi there,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
The alert component should be used as an alert (you can use vue conditional rendering to show/hide/toggle it), it’s a different thing from notification.
You can use this components to show notifications. http://rubick-vue.left4code.com/notificationBest regards, Left4code Team
Thank you for this great design. When I run yarn install I get an error and the installation fail. The error is ( error /Users/MAC/Sites/midon/Source/node_modules/node-sass: Command failed. ) Thanks for your support
Hi chkilel,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
Can you try to update your Node & NPM version?
If it’s up to date, please send your installation video in the following email “leftforcode@gmail.com”.
We will check it further.
Best regards, Left4code Team
When using npm install then npm run serve, get this error:
error in ./src/global-components/highlight/Main.vue?vue&type=style&index=0&id=c77915c8&scoped=true&lang=css
Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
Require stack:
- /Users/.../Documents/midone/noop.js
(@/Users/.../Documents/midone/postcss.config.js)
at Array.map (<anonymous>)
Is this mean only yarn is supported?
Hi finalage,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
No, you can use npm also. Please try to update your npm version and reinstall the dependencies.
Best regards, Left4code Team
Hi Muhammad,
Great dashboard by the way.
I had a few questions about the faker and how it was called. I’m not sure I understand how it works. I want to use the tabulator view with the “products” inside the faker. But in there, you use the `ajaxUrl` property but I’d like to use `faker.products` instead with the tabulator prop called `data`.
I don’t understand this line of code used here and there: $f()[7].products0.
Any idea on how to do this?
Thanks!
In the end, I just used exports and imports.
``` import { faker } from ”../../utils/faker”; ```
and
``` const initTabulator = () => { tabulator.value = new Tabulator(tableRef.value, { data: faker4.products, ... ```
Hi ambroise_couissin,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
Actually, the faker has been registered as a global method. https://prnt.sc/10vp0gaBut since Vue 3 use a composition API that has scoped context we can’t directly call global function anymore (Unless in the template).
So the simplest way to use it is to import and use it like your code above.
However, you may want to try Vue 3’s provide/inject features to make your code more concise.
https://v3.vuejs.org/guide/component-provide-inject.htmlI purposely didn’t inject the faker by default because not every user might need it.
Hope this helps.
By the way, thank you for your kind words! 
Best regards, Left4code Team
Thanks for the swift answer. I’ll try the provide/inject as well
Keep on the great work
Thank you!
How to Reset Dropzone inside a Modal box
I want to upload a file from dropbox inside a modal.
I want to reset the modal and dropbox together.
Hi iisoft,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
Looks like the version you bought is not the Vuejs version, can you write a comment on the version of the item you bought?
Best regards, Left4code Team
sorry my version is laravel version
Hi iisoft,
We just replied to your latest comment, kindly check it..
Best regards, Left4code Team
Any plan on ”@vue/cli-service”: “^5.0.0-0” (webpack5) and @tailwindcss/jit? (Just In Time) The migration was easy. Fast development time and webpack5
Hi logicalpositiondevs,
Thank you for reaching out to us,
The package seems like a big improvement to the compiler, We will try to add it in the next release..
Thank you.
Best regards, Left4code Team
Please update the xd file, for example, you can’t find the Alert style in the xd file, it is better to include all the design styles with html version
Hi cong8341,
Thank you for your patient, I’ll be more than happy to help you.
Unfortunately, We are currently focusing on adding new page and theme variants.
Since the XD design file is only added as a bonus file, We will focus more on updating new page and theme variants.
Best regards, Left4code Team
Hi, do you have vue3 + typescript version of icewall? If yes, please send me version via my email namvu1210@gmail.com. I preffer it over rubick template
Hi aSmileN,
Thank you for your patient,
Unfortunately, We don’t have the typescript version of Icewall.
Best regards, Left4code Team
Any plan on chart.js v3.0?
The migration was easy. Just updated the src\global-components\chart\Main.vue
import { Chart, LineController, BarController, PieController, DoughnutController, LineElement, BarElement, PointElement, ArcElement, LinearScale, CategoryScale, Title, Legend, Tooltip, } from “chart.js”;
Chart.register( LineController, BarController, PieController, DoughnutController, LineElement, BarElement, PointElement, ArcElement, LinearScale, CategoryScale, Title, Legend, Tooltip );
Hi logicalpositiondevs,
Thank you for the code snippet, really appreciate it..
We’ll consider to update it in the next release.
Best regards, Left4code Team
Can I use this template with a NuxtJS project? How?
Hi archtaurus,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
To be honest, I’ve never used the template with Nuxtjs before and it seems like Vue 3 still not supported by default. However, I’ve found documentation that enables us to use Vue 3 composition API with Nuxt. https://composition-api.nuxtjs.org/So it looks like you can do some research from there.
All component and styling files on Midone including JS/SCSS/VUE are initialized in “main.js”. You can try to customize the route, copying components, and install the required packages in “package.json”.
Hope this helps.
Best regards, Left4code Team
I am having the same issue on installation as user troubleminds2…
On a fresh installation after npm install first it mentions that tailwindcss is missing. After installing that with npm install tailwindcss I get a compile error of
in ./src/global-components/highlight/Main.vue?vue&type=style&index=0&id=c77915c8&scoped=true&lang=css
Syntax Error: TypeError: [(...variantsValue),(...extensions)].flat is not a function
I downloaded straight from themeforest so I assume it is the latest version available?
Thanks, Manuel
Hi strukturunion,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
Can you send a video recording of your installation process?
Please send it here: leftforcode@gmail.com
Best regards, Left4code Team
Issue resolved! Thanks for the prompt reply. It seems like my nodejs install was outdated. Worked as a charme after updating nodejs. 
Hi strukturunion,
Glad it works!
I think this will be quite useful for other users having the same problem.
Thank you!
Best regards, Left4code Team
Hey,
Started to use this template building it up with the needed pages and functions, however i arrived at using date selection. Something is wrong about the Litepicker date picker since it has a onSelect method inside the index.js in the init method but its not firing when selecting a date.
First i tried it in a v-for but then i added a single one to be sure that is not something to do with the v-for but the on select is still not working.
Package included: “litepicker”: “^2.0.6”
Thanks, Trix
//UPDATE Found out what was the problem. The code written is for an older version of litepicker and its not compataible with the newest version. Since yarn installed the newest version all broke down. Will try to fix it using the current events.
However is there any way to detect change on the component with @change so that i can run a method on change?
Thanks.
Hi Trix87,
Thank you for reaching out to us, I’ll be more than happy to help you.
We just released an update for the litepicker component issue, you can stay to use “litepicker”: “^2.0.6”.
Please replace the file below with the latest update.
// Vue component
- "/src/global-components/litepicker/index.js"
// SASS
- "/src/assets/sass/components/_litepicker.scss"
Instead of ”@change” you can use “watch()” method to watch the value.
Hope this helps.
Best regards, left4code Team
Hey Just bought your Midone Vue 3 Admin Dashboard Template
I’m getting the following error when i ran npm run serve:
Loading PostCSS Plugin failed: Cannot find module ‘tailwindcss’
Hi powmarketing,
Thank you for reaching out to us, I’ll be more than happy to help you.
Have you done the installation process on the documentation?
Best regards, Left4code Team
too much breaking changes, 2.0.2 to 2.0.3. even tab classes and modal classes changed. U should use new version 3.0.0 if introduce a lot of changes.
Hi lunarinovasi,
Sorry for that, you can check the latest changelog on the item page before updating the theme.
Best regards, Left4code Team
hi team , Thank you for your efforts. Can you tell me when it will be added icewall to vueJS
Hi there,
Thanks for your patience,
The “Icewall” theme is planned to be added in every version of Midone. We are still working on it.
It may take a while to become available in the Vue version.
Best regards, Left4code Team
btw, :src=”require(`/assets/images/illustration.svg`)" can be simplify src="/assets/images/illustration.svg” (without require())
Hi logicalpositiondevs,
Thank you for your suggestion..
Best regards, Left4code Team
datepicker viewed in mobile seems buggy, it overflow the viewport and cant be scrolled
Hi lunarinovasi,
Thanks for reporting the issue, We’ve checked the component and found some viewport issues with it in Vue version.
We’ve made a patch for the latest plugin version (“2.0.11”) but We found another small issue with the vendor plugin. Meanwhile, please downgrade the litepicker plugin to “1.5.7” until the official patch released.
Best regards, Left4code Team
Hi lunarinovasi,
We just released an update for the litepicker component issue, you can stay to use “litepicker”: “^2.0.6”.
Please replace the file below with the latest update.
// Vue component
- "/src/global-components/litepicker/index.js"
// SASS
- "/src/assets/sass/components/_litepicker.scss"
Best regards, left4code Team
Hi Dev,
i try to deploy my project, facing slow loading due to large css and js file 13mb and 11mb respectively, i try to make these files with npm run production which provide me better size css and js, but theme totally wont load properly. may i know i only can you the npm run watch css and js ??
Hi irvine48,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
Have you done the purgecss settings? If not, you can add the following config to “tailwind.config.js”.
purge: [
"./src/**/*.php",
"./src/**/*.html",
"./src/**/*.vue",
"./resources/**/*.php",
"./resources/**/*.html",
"./node_modules/@left4code/tw-starter/**/*.js"
],
You can check more details about purgecss in Tailwind at the documentation below:
https://tailwindcss.com/docs/optimizing-for-production
Best regards, Left4code Team
For CSS tried to remove tabular, chart, and ckeditor save me 7mb For Tailwind Utilities, i not really sure how to make it smaller.
Under development i use 2.0.2, and tried with 2.0.3, all input box design not working anymore, is that every update version make so dramatically changes?
try to enable the purge, all format gone, it not work with the theme.
Hi irvine,
It’s not clear what your issue about, what do you mean with all format gone?
Can you send some screenshot or video recording?
You don’t need to update your stable project for every update release.
If you want to use a new component that was not included in the previous version, we recommend that you copy only that component.
Best regards, Left4code Team
i guess the purge function need to point into my view folder in this case,
purge: [ ”./src//.php”, ”./src//.html”, ”./src//.vue”, ”./resources//.php”, ”./resources/*/.html”, ”./*.html” <===== this sample html folder to grab all “classes used” to avoid purge clear out all format, but any change on html will need another newly combine css. ],
may i know possible include full version of tailwind from cdn instead of using self hosted 12mb, is your theme pack modify “Tailwind’s default theme”?
Hi irvine,
Yes, that’s how purgeCSS works. It will remove all CSS classes except it’s used within the files declared in purge config. I’ve attached a useful link for you to read above: https://tailwindcss.com/docs/optimizing-for-productionYou may need to configure it to match your project structure (vue project/html project).
Yes, you can include TailwindCSS from CDN, but you’ll lose many of its features (so it’s not actually possible). Please check the following documentation: https://tailwindcss.com/docs/installation#using-tailwind-via-cdn TailwindCSS is only a full-pack of utility classes, it has no default UI, components, or theme. You can read this link to learn more about it: https://medium.com/codingthesmartway-com-blog/tailwind-css-for-absolute-beginners-3e1b5e8fe1a1Hope this helps.
Best regards, Left4code Team
Can I get the figma file for this?
Hi ibingame,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
Unfortunately, We only have the XD design file.
Best regards, Left4code Team
Hello, could I please get Vue 2 version of the project?
Hi Mahammad_BE,
Thank you for taking the time to contact us, I’ll be more than happy to help you,
Yes, please leave your email. We will send it there..
Best regards, Left4code Team
it is m.d.mammadzada@gmail.com , thank you in advance guys
Email sent, kindly check your email..
Best regards, Left4code Team
