590 comments found.
Hi
I am actually looking to purchase vue+laravel admin dashboard.
but i think the one that i purchase is laravel+html. i would prefer the vue version
Can you help?
Hi tonyjzuo,
Thank you for reaching out to us,
Yes, we can help you to refund the Laravel + HTML version if the item has not been downloaded.
Plese check the following link for more information: https://themeforest.net/page/customer_refund_policyHope this helps.
Best regards, Left4code Team
Hey! how is it going? Cristian here, we are glad to use this template but we have a question, have you implemented this on TypeScript. Any guidelines/notes? It would be appreciated.
Thanks!
Hi cmangone,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
Yes, we have a sample project implementation on typescript, we can send it if you are interested.
Please write down your email.. 
Best regards, Left4code Team
Hi, do you have the sketch file for this template? Midone – Vuejs 3 Admin Dashboard.
Hi I just recently purchased this. Do you have the sketch file. Im more familiar than Adobe XD.
Hi stevef22,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
Unfortunately, we currently only have XD file. Let me know if you have any other questions.
Best regards, Left4code Team
Hi In the title of the product, you mentioned that the file includes XD file but I couldn’t find it.
could you send the XD file for me?
Thanks.
Hi ranjbarmohammad,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
The design file is currently only available for the “rubick” theme as the other 2 themes are our latest updates. You can check the “rubick” directory to find the design file.
Hope this helps.
Best regards, Left4code Team
I see ChevronUpIcon / ChevronDownIcon / RefreshCcwIcon tags. where do these tags come from? I am looking for list of such tags
Thanks Ramanathan
Hi RaamRaam,
These components are registered globally, you can check this file ”/src/global-components/index.js” to find the components. https://prnt.sc/1dzm105 You can check all the icon lists here: https://feathericons.com/Hope this helps.
Best regards, Left4code Team
where are the primaryColors called in tailwind.config.js is defined?
Hi RaamRaam,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
It’s actually located inside our published package, we use the colors as a template for buttons, alert, etc.
So you can find it inside ”/node_modules/@left4code/tw-starter/dist/js/colors.js” or if you use vscode you can press ctrl and click to the source file. https://prnt.sc/1d9y8rqHope this helps.
Best regards, Left4code Team
Thanks. This helps.
Your’e very welcome..
Please ignore my previous question. I am a novice. Thanks for understanding
Hi RaamRaam,
It’s ok, let me know if you have another question..
Best regards, Left4code Team
Can you please help me in location .vue file associated with <router-view />
Hi just so I buy the right one. I need HTML – what is Vuejs 3 and Laravel 8? Is that a different coding or?
Hi Mrnicoo,
You can buy the HTML version if you only need the HTML template. The Vuejs and Laravel versions are template implementations for these two frameworks. You can see the following link to view the documentation:
https://vuejs.org/v2/guide/ https://laravel.com/docs/8.xBest regards, Left4code Team
Thanks. Yes I buy the HTML version. Please let me know do you have the PSD (Photoshop) files?
I am really sorry we only have XD design file and only available for Rubick.
Best regards, Left4code Team
Hi my friend, Is it possible to render a button “disabled” I tried <button disabled> but didnt work Thank you
Hi Hesiode,
Sorry for the late reply,
We just released an update for this, please run “yarn add @left4code/tw-starter” to update the core dependencies.
Let me know if you still have other issues, hope this helps.
Best regards, Left4code Team
Hi krblt1907,
Thank you for reaching out to us,
Can you send the specific issue with the navigation? We’ll try to check it asap.
Best regards Left4code Team
Dear author, Hello, my name is Bayu. I want to ask, for now i’m using template rubick. But when i compile this template it work slowly. How can i solve this? i’ve tried remove depedency and remove scss, and the result still the same.
Here, is my package:
{ “dependencies”: { ”@left4code/tw-starter”: “1.0.27”, ”@popperjs/core”: “2.7.0”, ”@zhuowenli/vue-feather-icons”: “5.0.2”, “axios”: “0.21.1”, “cash-dom”: “8.1.0”, “chart.js”: “2.9.4”, “core-js”: “3.6.5”, “dayjs”: “1.10.4”, “dropzone”: “5.7.6”, “feather-icons”: “4.28.0”, “firebase”: “8.6.8”, “litepicker”: “2.0.11”, “register-service-worker”: “1.7.1”, “secure-ls”: “1.2.6”, “tippy.js”: “6.3.1”, “toastify-js”: “1.9.3”, “velocity-animate”: “1.5.2”, “vue”: “3.1.2”, “vue-i18n”: “9.1.6”, “vue-router”: “4.0.0-0”, “vuex”: “4.0.0-0”, “vuex-persistedstate”: “4.0.0-beta.3”, “xlsx”: “0.16.9” }, “devDependencies”: { ”@tailwindcss/postcss7-compat”: “2.1.0”, ”@vue/cli-plugin-babel”: “4.5.0”, ”@vue/cli-plugin-eslint”: “4.5.0”, ”@vue/cli-plugin-pwa”: “4.5.0”, ”@vue/cli-plugin-router”: “4.5.0”, ”@vue/cli-plugin-unit-jest”: “4.5.13”, ”@vue/cli-plugin-vuex”: “4.5.0”, ”@vue/cli-service”: “4.5.0”, ”@vue/compiler-sfc”: “3.1.2”, ”@vue/eslint-config-standard”: “5.1.2”, ”@vue/test-utils”: “2.0.0-0”, “autoprefixer”: “9”, “babel-eslint”: “10.1.0”, “eslint”: “6.7.2”, “eslint-plugin-import”: “2.20.2”, “eslint-plugin-node”: “11.1.0”, “eslint-plugin-prettier”: “3.3.1”, “eslint-plugin-promise”: “4.2.1”, “eslint-plugin-standard”: “4.0.0”, “eslint-plugin-vue”: “7.0.0”, “jest-transform-stub”: “2.0.0”, “postcss”: “7”, “postcss-loader”: “4”, “prettier”: “2.2.1”, “raw-loader”: “4.0.2”, “sass”: “1.26.5”, “sass-loader”: “10.2.0”, “tailwindcss”: “npm:@tailwindcss/postcss7-compat”, “vue-jest”: “5.0.0-0” } }
Hi bayusyaits,
Thank you for reaching out to us and sorry for the late reply,
The compile speed is one of our current concerns and the only thing we can suggest so far is to reduce unnecessary dependencies as you have done.
A few months ago Tailwind Team released a new feature called Tailwind JIT to speed up the compilation process. You can see it on the following page: https://tailwindcss.com/docs/just-in-time-modeBut until now the feature is still in the preview stage and still has quite a lot of issues. We will implement the feature soon, after passing the preview stage.
Hope this helps.
Best regards, Left4code Team
Hi,
TailSelect components doesn't seem to work in vue version.Not quite sure how to fix this.Best, Chai
Hi chaikorn,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
We’ve replaced the Tail Select component in the latest version, the plugin has been removed on github and its current status has been deprecated on NPM.
In the latest version we use the Tom-Select plugin. You can see the implementation in the latest download file.
Hope this helps.
Best regards, Left4code Team
I wanted to ask you if there is a way to integrate the vue template in laravel so that they work in a single project
Hi n1m0d0,
Thank you for reaching out to us,
Please follow the steps below to integrate the template into Laravel project.
- 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/”.
- Add all Midone Vue project dependencies plus “raw-loader” to the Laravel Project “package.json”.
- Configure webpack.mix.js like below:
const mix = require("laravel-mix");
const path = require("path");
const tailwindcss = require("tailwindcss");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");
const CKERegex = {
svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
};
/*
|--------------------------------------------------------------------------
| 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.listen("configReady", (webpackConfig) => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
const targetCSS = /\.p?css$/;
for (let rule of rules) {
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = CKERegex.svg;
} else if (rule.test.toString() === targetFont.toString()) {
rule.exclude = CKERegex.svg;
} else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
});
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"],
})
.webpackConfig({
module: {
rules: [
{
test: CKERegex.svg,
use: ["raw-loader"],
},
{
test: CKERegex.css,
use: [
{
loader: "style-loader",
options: {
injectType: "singletonStyleTag",
attributes: {
"data-cke": true,
},
},
},
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve(
"@ckeditor/ckeditor5-theme-lark"
),
},
minify: true,
}),
},
},
],
},
],
},
})
.browserSync({
proxy: "midone-vue-laravel.test",
files: ["resources/**/*.*"],
});
- Run npm install & npm run dev.
Hope this helps.
Best regards, Left4code Team
Hello,
I am using Icewall theme with Vuejs. I love this theme, thank you for your creativeness. However, when I run “npm run serve” my laptop (Mac 2017) resource usage is increasing rapidly. Chrome is almost freezes. Why can this be caused?
Thank you for your help
Hi traquter,
Thank you so much for your kind words..
I honestly don’t have much experience with “resource usage”. But I think the compile speed could depend on many things like RAM size and HDD/SSD speed. For info, I previously used a Macbook Pro 2012 when I first developed this template with an SSD that had been upgraded to 500GB and RAM increased to 8GB, and I didn’t experience any lag or freeze problems.
If you’re on a mac you might be able to check how many resources are required during compilation by running the “top” and “npm run serve” commands simultaneously. Please check the following screenshot. https://prnt.sc/17r2jxrHope this helps.
Best regards, Left4code Team
Hi. How to set dropdown z-index? because I am using dropdown in model both component has same z-index so dropdown is setting under the model. Tried with hardcord for z-index but after pass one time show it’s set to the under the model again.
Hi toyjena2019,
Thank you for reporting the issue, please run the command below to update the core dependencies:
// For yarn
yarn add @left4code/tw-starter
// For npm
npm install @left4code/tw-starter
Best regards, Left4code Team
hi, For testing, i need to have a form tag outside inputs, something like :
<form class=”form-control”> <label for=”modal-form-1” class=”form-label”>Input label</label> <input id=”modal-form-1” type=”text” class=”form-control” placeholder=”” v-model=”input model”/> </form>
But it’s so Ugly 
Have you a tips for me ?
Thank you!
Hi Hesiode,
Sorry for the late reply,
What test package are you using?
Best regards, Left4code Team
Panther (with phpunit)
Hi Hesiode,
I’ve personally never used Panther before but I’ve used Laravel dusk.
Looking at the documentation you can use the ID selector to find the element.
So that in your HTML code you don’t need to use the form tag on every input element, just attach an ID to the parent form tag.
HTML
<form id="form-testing">
<div class="”form-control”">
<label for=”modal-form-1” class=”form-label”>Input label</label>
<input id=”modal-form-1” type=”text” class=”form-control” placeholder=”” v-model=”input model”/>
</div>
<div class="”form-control”">
<label for=”modal-form-1” class=”form-label”>Input label</label>
<input id=”modal-form-1” type=”text” class=”form-control” placeholder=”” v-model=”input model”/>
</div>
</form>
Test Code
$crawler = $client->waitFor('#form-testing');
Hope this helps.
Best regards, Left4code Team
Hi there, would like to know how can i use a placeholder in TomSelect instead of preselect one?
Hi dreamxyz95,
You can pass the “placeholder” option to the component like below:
<TomSelect
v-model="select"
:options="{
placeholder: 'Select your favorite actors'
}"
class="w-full"
>
<option value="1">Leonardo DiCaprio</option>
<option value="2">Johnny Deep</option>
<option value="3">Robert Downey, Jr</option>
<option value="4">Samuel L. Jackson</option>
<option value="5">Morgan Freeman</option>
</TomSelect>
Hope this helps.
Best regards, Left4code Team
Hi there, I tried but the placeholder only show up in search text? And then it will select the first value.
Hi dreamxyz95,
Have you tried using an empty value on the reactive variable you are using? https://prnt.sc/172jolpBest regards, Left4code Team
Hi I bought the template, thanks I am trying to integrate it in my app, but I finding some problem. For example buttons are styled with bootstrap classes like “btn btn-primary shadow-md mr-2” Wasn’t this supposed to be in Tailwind? Am I getting something wrong?
Hi appmeicher,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
Yes, you may notice that the naming of some of the components we use is similar to bootstrap.
We did this to make it easier for new users migrating from bootstrap to use to use Midone, which is Tailwind based.
However, if you want to change the naming of the component you can access the files at the following path ”/node_modules/@left4code/dist/scss/*”.
You can copy the file, modify it, then re-import it in ”/resources/sass/app.scss”.
I hope this helps.
Best regards, Left4code Team
So there arent anywhere components with the original tailwind classes? I Will Need to convert It my self? How can I integrate this classes with my app without having to manually convert everything ?
Hi,
What do you mean with original Tailwind classes? You don’t need to convert anything, we don’t use Bootstrap Framework at all, we just made the component class name to “Look Like” Bootstrap components.
We use Tailwind ”@apply” directives to make the base components https://tailwindcss.com/docs/functions-and-directives#apply Please check these button components for example: https://prnt.sc/16p3melBest regards, Left4code Team
Please note that Tailwind CSS does not have any base components. There are no buttons, modals, tabs, or anything else.
TailwindCSS only has utility classes that we can use to create our own components.
Please check the following link for a quick understanding of the difference between Bootstrap and Tailwindcss.
https://dev.to/wasabigeek/which-css-framework-bootstrap-or-tailwind-2k0gHope this helps.
Best regards, Left4code Team
Version: IceWall Vue file: side-menu/Main.vue
I use zyggy for routing, all menus and breadcumb work fine at the first load, but if you navigate for the menu, the active indicator dont refresh.
The problem its here, but i dont know how work, you can explain please?
watch(
computed(() => route.path),
() => {
formattedMenu.value = $h.toRaw(sideMenu.value)
}
)Hi ivanmdh,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
You may need to check whether the variable “route.name” has the correct value containing the “route name” of the active page because there may be differences from the routing package you are using.
Please check the following screenshot. https://prnt.sc/16nuat6You can access the function in this file ”/src/layouts/side-menu/index.js”.
For the function ”$h.toRaw()” you can check it in the following file ”/src/utils/helper.js”. Its function is to remove reactive attributes from vuejs to become raw objects.
Best regards, Left4code Team
Thank you very much, the information was very useful.
You’re very welcome..
Best regards, Left4code Team
