Discussion on Vuero - Vuejs, Nuxt, Electron - Admin and Webapp UI Kit

Discussion on Vuero - Vuejs, Nuxt, Electron - Admin and Webapp UI Kit

Cart 2,390 sales
Well Documented

cssninjaStudio supports this item

Supported

This author's response time can be up to 2 business days.

218 comments found.

Hi, I find your project interesting. We already have existing vue3 project with typescript, vuex & tailwind. Can I use your component for our existing project? tailwind and Bulma together will create issues?

Also our login/authentication done through Laravel API and all data coming from Laravel API after login. Hope thats ok?

Please advice.

Sudipta

Hi, Iam affraid I cannot recommend what you are suggesting. There would be no point mixing bulma and tailwind as it would only lead to bloat. You would either have to drop one of them as they cannot work together without creating too much overhead. Best.

ok so if I use only Bulma all will be fine? Also our login/authentication done through Laravel API and all data coming from Laravel API after login. Hope thats ok?

Hi, yes but that would still mean replacing your entire frontend with Vuero. Vuero includes some additional utilities like a useAPI composable that simplifies your API calls. So yes, it is built to support API usage. You should start first by exploring the template features and code, then think about the best way to implement your migration to the new UI. Best.

Hi, nice job on this amazing theme. Anyways, just quick question: how can I use webpack in a multi-page project with this theme? Icons are not loading :(

Hi, thank you very much. Unfortunately, we do not support webpack. We only support vite.js, as it is 100x faster that webpack. The icons do not load because https://github.com/antfu/unplugin-icons which is an icon loader fo vite, based on the iconify library. You should look for a webpack loader of the library or implement your own solution in replacement of ours.

Hello, ThemeForest Files Included says HTML Files are included but i can’t find them. Are HTML files included?

Hi, given that .vue files are a subset of Html files, then yes. If you are looking for pure HTML, you should take a look to the Huro template.

Hi, i asked for a refund. can you tell me why it is taking so long? envato said they sent an email for that to you. Thanks

Hi, there is no refund request with your name in pending requests. Please check you request status. Best.

Nice design, good code, ease to custom.

And, can you please add ‘footer’ to layout or theme?

Hi, thanks! What do you mean? Do you mean you need a footer component for dashboard and webapp pages?

Yes, i mean it.

Got that added to our feature request board. Best.

Could you provide package.json so I can see dependecies that are used?

Hi, here is the package.json of the full project. The product ships with a quickstarter project without the unecessary stuff: { “name”: “vuero”, “version”: “2.1.0”, “private”: true, “license”: “SEE LICENSE IN LICENSE.md”, “author”: { “name”: “cssninjaStudio <hello@cssninja.io> (https://cssninja.io)" }, “engines”: { “node”: ”>=14.17.0”, “npm”: ”>=7” }, “gitHooks”: { “pre-commit”: “lint-staged”, “commit-msg”: “commitlint -e -V ” }, “lint-staged”: { “.ts”: [ “eslint—fix”, “prettier—write” ], “.scss”: [ “stylelint”, “prettier—write” ], “.md”: [ “eslint—fix”, “prettier—write” ], “.vue”: [ “eslint—fix”, “prettier—write” ] }, “scripts”: { “dev”: “vite”, “dev:force”: “vite—force”, “build”: “run-s build:”, “build:update-bulma-colors”: “bulma-css-vars”, “build:vite”: “vite build”, “preview”: “vite preview”, “lint”: “run-s lint:doc:fix lint:eslint:fix lint:stylelint:fix lint:prettier:fix”, “lint:prettier”: “prettier—check \”./src//.(ts|vue|css|scss)\””, “lint:prettier:fix”: “prettier—write \”./src//.(ts|vue|css|scss)\””, “lint:eslint”: “eslint—ext .ts,.vue ./src”, “lint:eslint:fix”: “eslint—fix—ext .ts,.vue ./src”, “lint:stylelint”: “stylelint ./src//.{vue,css,scss}”, “lint:stylelint:fix”: “stylelint ./src//.{vue,css,scss}—fix”, “lint:doc:fix”: “run-s lint:doc:fix:”, “lint:doc:fix:eslint”: “eslint—fix—ext .md ./documentation”, “lint:doc:fix:prettier”: “prettier—write \”./documentation/*/.(md)\””, “test”: “run-p test:lint test:tsc”, “test:tsc”: “vue-tsc—noEmit”, “test:lint”: “run-p lint:eslint lint:stylelint lint:prettier”, “test:e2e”: “echo \”[warning] no e2e test implemented yet\””, “test:unit”: “echo \”[warning] no unit test implemented yet\””, “cypress”: “cypress”, “commit”: “commit”, “release”: “run-s test build release:*”, “release:standard-version”: “standard-version” }, “dependencies”: { ”@ckeditor/ckeditor5-build-classic”: “30.0.0”, ”@ckeditor/ckeditor5-vue”: “2.0.1”, ”@iconify/iconify”: “2.0.4”, ”@mapbox/mapbox-gl-geocoder”: “4.7.4”, ”@popperjs/core”: “2.10.2”, ”@vueform/multiselect”: “2.2.0”, ”@vueform/slider”: “2.0.5”, ”@vueuse/core”: “6.5.3”, ”@vueuse/head”: “0.6.0”, “apexcharts”: “3.28.3”, “axios”: “0.22.0”, “billboard.js”: “3.1.5”, “bulma”: “0.9.3”, “bulma-css-vars”: “0.7.0”, “dayjs”: “1.10.7”, “dragula”: “3.7.3”, “dropzone”: “5.9.3”, “filepond”: “4.30.3”, “filepond-plugin-file-validate-size”: “2.2.5”, “filepond-plugin-file-validate-type”: “1.2.6”, “filepond-plugin-image-crop”: “2.0.6”, “filepond-plugin-image-edit”: “1.6.3”, “filepond-plugin-image-exif-orientation”: “1.0.11”, “filepond-plugin-image-preview”: “4.6.10”, “filepond-plugin-image-resize”: “2.0.10”, “filepond-plugin-image-transform”: “3.8.7”, “imask”: “6.2.2”, “mapbox-gl”: “2.5.0”, “markdown-it-emoji”: “2.0.0”, “notyf”: “3.10.0”, “nprogress”: “0.2.0”, “photoswipe”: “4.1.3”, “pinia”: “2.0.0-rc.11”, “simple-datatables”: “3.1.2”, “simplebar”: “6.0.0-beta.10”, “simplebar-vue”: “2.0.0-beta.10”, “tiny-slider”: “2.9.3”, “tippy.js”: “6.3.2”, “tslib”: “2.3.1”, “v-calendar”: “3.0.0-alpha.5”, “vee-validate”: “4.5.0-alpha.6”, “vivus”: “0.4.6”, “vue”: “3.2.19”, “vue-accessible-color-picker”: “3.0.0”, “vue-i18n”: “9.2.0-beta.11”, “vue-router”: “4.0.10”, “vue-scrollto”: “2.20.0”, “vue-tippy”: “6.0.0-alpha.33”, “vue3-apexcharts”: “1.4.1”, “yup”: “0.32.9” }, “devDependencies”: { ”@commitlint/cli”: “13.2.0”, ”@commitlint/config-conventional”: “13.2.0”, ”@commitlint/prompt-cli”: “13.2.0”, ”@iconify/json”: “1.1.410”, ”@intlify/vite-plugin-vue-i18n”: “2.4.0”, ”@types/dragula”: “3.7.1”, ”@types/mapbox-gl”: “2.4.2”, ”@types/mapbox__mapbox-gl-geocoder”: “4.7.1”, ”@types/markdown-it”: “12.2.1”, ”@types/node”: “16.10.2”, ”@types/nprogress”: “0.2.0”, ”@types/photoswipe”: “4.1.2”, ”@types/prismjs”: “1.16.6”, ”@types/simplebar”: “5.3.3”, ”@types/vivus”: “0.4.4”, ”@typescript-eslint/eslint-plugin”: “4.33.0”, ”@typescript-eslint/parser”: “4.33.0”, ”@vitejs/plugin-vue”: “1.9.3”, “commitlint”: “13.2.0”, “cross-env”: “7.0.3”, “cypress”: “8.5.0”, “eslint”: “7.32.0”, “eslint-config-prettier”: “8.3.0”, “eslint-plugin-md”: “1.0.19”, “eslint-plugin-vue”: “7.19.0”, “eslint-plugin-vuejs-accessibility”: “0.7.1”, “gray-matter”: “4.0.3”, “lint-staged”: “11.2.0”, “markdown-it”: “12.2.0”, “markdown-it-anchor”: “8.3.1”, “npm-run-all”: “4.1.5”, “plyr”: “3.6.8”, “prettier”: “2.4.1”, “prismjs”: “1.25.0”, “rimraf”: “3.0.2”, “rollup”: “2.58.0”, “rollup-plugin-purgecss”: “^4.0.3”, “sass”: “1.32.13”, “standard-version”: “9.3.1”, “stylelint”: “13.13.1”, “stylelint-config-prettier”: “8.0.2”, “stylelint-config-standard”: “22.0.0”, “stylelint-scss”: “3.21.0”, “typescript”: “4.4.3”, “unplugin-vue-components”: “0.15.6”, “vite”: “2.6.3”, “vite-imagetools”: “3.6.8”, “vite-plugin-fonts”: “0.2.2”, “vite-plugin-imagemin”: “0.4.6”, “vite-plugin-pages”: “0.18.1”, “vite-plugin-purge-icons”: “0.7.0”, “vite-plugin-pwa”: “0.11.3”, “vite-plugin-radar”: “0.2.0”, “vue-tsc”: “0.3.0”, “yorkie”: “2.0.0” } }

Hi Guys, I´m trying to change the primary color of the template. I followed the steps in your documentation but I cant make it work.

bulma-css-vars.config.js:

primary: hsl(342, 100, 46)

then: npm run build:update-bulma-colors

any idea of what I am doing wrong?

Many thanks! cheers Abel

Hi Abel, please repost this as a ticket on our support portal here and we’ll be glad to solve your issue. ==> https://support.cssninja.io. Best

Hey great design! I wanted to know if we have an option to add multiple images to modals from database, or how can we do it?

Hi, there is no database linked to the template. This is a Vue 3 UI kit, all database stuff is not implemented here. Best.

Hello, nice work, keep the good job, i saw that probably today or tomorow will me a new upgrade, but i have downlowded the version 2.0.0 and run npm install, and it gives error on dependencies

I have npm version 7.24.2 & node version 14.17.0

unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vuero@2.0.0
npm ERR! Found: vue@3.2.12
npm ERR! node_modules/vue
npm ERR!   vue@”3.2.12” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@”^2.5.17 || ^2.6” from simplebar-vue@2.0.0-beta.10
npm ERR! node_modules/simplebar-vue
npm ERR!   simplebar-vue@”2.0.0-beta.10” from the root project

We just published a new update. Please proceed with the new one. Best.

Sorry but i got the same! Still the same error from simplebar-vue dependencie

Can you open a support ticket on https://support.cssninja.io?

fresh install npm install npm run production npx http-server ./dist TypeError: Failed to fetch dynamically imported module: http://192.168.1.102:8080/assets/app.31d8f0a9.js only login and singup page working.

Hi, this is due to demo images that we cannot ship with the final product regarding the Envato submission guidelines. You can reference demo images on https://vuero.cssninja.io by using a regex in your code. More details on how to do it in our common issues section: https://docs.cssninja.io/vuero/documentation/common-issues.html Best.

Hello! When I’m running npm run build:update-bulma-colors I can see that in some scss files the color has changed but the main color actually doesn’t change. In src/scss/css-variables/_colors.scss I can still see the old color (I guess your original color). Is that a expected behavior, if yes then how can I actually change the main color?

Hi, at the root of your project, open bulma-css-vars.config.js and change the primary HSL value to set your own color. Please note that you can also change the info, success, warning and danger bulma default colors. Once done, run that command again and your colors will be updated. Let me know if you have other questions. Also, please consider registering on our support portal https://support.cssninja.io for better ticket tracking. Best.

Hi. I already changed it in the config like this ... primary: hsl(338, 76, 53), // ’#e22e6f’, ...

In the colors.css i see this @include colorHsl(‘primary’, 153, 48%, 49%);

Is this expected behavior?

Thanks in advance!

Yes you should change the value there as well to generate your Primary shades.

I have a simple question:

Is it possible to change/customize/personalize the menu without breaking the code? (so I’ll be able to use future updates)

I like this template/admin, but I need to use a different side-menu (one that is similar to Google Analytics’ menu), which you don’t have as an option in the layout.

Thanks!

Hi, I just answered your private email message. You should have the answer yoou are looking for. Best.

Hello, after many many tries I couldn’t access to the support so I’m going to write here an issue. First of all, the theme looks outstanding (I’ve just downloaded), but I’m afraid that there is a little bug in one of the files (color-converter.ts or themeColors.ts) on IOS 15. I’ve tested already on IOS 14, Android, and Windows 11 (Chrome, Firefox, Safari…) but, on IOS 15 not working in none of the browsers, so it’s probably something with the OS but I couldn’t find the solution. The error says:

TypeError: undefined is not an object (evaluating ‘hslCss.substr(4).split(“)”)[0].split(“(“)[1].split’)

so maybe is something related with the computedstyle, I really don’t know. Sorry for posting here but support getting stuck introducing the email.

And congratulations for the theme.

Hi, thanks for your kind words and thanks for reporting this. We’ll try to reproduce it on our end and find the appropriate fix. Best.

Reach out to us by private message on our profile to fix your support portal issue.

I can’t load preview here nor demo on your page https://vuero.cssninja.io

Hi, this probably because we were redeploying the demo. You should have access by now.

Hi I can’t view the demo dashboards, all of them redirected me to the login page.

BTW do you have a figma template? We need to make our wireframes based on vuero components

Hi, what do you mean when you say you cannot see the dashboards? The online demo seems fine to me, or is it something else? Regarding Figma, Iam sorry but we don’t have any design files to share as we only work with paper wireframes to speed up the development process. Best.

Hi pls see this animated gif, you will see the problem i’m talking about

https://cln.sh/hb89mp

Hi, this is due to the preimplementation of the authentication. Once on the login page, please click the login button and you should be redirected to the demo you’ve chosen.

hi is the documentation is updated for v2.0 ?

Hi, yes we just pushed additional stuff to the v2 docs. Your feedback is welcome. Best.

I seem to always get these two errors when building the scss: <stdin>:16087:0: warning: "@charset" must be the first rule in the file 16087 │ @charset "UTF-8"; ╵ ~~~~~~~~ <stdin>:16083:0: note: This rule cannot come before a "@charset" rule 16083 │ pre.diff-highlight > code .prism--token.inserted:not(.prism--pref... ╵ ^

Hi, can you report this on https://support.cssninja.io by opening a new ticket?

The text seem very blurry in some pages . eg the chat page especially while inspecting on chrome.

Another question, is this easily implementable on laravel 8(jetstream- inertia)?

Hi, I don’t understand when you say blurry as we’re not able to see any blurry text. I’d understand if you’d be talking about an image, but HTML Iam not sure. Please share a screenshot to illustrate your issue. Regarding the backend, this product can work with anything. Please however keep in mind that you need Vue JS and Typescript knowledge to get the most of the template. Best.

There is no way to add screenshot here

You can link it from an external image sharing service.

Hello,

We’re looking for an Admin UI with a code best practices in mind and simplicity to implement admin UI (quickness is the key for us) without rewriting everything from scratch. Maybe if it’s possible to get a glimpse of how you do the `API -> store (pinia/vuex) -> UI logic` (if it’s a part of this UI though, not sure, correct me if I’m wrong) or just a UI flow|logic (image of the code without any sources)?

Why are we asking for such thing, because we’ve already tried and seen really ‘ugly’ examples of code (after purchase) and usage examples provided by Template Devs.

Regards, D.

Hi, This is a Vue 3 template and is different from the Vue 2 API paradigm. Vue 3 introduces the new Composition API and therefore neglates the need for a store like VueX/Pinia. We also have special composables/directives like useApi that facilitate API calls. Composition API introduces new methods that make component communication and state management easier. Please open a ticket on our support portal https://support.cssninja.io so you can get more details from our tech lead. Please also note that this template makes heavy usage of Typescript and code linting. Best.

On 1.4:  WARN  deprecated @types/simplebar@5.3.3: This is a stub types definition. simplebar provides its own type definitions, so you do not need this installed.

Hi, please suggest what you think should be done about this on our support portal. We’ll discuss it with you and find the most suitable solution. Best.

On the new version, there is a line in main.ts “window.colorUpdater = colorUpdater” which requires a tsignore. You have a window.d.ts declaration file in the root, so you could define that there to provide typings.

Can you post this suggestion on our support portal https://support.cssninja.io or on our Vuero discussions channel on github ? https://github.com/cssninjaStudio/vuero-public/discussions

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey