Discussion on Gogo - Nextjs React Admin Dashboard (React 19)

Discussion on Gogo - Nextjs React Admin Dashboard (React 19)

Cart 2,059 sales
Recently Updated
Well Documented

ColoredStrategies supports this item

Supported

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

341 comments found.

Hello

I am getting “Bootstrap@4.6.0 requires a peer of jquery@1.9.1 – You must install peer dependencies yourself.” but in the auction description there is information that there is no jquery in the theme.

I would like to get a refund for the product and get it deleted from my list.

Thank you

Hi,

The bootstrap package is a sub-package that comes when installing bootstrap-vue and is only available for bootstrap styles in the project.

JQuery is not dependent anywhere and is not included in your bundle due to treeshaking.

All the best.

Hello,

I recently purchased a Piaf Vue 2 template. When I compiled in my local machine, it seems to work fine but when I uploaded to the hosting service (Firebase hosting) it gets stuck in the loading screen. Do you have any ideas as to why and how to fix it?

Best regards.

Hi,

It looks like the code in the app is not working with the installed version of Firebase which is a bit odd.

I don’t think it is related to dist build though, is it also throwing the error in development version?

No. It runs perfectly when serve with npm run serve. If put it in any server, whetever I use one on the cloud or on the local machine, it gives me the same error.

That is quite strange and unfortunately we can’t reproduce the error to test any solution.

Instead of calling “firebase.initializeApp” you may try “firebase.default.initializeApp” as it is mentioned here: https://github.com/firebase/firebaseui-web/issues/392

You may also refund the template since we are unable to solve the problem.

All the best.

majority of the dependencies in this project are deprecated.

When I run npm upgrade (issue with node-sass)

npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported npm WARN deprecated @hapi/address@2.1.4: Moved to ‘npm install @sideway/address’ npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. npm WARN deprecated 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. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/joi@15.1.1: Switch to ‘npm install joi’ npm WARN deprecated axios@0.15.3: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410 npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x. npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1 npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

Please help

Hello,

Thank you for the input. The main issue is that the template is working on Vue 2 and Bootstrap-Vue 2 as it is seen on the preview page.

There is no stable library for Bootstrap 5 with Vue 3 or even with Vue 2 stable and ready to update. Although the current version has some npm warnings, it is working on top of stable versions and has been used by people quite a lot.

All the best.

Hi i have just purchased Piaf vuejs template and it doesn’t work:

I have this error when i start the server: npm run serve

> piaf-vue@5.2.2 serve > vue-cli-service serve } Error: Rule can only have one resource source (provided resource and test + include + exclude) in { “exclude”: [ null ], “use”: [ { “loader”: ”/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/cache-loader/dist/cjs.js”, “options”: { “cacheDirectory”: ”/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/.cache/babel-loader”, “cacheIdentifier”: “c4f0cbce” }, “ident”: “clonedRuleSet-380.rules0.use0” }, { “loader”: ”/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/babel-loader/lib/index.js”, “options”: “undefined”, “ident”: “undefined” } ] } at checkResourceSource (/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:167:11) at Function.normalizeRule (/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:198:4) at /home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:110:20 at Array.map (<anonymous>) at Function.normalizeRules (/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:109:17) at new RuleSet (/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:104:24) at new NormalModuleFactory (/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:115:18) at Compiler.createNormalModuleFactory (/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:636:31) at Compiler.newCompilationParams (/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:653:30) at Compiler.compile (/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:661:23) at /home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:77:18 at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1) at AsyncSeriesHook.lazyCompileHook (/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/tapable/lib/Hook.js:154:20) at Watching._go (/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:41:32) at /home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:33:9 at Compiler.readRecords (/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:529:11)

INFO  Starting development server...
ERROR  Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
 "exclude": [
   null
 ],
 "use": [
   {
     "loader": "/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/cache-loader/dist/cjs.js",
     "options": {
       "cacheDirectory": "/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/.cache/babel-loader",
       "cacheIdentifier": "c4f0cbce" 
     },
     "ident": "clonedRuleSet-38[0].rules[0].use[0]" 
   },
   {
     "loader": "/home/rchagar/dev/vuejs/piaf/themeforest-Lbn5l1Ub-piaf-vuejs-admin-dashboard/Piaf-Vuejs-Admin-Dashboard-5.2.2/Vue-Version/Source/piaf-vue/node_modules/babel-loader/lib/index.js",
     "options": "undefined",
     "ident": "undefined" 
   }
 ]

Hi,

Piaf supports LTS node version. Our buyers do not have any problems with the node version.

All the best.

Buenos Días. Necesito cambiar el color del componente radial-progress-bar, como podría hacerlo ?

Hi,

You can see that the styles of the ‘radial-progress-bar’ plugin are crushed in the src/assets/css/sass/_piaf.style.scss file line 4774.

If you wish, you can change the stroke, fill, color values here, if you wish, you can remove the stroke, fill and color values from the css definitions and pass the colors with parameters in the field where you use the component.(startColor,stopColor,innerStrokeColor)

All the best.

