590 comments found.
Hi, just so I buy the right one. I want to use both Vuejs 3 and Laravel 8 together in a single project.
Hi femijacob,
Thank you for reaching out to us,
Yes, you can buy the vuejs version then configure Laravel Mix to work with the vuejs version.
Thanks for your response, I have purchased the vue version. Please can get asistance with setting up the laravel mix
Hi,
Please follow the steps below.
- Move the ”/src” directory from the Midone Vue project to “Laravel Project/resources/” and rename it to “app”.
- Move tailwind.config.js from the Midone Vue project to “Laravel Project/”.
- Configure webpack.mix.js like below:
const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.alias({
"@": path.join(__dirname, "resources/app"),
"~": path.join(__dirname, "node_modules"),
});
mix
.js("resources/app/main.js", "public/dist/js")
.vue()
.sass("resources/app/assets/sass/app.scss", "public/dist/css")
.options({
processCssUrls: false,
postCss: [tailwindcss("./tailwind.config.js")],
})
.autoload({
"cash-dom": ["cash"],
"@popperjs/core": ["Popper"],
})
.browserSync({
proxy: "midone-vue-laravel.test",
files: ["resources/**/*.*"],
});
- Run npm install & npm run dev.
What of the package.json file, do i move the one from the vue project to the laravel project folder?
Hi,
Sorry for the late reply,
It depends on your existing project dependencies, please check the example below:
{
"name": "midone-vue",
"version": "3.0.3",
"description": "TailwindCSS HTML Admin Template",
"author": "Left4code",
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"dependencies": {
"@ckeditor/ckeditor5-build-balloon": "^29.1.0",
"@ckeditor/ckeditor5-build-balloon-block": "^29.1.0",
"@ckeditor/ckeditor5-build-classic": "^29.1.0",
"@ckeditor/ckeditor5-build-decoupled-document": "^29.1.0",
"@ckeditor/ckeditor5-build-inline": "^29.1.0",
"@fullcalendar/core": "^5.5.1",
"@fullcalendar/daygrid": "^5.5.0",
"@fullcalendar/interaction": "^5.5.0",
"@fullcalendar/list": "^5.5.0",
"@fullcalendar/timegrid": "^5.5.1",
"@googlemaps/js-api-loader": "^1.11.4",
"@googlemaps/markerclustererplus": "^1.1.0",
"@left4code/tw-starter": "^1.1.0",
"@popperjs/core": "^2.7.0",
"@vuelidate/core": "^2.0.0-alpha.12",
"@vuelidate/validators": "^2.0.0-alpha.11",
"@zhuowenli/vue-feather-icons": "^5.0.2",
"cash-dom": "^8.1.0",
"chart.js": "^2.9.4",
"core-js": "^3.8.3",
"dayjs": "^1.10.4",
"dropzone": "^5.7.6",
"feather-icons": "^4.28.0",
"highlight.js": "^10.6.0",
"js-beautify": "^1.13.5",
"litepicker": "^2.0.11",
"tabulator-tables": "^4.9.3",
"tiny-slider": "^2.9.3",
"tippy.js": "^6.2.7",
"toastify-js": "^1.9.3",
"tom-select": "^1.7.5",
"velocity-animate": "^1.5.2",
"vue": "^3.0.4",
"vue-router": "^4.0.3",
"vuex": "^4.0.0",
"xlsx": "^0.16.9",
"zoom-vanilla.js": "^2.0.6"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0-beta.3",
"@vue/cli-plugin-eslint": "~5.0.0-beta.3",
"@vue/cli-plugin-router": "~5.0.0-beta.3",
"@vue/cli-plugin-vuex": "~5.0.0-beta.3",
"@vue/cli-service": "~5.0.0-beta.3",
"@vue/compiler-sfc": "^3.0.4",
"@vue/eslint-config-standard": "^6.1.0",
"autoprefixer": "^10.3.1",
"babel-eslint": "^10.1.0",
"eslint": "^7.20.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^7.2.0",
"postcss": "^8.3.6",
"prettier": "1.19.1",
"sass": "^1.37.5",
"sass-loader": "^12.1.0",
"tailwindcss": "^2.2.7",
"laravel-mix": "^6.0.27",
"browser-sync": "^2.27.5",
"browser-sync-webpack-plugin": "^2.3.0",
"vue-loader": "^16.1.0"
}
}
Hi, How do we get a “tab” page/ form in this template, I cant seem to find it anywhere?
Hi spormeon,
Sorry for the late reply,
Please check the chat or post page to see the tab components.
Hope this helps.
How do I correctly install and run the theme with npm? When I run npm install, then npm run dev, my css is all messed up.
Whats going on here?
https://drive.google.com/file/d/1Hq0dSykRiNu8Q3hNRB5Hu1msyOGWFTTb/view?usp=sharingHi lecondc,
Thank you for reaching out to us,
Please update line 7 in “tailwind.config.js” as follows. https://prnt.sc/1xk36irLet me know if the problem still appears.
How do I disable the loading animations on all the elements? I just want them to appear normally. I bought the HTML version for Midone Vue, the Rubick template.
Hi lecondc,
Thank you for reaching out to us,
Please open this file ”/src/sass/app.scss” and disable the animation SASS file like below. https://prnt.sc/10bbdd0i saw some globalProperties in the utils folder, where in Vue 3 this globalProperties suppose to be not used anymore. Better clean up so not confusing people. Suggest to create a mixin folder as sample for mixins use
Hi gitzjoey,
Thank you for your suggestion, we will consider it in the next update.
To write the interfaces is it native html or can it be created easily with an api?
Hi there,
Thank you for reaching out to us,
Please check the screenshot below to see our component’s structure. https://prnt.sc/1x5bpt8 https://prnt.sc/1x5brjgLet me know if you still have any other questions.
entonces si html nativo y javascript?, Can you show the list of files of some component and the list of files of the layout directory?
Sorry, I’m not sure what your question means. But you can check the link below.
// Components https://prnt.sc/1x5g9au https://prnt.sc/1x5gbex // Layouts https://prnt.sc/1x5gcsw https://prnt.sc/1x5gkh6what is highlight.js being used for in the template, its massive and i want to get rid of it, if its not something i need?
Hi spormeon,
Thank you for reaching out to us,
Highlight.js is only used to show the example code. You can remove it from “app.js” and “app.scss”.
Please check the screenshot below: https://prnt.sc/1x1muky https://prnt.sc/1x1my26thanks found them. On the roboto fonts, which one is used by default or is there a mix being used, i.e in _roboto.scss what can be commented out to leave as is?/* cyrillic / , / greek-ext */ etc etc
By default we usually use Roboto-Regular for the standard font and Roboto-Black for the boldest font. Please check the list below.
- Roboto-Regular
- Roboto-Medium
- Roboto-Bold
- Roboto-Black
You can found the font files at ”/resources/fonts/roboto” and mix config here “webpack.mix.js”.
https://prnt.sc/1x29i7j
im using vue3 , dont think the file are where you screenshotted?
i’ve found them in _roboto.scss , thanks
Sorry, my mistake.
For the vue version, please find the font files at ”/src/fonts/roboto/*” and remove the sass code from ”/src/sass/fonts/_roboto.scss” is enough.
Hey, can i get typescript starter?
Hi jakubkosinski,
Thank you for reaching out to us,
Sure, could you leave your email? We will send it as soon as possible.
hi, can help to give sample on regular form -> horizontal form on how to add validation on error, what class to make the input red and having text description below the input
Hi gitzjoey,
Sorry for the late reply,
You can take an example from ”/src/views/validation/Main.vue” please check the code below.
<input
id="validation-form-1"
v-model.trim="validate.name.$model"
type="text"
name="name"
class="form-control"
:class="{ 'border-theme-6': validate.name.$error }"
placeholder="John Legend"
/>
<template v-if="validate.name.$error">
<div v-for="(error, index) in validate.name.$errors" :key="index" class="text-theme-6 mt-2">
{{ error.$message }}
</div>
</template>
https://prnt.sc/1x1nqbr
The red/danger color can be different for each theme, you can check the example from each validation page.
Let me know if you still have any question about this.
your sample is for vertical form, i’m talking about horizontal form can you give sample for label, input box, and also the validation (red text under the textbox)
Hi,
Please check the following code.
<form>
<div class="form-inline">
<label for="horizontal-form-1" class="form-label sm:w-20"
>Name</label
>
<input
id="horizontal-form-1"
v-model.trim="validate.name.$model"
type="text"
class="form-control"
:class="{ 'border-theme-6': validate.name.$error }"
placeholder="John Legend"
/>
</div>
<template v-if="validate.name.$error">
<div v-for="(error, index) in validate.name.$errors" :key="index" class="text-theme-6 sm:ml-20 sm:pl-5 mt-2">
{{ error.$message }}
</div>
</template>
</form>
This causing the label and the input box become uneven. Is there a way to make it even?
Is there something I missed?
oh seem i’m copy paste wrongly, thanks
You’re very welcome.. 
Do you have a new update for the typescript version? (Midone – Vuejs 3 Admin Dashboard Template + HTML Version + XD Design File).
How do I get the search text in tom-select?
Hi Amab030,
Thank you for reaching out to us,
You can use “onType” callback, please check the screenshot below. https://prnt.sc/1wge57k Documentation details. https://tom-select.js.org/docs/#callbackshi, i’m having issue on build the sass on laravel 8
(781:5) C:\DCSLab\resources\sass\midone\app.scss The `text-primary` class does not exist. If `text-primary` is a custom class, make sure it is defined within a `@layer` dir ective. > 781 | @apply text-primary dark:text-white; | ^
779 | }
780 | .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
my mix
.sass('resources/sass/midone/app.scss', 'public/css/midone/app.css')
.options({
postCss: [
require('autoprefixer'),
tailwindcss('./tailwind.config.js'),
]
Hi gitzjoey,
Thank you for reaching out to us,
Can you please share your ”@left4code/tw-starter” version on package.json?
”@left4code/tw-starter”: “^2.1.1”,
Please use 1+ version instead.
"@left4code/tw-starter": "^1.1.0",
Question with Tabulator – how are you able to make it so that it doesn’t jump to the top of the page when changing the tabulator page? I have not been able to track this down.
Thanks.
Hi cbeckner12,
Sorry for the late reply,
This seems to be the current behavior, can you check on our demo page? and what Tabulator version are you using?
Please share the package-lock. bez whenever i run “npm run dev” it is disturbing the theme.
Hi,
I just replied to your other comments.. 
dear, when I try to run the theme using “npm run dev”. it disturb the pages.
Hi reply2haroon,
Thank you for reaching out to us,
Can you send the error message or screenshot that i can check?
Please check this video .. https://www.dropbox.com/s/k3x28l5xvrsityb/Video_2021-10-07_142918.wmv?dl=0
thanks
Hi,
As I noticed, you’re using a PHP file alongside the template, so you need to add a PHP extension in tailwind.config.js to prevent the styles from being removed during compilation. Please check the screenshot below: https://prnt.sc/1v5wydpSorry for the issue,
We have a slight miss in the config, it should be like this. https://prnt.sc/1v6d26iPlease let me know if the issue still appears.
It is start working now gr8t .. thanksssssssss .. 
Thanks! 
Hi,
I bought and downloaded the package and updated the <script “ts”> issue, and am now trying to run the yarn serve, and yarn build, but am running into an error:
ERROR Failed to compile with 1 error 10:04:32 AM
error
Conflict: Multiple assets emit different content to the same filename index.html
ERROR in Conflict: Multiple assets emit different content to the same filename index.html
webpack compiled with 1 error
Any ideas?
Thank you.
Hi cbeckner12,
Thank you for reaching out to us,
We just updated this issue a while ago, can you re-download the file?
Still not working, I downloaded, unzipped, opened VS Code and ran yarn install, then yarn serve in the Terminal, and this is what I get.
chadPATHHIDDEN Source % yarn install
yarn install v1.22.15
info No lockfile found.
[1/4] Resolving packages…
warning @vue/cli-service > webpack-dev-server > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning @vue/cli-service > webpack-dev-server > sockjs > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
[2/4] Fetching packages…
[3/4] Linking dependencies…
warning “vue/cli-service > <redpre#4>” has incorrect peer dependency “webpack4.0.0”.
warning “vue/eslint-config-standard > <redpre#5>” has unmet peer dependency “webpack>=1.11.0”.
warning ” > sass-loader@12.1.0” has unmet peer dependency “webpack@5.0.0”.
[4/4] Building fresh packages…
success Saved lockfile.
✨ Done in 64.92s.
chad@PATHHIDDEN Source % yarn serve
yarn run v1.22.15
$ vue-cli-service serve
INFO Starting development server…
[51%] building (327/710 modules)
warn – You have enabled the JIT engine which is currently in preview.
ERROR Failed to compile with 1 error 11:34:48 AM
error
Conflict: Multiple assets emit different content to the same filename index.html
ERROR in Conflict: Multiple assets emit different content to the same filename index.html
webpack compiled with 1 error
ERROR Failed to compile with 1 error 11:34:51 AM
error
Conflict: Multiple assets emit different content to the same filename index.html
ERROR in Conflict: Multiple assets emit different content to the same filename index.html
webpack compiled with 1 error
Thoughts, and thanks.
Chad
Can you check your Node and NPM versions?
Node: v14.15.5; NPM: 7.6.2
Thanks for the info,
Can you update your Node and NPM to the latest version? We just checked the current release with Node: v16.7.0, NPM: 7.20.3 and found no issues.
I’ve updated, same issues. I’m wondering if I’m not downloading the correct version? I’m using the download link that is at the top right of this page.
Can you please send a screen recording of your installation? Maybe we can help you with more detailed information.
Ok – re-downloaded again, extracted, opened in VS Code and here is the video of the recording. Please see the recording here: https://www.dropbox.com/s/27wacqx8uj6k0ly/Screen%20Recording%202021-10-05%20at%2012.39.25%20PM.mov?dl=0
Update: I moved from trying to run this from my Mac Desktop to just my users/chad folder and it compiles properly now. Thank you for all your assistance!
Hi,
Thanks for sending the link,
We were just about to check your link, glad it works.. 
Please let me know if you still need any assistance with the template.
Hi, has anyone here used aws amplify with this template and got it to work, I could do with asking some questions if someone has and can help me out?
Hi,
I just replied to your other comment, can you check the code?
Hi, just bought this template, there seems to be no footer in it at all, could do with one for adding “privacy policy”, “T&C’s” , copyright info etc etc
Also, there seems to be no way to change/ define the icon on submenus
Hi spormeon,
Thank you for reaching out to us,
We do not provide a footer because it is rarely used in the Admin template. However, you can add it manually on the layout you are currently using. For example, for the side menu, you can add it to ”/src/layouts/side-menu/Main.vue”. https://prnt.sc/1uwiq42To change the submenu icon please open this file ”/layouts/side-menu/Main.vue” and apply these changes:
Line 83: https://prnt.sc/1jsquf5 Line 120: https://prnt.sc/1jsrvwf
Hope this helps.
Best regards, Left4code Team
that makes the icons appear but it doesn’t stop the original ones appearing, so there are 2 there in effect now?
Please note to comment the ”<ActivityIcon />” and ”<ZapIcon />” components to remove the default icon. You can check the link above for more details.
nope, still doesnt work: https://prnt.sc/1uwz6nk it just puts the “lightning one below the other ones now” https://prnt.sc/1uwz6nk
<div class="intro-y pt-5 text-white -mt-20 w-full flex justify-center z-10 relative mb-10">
<div>© 2021 Left4code</div>
<a class="ml-5" href="">Terms and Conditions</a>
<a class="ml-5" href="">Privacy Policy</a>
</div>
ye, that works for footer now, just the icons then?
actually, no it doesn’t work, it gotta go in that bottom section/ bar, why i said at start, you really need to code in a proper footer: https://prnt.sc/1ux1qqz
Hi, Can I see the documentation of this template before buying it? Just to be sure the structure and components are well written in Vue 3. (in the online templates, all the code is in plain HTML, and you are not using components). Thanks!
Hi alonsy,
Sorry for the late reply,
Yes, sure. Can you send your email?
hi. Sure. alonsy@gmail.com
Thanks!
Email sent, thanks!