590 comments found.
Hi, Ty for your good job. I have an question, where is resolve @ ? by example : import { useStore } from ’@/store’
I tought saw somthing like : ’@’: path.resolve(‘src’),
Thank you !
Hi Hesiode,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
The configuration is available by default in vue-cli, so we didn’t add any configuration for aliases.
Hope this helps.
Best regards, Left4code Team
Dears, when fetch data in TomSelect from api get an error I will attach pictures of the error
https://ibb.co/MfRS5fW https://ibb.co/k3Vnw67 https://ibb.co/0GbP9zBHi omar19955991,
Sorry for the late reply,
We’ve replied to your email, kindly check your inbox.. 
Best regards, Left4code Team
i purchased can you send me documentation how i can implement in laravel 8?
Hi pb11preet,
Thank you for reaching out to us,
Please follow the steps below to integrate the template into Laravel project.
- Move ”/src” directory from the Midone Vue project to “Laravel Project/resources/” then 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
I am using Laravel 8 with Inertia how can i use?
Can you send me sample laravel 8 with Inertia with Midone?
Hi pb11preet,
Unfortunately, I’ve never used inertia before.
I can help you to integrate the template into Laravel but for inertia, we have never used it.
Best regards, Left4code Team
Hi I encountered some problems in the latest version, I uploaded a picture of the problem
https://ibb.co/hZwyvK8Thanks,
Hi omar19955991,
Thank you for reaching out to us,
What NPM version are you currently using?
Best regards, Left4code Team
thank you for replay
6.14.8
regards , omar
Hi,
Can you update your NPM version?
Then re-install the project dependencies.
Best regards, Left4code Team
thanks its work
You’re very welcome..
Hello,
I am contacting you regarding our purchase of the theme. We have got a question about a component. There is an example of a modal slide out functionality on Rubick, called a slide over: http://rubick-vue.left4code.com/top-menu/slide-overLooking at the example code, it’s using the modal with a class of ‘modal-slide-over’, but when we search through the source code, this (modal-slide-over) isn’t referenced anywhere. Can you please advise where we can find the source code for this component? Thank you
Hi koszachos,
Thank you for reaching out to us,
Sorry, I can’t see the purchased badge attached to your account. Can you post your question on the item discussion you have purchased?
Best regards, Left4code Team
Hi,
I tried with yarn install/yarn serve to run Midone Rubick v2.0.9. After having problems with eslint, now I am getting: ERROR Failed to compile with 2 errors 09:26:01
error in ./src/global-components/chart/Main.vueModule Error (from ./node_modules/eslint-loader/index.js):
/src/global-components/chart/Main.vue 45:36 error Parsing error: Unexpected token .
✖ 1 problem (1 error, 0 warnings)
@ ./src/global-components/index.js 3:0-37 18:25-30
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.38:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.jserror in ./src/views/wysiwyg-editor/Main.vueModule Error (from ./node_modules/eslint-loader/index.js):
/src/views/wysiwyg-editor/Main.vue 400:23 error Parsing error: Unexpected token .
✖ 1 problem (1 error, 0 warnings)
@ ./src/router/index.js 58:0-61 269:15-28 493:15-28 717:15-28
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.38:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.jsI didn’t by the templates for spending time in debugging. Could you pls support?
Hi office_sis,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
You can actually run “yarn lint—fix” to automatically fix eslint errors/warnings.
Another simpler way is to use vscode editor and install the eslint extension, it will automatically reformat your code after saving the file. https://prnt.sc/15osj91Hope this helps.
Best regards, Left4code Team
▶ yarn lint—fix yarn run v1.22.4 $ vue-cli-service lint—fix error: Parsing error: Unexpected token . at src/global-components/chart/Main.vue:45:36: 43 | const chartRef = ref() 44 | const init = () => { > 45 | const canvas = chartRef.value?.getContext(‘2d’) | ^ 46 | const chart = new Chart(canvas, { 47 | type: props.type, 48 | data: $h.toRaw(props.data),
error: Parsing error: Unexpected token . at src/views/wysiwyg-editor/Main.vue:400:23: 398 | ’.document-editor__toolbar’ 399 | ) > 400 | toolbarContainer?.appendChild(editor.ui.view.toolbar.element) | ^ 401 | const win = window 402 | win.editor = editor 403 | }
2 errors found. error Command failed with exit code 1.
Hi office_sis,
Can you send a step-by-step to reproduce the issue? I can’t seem to find the problem on a fresh install.
Best regards, Left4code Team
Hi Left4code. I have a trouble on litepicker. <Litepicker v-model=”bidEndTime” :options=”{ autoApply: false, showWeekNumbers: true, zIndex: 10001, dropdowns: { minYear: 1990, maxYear: null, months: true, years: true } }” class=”form-control w-56 block mx-auto” /> UI part is working well but when clicking the “apply” button on datepicker, the date value (bidEndTime) is not updated ever.
Hi toyjena2019,
Thank you for reaching out to us,
Sorry, I can’t see the purchased badge attached to your account. Can you post your question on the item discussion you have purchased?
Best regards, Left4code Team
Any reason why you picked feathericons over https://github.com/tailwindlabs/heroicons?
Hi logicalpositiondevs,
Sorry for the late reply,
No particular reason, hero icons is good, but we think we prefer the more simple feather icon design style.
Best regards, Leftcode Team
Hello, We purchased the theme but the tabular function is not working on the same. We spent 2 days to figure out the same but still the same not working. Without this function this theme is of no use to us. Hence we would like to get refund of the same or we will do a charge back in our American express credit card. Kindly treat this on priority.
Hi pratikkotian,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
Sorry, can you explain in more detail the problem you are experiencing? A code snippet, error message, or maybe a screenshot would be helpful.
We strictly follow Envato’s rules for the refund process, please check the following link for more information.
https://themeforest.net/page/customer_refund_policyHope this helps.
Best regards, Left4code Team
Hi,
Please find below link for screenshot, we have checked everything.
https://server.overtures.in/temp/envato.pngThe CSS is also at the right path, but the design just wont load correctly.
We have a client delivery on Thursday and need to make sure this design is working fine.
Thanks
Hi pratikkotian,
Please upload your code online, so we can help find the problem.
Best regards, Left4code Team
Hello,
Our 1st issue is that we needed the html table for the below link but the same is has been provided under js.
https://demo.overtures.in/Compiled/side-menu-light-tabulator.htmlWhile purchasing we were told that we would be given the table in HTML format but the same is not.
Kindly look into the same.
Hi pratikkotian,
I’ve accessed the link you sent and here are the results.
https://prnt.sc/14or7u7We don’t see any problem with the CSS. Can you send a step-by-step to reproduce the issue above?
https://server.overtures.in/temp/envato.pngBest regards, Left4code Team
As you can see on the sample page, we use Tabulator.js to display the table. That’s why it has some functionalities like search, pagination or export.
If you want to use a regular table, you can simply use the example from the “Regular Tables” page. not the “Tabulator” page. Please check the screenshot below.
https://prnt.sc/14os7epHope this helps.
Best regards, Left4code Team
Hello,
But at the time of Purchase we were not told the same.
We were told all things will be given in HTML codes
Without the same, this theme is of no use to us.
Hi pratikkotian,
Thank you for your reply,
Please note that you are purchasing the vuejs version with the HTML version included as a free item.
Please check the screenshot below. http://i.prntscr.com/Dr9G4-8EQ8_OqJlI66ay-A.pngEven the HTML version itself doesn’t mean it doesn’t use any JS plugins at all.
The HTML version is a template created without using any framework, such as vuejs, react, laravel, or others.
Hope this helps.
Best regards, Left4code Team
Hello,
I thought the whole theme is on HTML hence i purchased the same.
If the theme is not fully HTMNL based then its of no use to me.
Please let me know if you could refund me the same OR I will have it charged back on my Card.
Awaiting your revert.
Hi pratikkotian,
Sorry, we can’t help you, mistaken purchases are beyond our responsibility as the author.
You should carefully read the detailed description before making a purchase and double-check the live preview of the template.
You can contact the Envato team if you need further assistance.
Best regards, Left4code Team
Dear Team,
Please note: This is not a mistaken purchase.
It is a falsely sold product. You mention HTML but sell JS.
Further, the basic theme is also not working.
Based on the falsely sold product and not working theme, we are placing a charge back on our Amex Card.
Thank you
Hi,
All items that have been released on the Envato marketplace have gone through a manual and rigorous review process by the Envato team.
However, if you are not satisfied with our answers you can contact the Envato team to assist you by creating a support ticket at the following link.
https://help.market.envato.com/hc/en-us/requests/newBest regards, Left4code Team
Hello, am pretty new to web development. I’m working on a Vuejs based application without nodejs. I’ve read the documentation and seen am supposed to navigate to the Source folder and do my Yarn install there. (I did NPM). So my question is, how do I later integrate this into a vuejs project (Using Vue 3). Kindly help.
Also, I have the HTML template, my thought is that changing something on a page, say index.html will directly reflect on the page. Say I add another menu item, but this does not get directly reflected, what’s the solution for this, is it supposed to work this way?
Hi arthurkabera,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
Yes, any changes to the code will change the preview directly.
Please note to use the Vuejs version instead of the HTML version.
Please look at the following screenshoot. https://prnt.sc/1469a3hThen please follow the installation instructions in the documentation.
Hope this helps.
Best regards, Left4code Team
Hello @left4code, thanks for getting back to me. How am I supposed to implement the vue version of the template into a vue project?
Hi arthurkabera,
Thank you for your reply,
Do you mean implementing the template to an existing vue project?
Because you don’t actually need to implement anything, the project available in the download package is a vuejs project. You just need to install dependencies then run the project.
Hope this helps.
Best regards, Left4code Team
hi , how to save theme dark or light in store and run with that theme always ? when user open dashboard again , run theme chosen
Hi saramoonco,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
You can use the local storage to store dark-mode config. Please check the following code for example:
@/components/dark-mode-switcher/Main.vue
export default defineComponent({
setup() {
const store = useStore();
const darkMode = computed(() => store.state.main.darkMode);
const setDarkModeClass = () => {
darkMode.value ? cash("html").addClass("dark") : cash("html").removeClass("dark");
};
const switchMode = () => {
localStorage.setItem('isDarkMode', `${!darkMode.value}`);
store.dispatch("main/SET_DARK_MODE", !darkMode.value);
setDarkModeClass();
};
onMounted(() => {
localStorage.getItem('isDarkMode');
const mode = localStorage.getItem('isDarkMode') === "true";
store.dispatch("main/SET_DARK_MODE", mode);
setDarkModeClass();
});
return {
switchMode,
darkMode,
};
}
});
Hope this helps.
Best regards, Left4code Team
Hi Left4code. I am using Midone vue3 version template. I am facing one issue. I have to use fragment feature like in react (<React.Fragement>). But Vue version 3 doesn’t need to wrap all directory into the root directory https://v3.vuejs.org/guide/migration/fragments.html#_3-x-syntax
The Midone template used Vue 3 but I have the below error like when I am using Vue 2. “The template root requires exactly one element vue/no-multiple-template-root” Due to Midone Template using Vue 3, I can’t use “vue-fragment” module.
Is there a solution for it? Hope to get a reply from you as soon as possible Best
Hi toyjena2019,
We just replied to your previous comment, kindly check it..
Best regards, Left4code Team
Hi
What would be a great addition to this project is a blank minimal version with just the barebones basics without extra components and external packages.
I can see there is a HTML version with supplied and is possible to do from this, but seems a bit counter productive as you have already implemented a vue3 version. Which is great by the way.
Im currently in the process of using this on Laravel 8 with inertia & jetstream and having the above would have made it far quicker to implement, along with identifying what the core requirements are in the package.json
Hi sirandycapp,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
Thanks for the suggestion, we’ll try to consider that because we are currently maintaining 3 versions of the theme at the same time.
Let me know if you have any questions during integration.
Best regards, Left4code Team
Hi Left4code. I am using Midone vue3 version template. I am facing one issue. I have to use fragment feature like in react (<React.Fragement>). But Vue version 3 doesn’t need to wrap all directory into the root directory https://v3.vuejs.org/guide/migration/fragments.html#_3-x-syntax
The Midone template used Vue 3 but I have the below error like when I am using Vue 2. “The template root requires exactly one element vue/no-multiple-template-root” Due to Midone Template using Vue 3, I can’t use “vue-fragment” module.
Is there a solution for it? Hope to get a reply from you as soon as possible Best
Hi toyjena2019,
Thank you for reaching out to us,
Sorry, it looks like you are using a different account from your purchase account.
Can you please email us your purchase code here?
leftforcode@gmail.com We will help you through there, thank you..
HI Left4code I have sent the purchase code via email to leftforcode@gmail.com from bubbyjena@outlook.com. Then what is your answer for my question.
Hi toyjena2019,
Thank you for your reply,
What version of the theme are you currently using?
We’ll try to check it out because in the latest version we don’t seem to find the problem.
Best regards, Left4code Team
Hi toyjena2019,
Thank you for your reply,
Please replace the “devDependencies” on “package.json” with the following dependencies.
"devDependencies": {
"@ckeditor/ckeditor5-dev-utils": "^12.0.1",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
"@tailwindcss/postcss7-compat": "^2.1.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-standard": "^5.1.2",
"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-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^7.0.0",
"postcss": "^7",
"postcss-loader": "4",
"prettier": "1.19.1",
"raw-loader": "^4.0.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"tailwindcss": "npm:@tailwindcss/postcss7-compat"
}
Then remove the “node_modules” directory, “yarn.lock” or “package-lock.json” file, and run “yarn install” command to re-install the dependencies.
After that, please replace the configuration in the ”.eslintrc.js” file with the following configuration.
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/vue3-essential', '@vue/standard'],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
eqeqeq: 'off',
'no-new': 'off',
'no-unused-expressions': 'off',
'space-before-function-paren': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
},
globals: {
cash: true
}
}
Please note to backup “package.json” and ”.eslintrc.js” files before making changes.
Best regards, Left4code Team
Hi, Firstly Thank you for this awesome template. I have a question as i want to get tail select options from ajax with onkeyup in search box. Please help me how can i achieve it. It will be very helpful for me if you guide. tail.select is moved from github
Hi pluginsworld,
Sorry for the late reply,
We also noticed that the plugin has been moved from GitHub and we will replace it with another plugin in the next release.
However, we find a copy link of the documentation at the following link: https://github.com/wolffe/tail.select.jsAfter reading some methods and callbacks in the documentation it seems that there is no built-in feature for search by ajax.
However, this link looks like it will help. https://github.com/wolffe/tail.select.js/wiki/How-Tos#how-to-ajax-load-your-optionsBest regards, Left4code Team
Hello Left4code
I have downloaded the template and installed the packages with Yarn. And in the first instance it works fine.
But when opening the developer tools and trying to modify the CSS either by adding a new property or class it does not respond optimally to the changes and there is a delay in display.
It has already been tested on different computers and browsers (Firefox, edge) and the problem in general persists.
I could also see a message with the same detailed problem and I did the steps of adding the following in the vue.config.js file:
css: { extract: true, sourceMap: true },
But the problem persists. To visualize in more detail I leave the following video https://www.youtube.com/watch?v=xpAapmd7jOwIs there any suggestion? Greetings.
Pst. Sorry for my English, I translated the message for ease of use.
Hi Pharmasan,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
It’s actually an expected behavior for Tailwind users. The rendering process in the browser is slow because there are too many utilities used during development. One solution that can be used now is to activate JIT mode.
You can open the file “tailwind.config.js” and add a property “mode: jit” to enable this mode.
https://prnt.sc/13am4uvThis will speed up the compile and rendering process in the browser. However, JIT mode is still in the preview stage, so there are still some unresolved issues. But I think it’s still worth trying.
Hope this helps.
Best regards, Left4code Team
Thank you..
what is the best way to extend or customize the component colors now? ex: add or update alert colors @import ”~@left4code/tw-starter/dist/scss/alert”;
Hi logicalpositiondevs,
Thank you for taking the time to contact us, I’ll be more than happy to help you.
You can override the styles or duplicate the code from ”/node_modules/@left4code/tw-starter/dist/scss/_alert.scss” to your assets directory and modify or add the colors from there.
Hope this helps.
Best regards, Left4code Team
thanks
You’re very welcome..
Best regards, Left4code Team
Hi there. Is there possible to add dollar sign svg icon for the template? Or can i add my own svg icon to the component?
Hi dreamxyz95,
Sorry for the late reply,
You can use this component for “dollar-sign” icon.
<DollarSignIcon />
Please check this link for more icons.
https://feathericons.com
Best regards, Left4code Team
Hi, i’d like to have the vuejs 2 version of rubick also… mi email is: jdavidoa91@gmail.com, thanks in advance
Hi NaturalCloud,
Email sent, kindly check your inbox..
Best regards, Left4code Team