buenas tarde. intento cambiar en color del radial-progres-bar , pero me da error , me podría indicar como hacerlo .

gracias.

Hi,

Can you give some more information about the error?

All the best.

I can’t install it. It is showing this error https://pastebin.com/cd6dGdki

I tried but many libraries doesn’t work on SSR mode. Vuetable fails to work with nuxt. Anyway great template. Waiting for the next update.

Hi,

Thanks for your feedback. However, I regret to inform you that we will not be able to make the SSR development for the moment.

All the best.

Thanks for your reply. I tried with vue-good-table. It works. For translation nuxt i18n module is useful.

Hey, I see you’ve installed & imported the css for vue2-dropzone… I can’t seem to get this working with the project. Would you happen to have tried this package or was it just added for future use?

Hey, so sorry. My project was branching off piaf-vue-start, not piaf-vue (the full version). Kept running searches but couldn’t find the Dropzone example. Finally found it.

Otherwise, project is going well.

Glad you found the sample :)

How to convert it to nuxt js?

Hi,

Unfortunately we don’t have much experience with nuxtjs. I think you can adapt it by following the directions in the official documentation. Sorry I couldn’t be more helpful.

All the best.

Thanks for pointing me to the router/index.js page to see how different components are loaded. Can you show me how the route table can be changed so a login page appears first, and then the main app/start page appears next (assuming successful login).

BTW; you were right about the logo icon. I got that working.

Thanks,

Terry

Hi There,

When I run piaf-vue-start application and select “Single” menu item, I get these errors in my console window of my Chrome browser:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher ”$route”: “TypeError: Cannot read property ‘toLowerCase’ of undefined”

found in

-> <Sidebar> at src/containers/navs/Sidebar.vue <AppLayout> at src/layouts/AppLayout.vue <Index> at src/views/app/index.vue <App> at src/App.vue <Root> ... vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read property ‘toLowerCase’ of undefined at VueComponent.$route (Sidebar.vue?2ed7:329) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863) at Watcher.run (vue.runtime.esm.js?2b0e:4584) at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4326) at Array.eval (vue.runtime.esm.js?2b0e:1989) at flushCallbacks (vue.runtime.esm.js?2b0e:1915)

Can you tell me what is the problem?

Terry

Hi Again,

I’m trying to use my own application icon (that shows up in the middle of the top navbar). I see the logo path is in several .css theme files:

$logo-path: ”/assets/logos/black.svg”; $logo-path-mobile: ”/assets/logos/mobile.svg”;

$lp-logo-path-pinned: ”/assets/logos/black.svg”; $lp-logo-path: ”/assets/logos/white-full.svg”;

When I switch these to my own 100×99 PNG file, the icon is not properly scaled. How can I fix this?

Terry

Hi Terry,

If I had to answer your questions one by one. Regarding the sidebar:

If the url you are viewing is not in the menu: It is possible to get the relevant error when trying to make the sidebar displayed url selected in the menu.

As for your question about the logo:

You can search for .logo in the “src/assets/css/sass/_piaf.style.scss” file and make the necessary arrangements for responsive cases. The cause of your problem is probably related to the “background-position:center center” assignment.

All the best.

I just purchased the Piaf admin vue template. Loaded the piaf vue start app and ran on my MacBook Pro/Chrome. I see a number of errors in the console:

vue-router.esm.js?8c4f:16 [vue-router] <router-link>’s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link

I am also surprised that there is no documentation on the various components themselves…

I find the documentation for the user and user permissions difficult to follow. Do you have a tutorial video or something I can follow to understand how I can change from firebase to a different REST API for user authentication?

Thanks,

Terry

Can you explain how I can remove the piaf welcome page as part of the piaf-vue-start example. I do not want to see your advertising when I start “npm run serve” and be forced to click “View Now” to see my application.

In fact, it would be great if you could describe how the Vue application loads on startup. Normally, there is App.vue contains a “name: “App”” section that Vue attaches with the ”#app” tag in Vue.create. So I’m not sure how you are manipulating startup to get to your default page. Some description of how the start up process works would be ideal.

Thanks,

Terry

Actually, what I would like to do is have the login screen appear first, then upon successful login, i would like the main app page to appear. I understand where I need to go to implement my authentication (axios call to a REST API that returns headers that must be included in follow up data fetch calls). I just need to get the routing correct.

Terry

Hi,

In order to better understand how the application works, it will be enlightening for you to examine the router.js file. The relevant components are loaded into the <router-view> in the “src/App.vue” file, according to the cases in the “router.js” file.

You can change or redirect the component that corresponds to the ”/” path in the src/router.js file.

  {
    path: "/",
    component: () => import(/* webpackChunkName: "home" */ "./views/home"),
    // redirect: `${adminRoot}/piaf`,
  },

All the best.

Hello. I’m new in node.js and vue, but when I try install and run your project, I got tons of warnings about discontinued and vulnerable components into the project. When I forced the install, then the website also not worked. I’m afraid if vue, or vue components is not continue, this is not a good idea to start a new project based to this. What you think, your template is able to use in production without redesign the whole stuff?

And please send me a working step by step instrucion for making work your template, because the nvm install—force and mvm run serve is definietly not enough…

Hi,

The instructions in the link below will help you.

https://piaf-vue-docs.coloredstrategies.com/docs/gettingstarted/development

All the best.

Hi, why the color of the page is different between the demo and my download?

the demo page color is light blue(3E8CC7), but my download page (dashboard-content, html-version) is dark blue(215185), how to fix it?

Hi,

There are differences in the use of colors between dark mode and light mode. A blue tone that looks good on a white background can look bad on a dark background. If you wish, you can change the colors in the theme files in the sass folder.

All the best.

Hi just wanted to know if this template supports the following: 1. Arabic languages 2. Nuxt

Hi,

It supports RTL but was not developed with Nuxt.

All the best.

My web rotate flip left to right. How can I fix it. (Menu keep right not left)

Hi,

For a long time, I couldn’t write an answer because I couldn’t understand what the problem was. Theme supports RTL and LTR. I hope your problem has been resolved by now. If it’s not resolved, we’d love to help if you could provide a more detailed description of what the problem is.

All the best.

Is there any documentation for your components?

Hi,

We don’t have documentation for external components since they provide one at their repo. We do have docs for our template’s code for routing, settings, layout, vuex and so on. You may find it here: https://piaf-vue-docs.coloredstrategies.com/

Cheers.

Acabo de instalar el proyecto piaf-vue y me aparece este error Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree. at Object.<anonymous> (C:\Users\humbe\Downloads\themeforest-iOoWlQE0-piaf-vuejs-admin-dashboard\Piaf-Vuejs-Admin-Dashboard-5.2.2\Vue-Version\Source\piaf-vue\node_modules\vue-loader\dist\index.js:8:11) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:14) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:92:18) at C:\Users\humbe\Downloads\themeforest-iOoWlQE0-piaf-vuejs-admin-dashboard\Piaf-Vuejs-Admin-Dashboard-5.2.2\Vue-Version\Source\piaf-vue\node_modules\@vue\cli-service\lib\config\base.js:110:16 at C:\Users\humbe\Downloads\themeforest-iOoWlQE0-piaf-vuejs-admin-dashboard\Piaf-Vuejs-Admin-Dashboard-5.2.2\Vue-Version\Source\piaf-vue\node_modules\@vue\cli-service\lib\Service.js:236:40 at Array.forEach (<anonymous>) at Service.resolveChainableWebpackConfig (C:\Users\humbe\Downloads\themeforest-iOoWlQE0-piaf-vuejs-admin-dashboard\Piaf-Vuejs-Admin-Dashboard-5.2.2\Vue-Version\Source\piaf-vue\node_modules\@vue\cli-service\lib\Service.js:236:26) at Service.resolveWebpackConfig (C:\Users\humbe\Downloads\themeforest-iOoWlQE0-piaf-vuejs-admin-dashboard\Piaf-Vuejs-Admin-Dashboard-5.2.2\Vue-Version\Source\piaf-vue\node_modules\@vue\cli-service\lib\Service.js:240:48) at PluginAPI.resolveWebpackConfig (C:\Users\humbe\Downloads\themeforest-iOoWlQE0-piaf-vuejs-admin-dashboard\Piaf-Vuejs-Admin-Dashboard-5.2.2\Vue-Version\Source\piaf-vue\node_modules\@vue\cli-service\lib\PluginAPI.js:132:25) at serve (C:\Users\humbe\Downloads\themeforest-iOoWlQE0-piaf-vuejs-admin-dashboard\Piaf-Vuejs-Admin-Dashboard-5.2.2\Vue-Version\Source\piaf-vue\node_modules\@vue\cli-service\lib\commands\serve.js:75:31) at Service.run (C:\Users\humbe\Downloads\themeforest-iOoWlQE0-piaf-vuejs-admin-dashboard\Piaf-Vuejs-Admin-Dashboard-5.2.2\Vue-Version\Source\piaf-vue\node_modules\@vue\cli-service\lib\Service.js:230:12) at Object.<anonymous> (C:\Users\humbe\Downloads\themeforest-iOoWlQE0-piaf-vuejs-admin-dashboard\Piaf-Vuejs-Admin-Dashboard-5.2.2\Vue-Version\Source\piaf-vue\node_modules\@vue\cli-service\bin\vue-cli-service.js:36:9) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. PS C:\Users\humbe\Downloads\themeforest-iOoWlQE0-piaf-vuejs-admin-dashboard\Piaf-Vuejs-Admin-Dashboard-5.2.2\Vue-Version\Source\piaf-vue>

ERROR  Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.

Hi,

It looks like the problem will occur when you install the missing library.

npm i @vue/compiler-sfc

All the best.

hi;

How can i “hide” theme button or “simple-icon-magic-wand” icon o index page by javascript command

Hi,

It will be enough to remove the ”<color-switcher />” component from the “src/App.vue” file.

All the best.

hello dear i need know how can i install this template for laravel + vuejs thanks

Hi,

We do not have a Laravel + vuejs version. However, I can recommend you to review Inertiajs.

All the best.

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