340 comments found.
npm run prod is not working for me
I have the following erreor
ERROR in assets/js/main.7b6c.js from Terser TypeError: Cannot read property ‘minify’ of undefined at minify (/Users/anis.zouaoui/workspace/pptxjs/Piaf-Vuejs-Admin-Dashboard-1.0.2/Source/node_modules/terser-webpack-plugin/dist/minify.js:175:23) at module.exports (/Users/anis.zouaoui/workspace/pptxjs/Piaf-Vuejs-Admin-Dashboard-1.0.2/Source/node_modules/terser-webpack-plugin/dist/worker.js:13:40) at handle (/Users/anis.zouaoui/workspace/pptxjs/Piaf-Vuejs-Admin-Dashboard-1.0.2/Source/node_modules/worker-farm/lib/child/index.js:44:8) at process.<anonymous> (/Users/anis.zouaoui/workspace/pptxjs/Piaf-Vuejs-Admin-Dashboard-1.0.2/Source/node_modules/worker-farm/lib/child/index.js:51:3) at process.emit (events.js:182:13) at emit (internal/child_process.js:797:12) at process._tickCallback (internal/process/next_tick.js:174:19)
Hi,
We have not encounter this problem earlier but when i do a quick search i have found out an issue on github opened about 24 hours ago.
I guess you are on a Linux system right?
The problem seems to be about Terser which is a Vue.js dependency. Here is the issue: https://github.com/vuejs/vue-cli/issues/3407
Would you please check node_modules/terser/package.json file to see your version. If it is 3.16 downgrading it to 3.14 should fix the problem.
I am not familiar with firebase so could I just remove and not use firebase,In your project?If could How could do that?
Hi,
You may remove firebase from the project quite easily.
You need to edit auth functions in src/store/modules/user.js file and implement your own solution.
There is initiation of Firebase in src/main.js so you will also need to remove them.
Cheers.
hello, we have uploaded the dist to server but it lands on login page.how do we get the TLD to land on the lading page like this: http://piaf-vue.crealeaf.com/multipage-home
There’s only one html file in dist folder
Hi,
You will need to make some modifications to make landing page appear first.
In src/router/index.js file please change to code below
const routes = [
{
path: "/",
component:LandingPages,
redirect: "/app",
children: [
{path: "multipage-home",component: LandingPagesMultipageHome},
...
to this:
const routes = [
{
path: "/",
component:LandingPages,
children: [
{path: "",component: LandingPagesMultipageHome},
{path: "multipage-home",component: LandingPagesMultipageHome},
...
Here is what we achive by doing this. We are removing redirecting to /app path so it does not go to app path and shows dashboard page by default. Routing an empty path to LandingPagesMultipageHome as well as “multipage-home” path to make sure first thing showed is the landing page.
It is normal that there is only one html file since this is a single page application. There are not any physical files and all routes are controled via javascript.
It is not directly relevant to this subject but i would like to make a reminder. You will also need to configure your server to enable url rewriting and direct all urls to index.html page.
Cheers.
thanks. and how do i edit landing page text and site logos as well as home page background image?
All of the pages are located under src/pages
Landingpage home is located here: src/pages/landingPages/MultipageHome.vue
Images including site logos are located src/assets/img folder.
Cheers.
Getting this error when running: npm run dev
> vue-piaf@1.0.2 dev C:\Windows\System32 > webpack-dev-server—inline—history-api-fallback—progress—config src/.webpack/dev.js
internal/modules/cjs/loader.js:582 throw err; ^
Error: Cannot find module ‘debug’ at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15) at Function.Module._load (internal/modules/cjs/loader.js:506:25) at Module.require (internal/modules/cjs/loader.js:636:17) at require (internal/modules/cjs/helpers.js:20:18) at Object.<anonymous> (C:\Windows\System32\node_modules\webpack-dev-server\bin\webpack-dev-server.js:16:15) at Module._compile (internal/modules/cjs/loader.js:688:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10) at Module.load (internal/modules/cjs/loader.js:598:32) at tryModuleLoad (internal/modules/cjs/loader.js:537:12) at Function.Module._load (internal/modules/cjs/loader.js:529:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue-piaf@1.0.2 dev: `webpack-dev-server—inline—history-api-fallback—progress—config src/.webpack/dev.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vue-piaf@1.0.2 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2019-02-01T00_57_01_911Z-debug.log
ignore above error. i changed the port. dist is done now but still loads the admin page and not the landing page after changing “const routes = [....” . kindly assist
Hi,
I tried what we have suggested and looks like it works for both production and devleopment builds.
Here is the routes constant in case you have missed something:
const routes = [
{
path: "/",
component:LandingPages,
children: [
{path: "",component: LandingPagesMultipageHome},
{path: "multipage-home",component: LandingPagesMultipageHome},
{path: "about",component: LandingPagesAbout},
{path: "auth-login",component: LandingPagesAuthLogin},
{path: "auth-register",component: LandingPagesAuthRegister},
{path: "blog",component: LandingPagesBlog},
{path: "blog-detail",component: LandingPagesBlogDetail},
{path: "careers",component: LandingPagesCareers},
{path: "confirmation",component: LandingPagesConfirmation},
{path: "contact",component: LandingPagesContact},
{path: "content",component: LandingPagesContent},
{path: "docs",component: LandingPagesDocs},
{path: "docs-detail",component: LandingPagesDocsDetail},
{path: "features",component: LandingPagesFeatures},
{path: "prices",component: LandingPagesPrices},
{path: "videos",component: LandingPagesVideos},
{path: "video-detail",component: LandingPagesVideoDetail},
]
},
{path: "/singlepage-home",component: LandingPagesSinglepageHome},
{path: "/error",component: Error},
{
path: "/user",
component: User,
redirect: "/user/login",
children: [
{path: "login",component: UserLogin},
{path: "register",component: UserRegister},
{path: "forgot-password",component: UserForgotPassword},
]
},
{
path: "/app",
component: App,
redirect: "/app/dashboards",
beforeEnter :AuthRequired,
children:[
{
path: "dashboards",
component: Dashboards,
redirect: "/app/dashboards/default",
children: [
{ path: "default", component: DashboardsDefault },
{ path: "analytics", component: DashboardsAnalytics },
{ path: "ecommerce", component: DashboardsEcommerce },
{ path: "content", component: DashboardsContent }
]
},
{
path: "layouts",
component: Layouts,
redirect: "/app/layouts/data-list",
children: [
{ path: "data-list", component: LayoutsDataList },
{ path: "thumb-list", component: LayoutsThumbList },
{ path: "image-list", component: LayoutsImageList },
{ path: "details", component: LayoutsDetails },
{ path: "search", component: LayoutsSearch }
]
},
{
path: "applications",
component: Applications,
redirect: "/app/applications/todo",
children: [
{ path: "todo", component: ApplicationsTodo },
{ path: "survey", component: ApplicationsSurvey },
{ path: 'survey/:id', component: ApplicationsSurveyDetail, props: true },
{ path: "chat", component: ApplicationsChat },
]
},
{
path: "ui",
component: UI,
redirect: "/app/ui/alerts",
children: [
{ path: "alerts", component: UiAlerts },
{ path: "badges", component: UiBadges },
{ path: "buttons", component: UiButtons },
{ path: "cards", component: UiCards },
{ path: "carousel", component: UiCarousel },
{ path: "charts", component: UiCharts },
{ path: "collapse", component: UiCollapse },
{ path: "dropdowns", component: UiDropdowns },
{ path: "editors", component: UiEditors },
{ path: "forms", component: UiForms },
{ path: "form-components", component: UiFormComponents },
{ path: "icons", component: UiIcons },
{ path: "input-groups", component: UiInputGroups },
{ path: "jumbotron", component: UiJumbotron },
{ path: "modal", component: UiModal },
{ path: "navigation", component: UiNavigation },
{ path: "popover-tooltip", component: UiPopoverTooltip },
{ path: "sortable", component: UiSortable },
]
}
]
},
{ path:"*",component: Error},
];
Hello. Found a problem. The registration page, if it has several fields anymore, does not scroll on mobile and small screens. For me, this is a problem … I do not know how to set the scrolling
Hi,
Sorry for the trouble, we have made a mistake.
Here is how to solve it.
src/App.vue file please change template tag with following
<template>
<div class="h-100">
<router-view/>
<color-switcher/>
</div>
</template>
<template>
<div id="root">
<div class="fixed-background" />
<main>
<div class="container">
<router-view/>
</div>
</main>
</div>
</template>
This should fix the problem.
Kind Regards.
Brilliantly. Thank you very much.
Can I ask a question, maybe off topic? I need to get to the $t(‘user.login’) from the store/modules/user.js (to make a notice) as it is done in the template of any component {{$t(‘user.login’)}}. Tell me please. If I call as in a template, it gives an error. Trying to get to a $t in many ways … no…
Hi,
If i am not sure if i understand you correctly but i will try to help.
You don’t need to access $t(‘user.login’) from store. I don’t think it is a very good practice. You may send id from store and use it on template.
You may find an example usage in src/components/Common/Breadcrumb.vue file around line 35.
Thank you very much! You really helped!
You are welcome 
Already wrote)))
Thank you, sorry about that
hello, i get some minor problem.
after ‘npm run dev’, i always get stuck in 69%, even though the template run smoothly. this is the screenshoot (https://drive.google.com/file/d/1SeBGTvNS3h0ezUXGpSLOmdgC1eXP6sGP/view?usp=sharing)
the problem occurs when i run it in windows 7 and linux 32 bit, but it disappears when using windows 10 64 bit
please could you help me to find the problem?
Hi,
I can not reproduce the error currently because we don’t have a linux or win7 machine at our disposal.
When i searched about the problem i found out that there are lots of github issues and stackoverflow questions about stucking somewhere for vue, angular and react but i could not find a solid solution. There are lots of different percentages. Most of them are outdated and some of them are even without a solution.
It looks like something about webpack but since there are no error messages, it can be about any webpack plugin or webpack itself. It could even be about node version.
I will try to find a win7 machine and try to replicate the error as soon as i can.
Kind regards.
Hello, dear developers. Found a problem with the collected styles. Webshtorm swears.
.ck.ck-toolbar { background: !important; }
trifle, but the red underscore is alarming.
and further maybe tell me I want to configure firebaseUi I have already broken my head, but it does not work because of a lack of experience. Not everything is good with English
Hello,
Thanks for the css error, we have missed that one.
For Firebase UI, we don’t have any experience either so we can not provide any help about it. We have included Firebase library only as a starting point.
Kind regards.
What you have already done is already a lot.
Hello, I have a issue.. I Like a Lot the template, but I bought the wrong version. I needed the html version alone. What can I do to avoid losing money in this version? Help me Please, I need Html alone version, not Vuejs
Hi,
We normally do not refund accidental purchases but yours seems sincere.
Please go ahead and send us a refund request, we will accept it. It is up to you to buy html version before or after the refund.
Regards.
Tell me please I need move folder dist to another path and rename it. in one place I will change the path, something will break and not work. then the css does not see, then the js is not connected. then DEV doesn’t work, then PROD
Hi,
I could not understand the problem here.
Do you want to change production output directory to something else?
Or are you taking contents from dist folder to somewhere else and just opening index.html in the browser without server?
Please inform us a little more about the problem.
Regards.
I’m sorry, I’m trying to act through a translator. I need to embed piaf in a finished project. This project already has an “assets” folder. I need the assembly to go not to this folder, but to some one with a different name. I’m trying to edit the contents of the .webpack folder, but this leads to errors.
Hi,
Now i got it but i am afraid it is not an easy task to do since there are lots of hardcoded paths for “assets” directory in the theme.
I assume you changed webpack part but javascript and css files are still calling resources from assets directory so this leads to error.
You will need to find usage of assets throughout the project and change them. Please take a look at the following image. There are 45 files you need to check. https://ibb.co/k0ZD10GIf you try to change every found result with “find and replace”, that will also cause errors since there are some usage in files that not really pointing the “assets” directory. For example: “optimize-css-assets-webpack-plugin” line in package.json contains “assets” but needs to stay as it is.
Regards.
Thank you very much. You helped me a lot and resolved my doubts.
You are welcome
one more question. I’m running npm run dev The build begins. The process is loaded slightly. When the build finishes and everything works, the node.exe process loads the system 100%. Everything sows and slows down. What can affect, please tell me. On simple vue projects, this was not
Hi,
Lots of things might be the cause of the problem but we are suspecting it’s source is Webpack.
Please locate this file src/.webpack/dev.js and change poll option under watchOptions to false
watchOptions: {
poll: false
}
Let us know about outcome please.
Regards.
Ps: You will need to stop current build and execute “npm run dev” again to see the effect.
You are a genius! Bravo! Thank you very much!
You are welcome
I guess we should set it false on our next update since same problem might occur for another user.
Ps: Sorry if this sounds insistent but please remember to drop a review. https://themeforest.net/downloads
in the end, everything works, but the processor is resting. Thanks you.
Hello. Bought your product. I downloaded the source. launched npm install result: ... npm WARN deprecated tsml@1.0.1: no longer maintained
> grpc@1.17.0 install C:\OpenServer\domains\piaf\node_modules\grpc > node-pre-gyp install—fallback-to-build—library=static_library
node-pre-gyp WARN Using request for node-pre-gyp https download [grpc] Success: “C:\OpenServer\domains\piaf\node_modules\grpc\src\node\extension_binary\node-v64-win32-x64-unknown\grpc_node.node” is installed via remote
> node-sass@4.11.0 install C:\OpenServer\domains\piaf\node_modules\node-sass > node scripts/install.js
Cached binary found at C:\Users\Коля\AppData\Roaming\npm-cache\node-sass\4.11.0\win32-x64-64_binding.node
> swiper@4.4.6 postinstall C:\OpenServer\domains\piaf\node_modules\swiper > node -e “console.log(’\u001b[35m\u001b[1mLove Swiper? Support Vladimir\’s work by donating or pledging on patreon:\u001b[22m\u001b[39m\n > \u001b[32mhttps://patreon.com/vladimirkharlampidi\u001b[0m\n')"
Love Swiper? Support Vladimir’s work by donating or pledging on patreon: > https://patreon.com/vladimirkharlampidi
> bootstrap-vue@2.0.0-rc.11 postinstall C:\OpenServer\domains\piaf\node_modules\bootstrap-vue > opencollective postinstall || exit 0
- Thank you for using bootstrap-vue!
Please consider donating to our open collective to help us maintain this package.
https://opencollective.com/bootstrap-vue/donate *> node-sass@4.11.0 postinstall C:\OpenServer\domains\piaf\node_modules\node-sass > node scripts/build.js
Binary found at C:\OpenServer\domains\piaf\node_modules\node-sass\vendor\win32-x64-64\binding.node Testing binary Binary is fine
> webpack-cli@3.2.1 postinstall C:\OpenServer\domains\piaf\node_modules\webpack-cli > lightercollective
- Thank you for using webpack-cli!
Please consider donating to our open collective to help us maintain this package.
https://opencollective.com/webpack/donate *npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN bootstrap@4.2.1 requires a peer of jquery@1.9.1 – 3 but none is installed. You must install peer dependencies yourself. npm WARN vue-piaf@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {os“} (current: {os“})
added 1235 packages in 88.471s
Folder node_modules appeared as usual.
launched npm run dev
C:\OpenServer\domains\piaf>npm run dev
> vue-piaf@1.0.0 dev C:\OpenServer\domains\piaf > webpack-dev-server—inline—history-api-fallback—progress—config src/.webpack/dev.js
10% building 1/1 modules 0 activeevents.js:167
throw er; // Unhandled 'error' event
^Error: listen EADDRINUSE 127.0.0.1:8080 at Server.setupListenHandle [as _listen2] (net.js:1330:14) at listenInCluster (net.js:1378:12) at GetAddrInfoReqWrap.doListen [as callback] (net.js:1491:7) at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:55:10) Emitted ‘error’ event at: at emitErrorNT (net.js:1357:8) at process._tickCallback (internal/process/next_tick.js:174:19) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue-piaf@1.0.0 dev: `webpack-dev-server—inline—history-api-fallback—progress—config src/.webpack/dev.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vue-piaf@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Коля\AppData\Roaming\npm-cache\_logs\2019-01-18T21_08_13_981Z-debug.log
C:\OpenServer\domains\piaf>
What should I do now? Nothing works.
How else can I contact you to solve the problem?
Hi,
Checking it now and we will get back to you soon.
Regards.
Hi,
This error is thrown when there is a problem with localhost or port number is used by some other app. Piaf uses port number 8080 and you may change it from scr/.webconfig/dev.js file. Changing it something like 3000 will probably fix your problem.
This is the variable:
const PORT = 8080
Regards.
Brilliantly! Thank you very much!
You are welcome:)
Ps: Please consider giving the theme a review whenever you have time. https://themeforest.net/downloads
Hi, It looks like a great work. Is it possible to see what a profile page looks like? Do your template could be used to create a kind of network? Thanks, Lau
Hi,
Thank you for your interest in our theme.
Details page is what we have most relevent to a profile page. http://piaf-vue.crealeaf.com/app/layouts/details
Our theme does not have built-in pages for a nework driven app but you may use components and widget to create those pages.
Kind Regards.
Okay! Thank you so much.
Congrats for your awesome theme .GLWS
Hello,
Thanks for the comment
Kind Regards.
Hi,
First of all it is really nice work you have done with this template, I am trying to install it on the my dev server, npm install >> npm run dev when I one the host:port url the page is just loading and I get in the console the errors below :
Contact.vue?./node_m…ue-loader-options:5 Uncaught (in promise) Error: Cannot find module ‘components/common/StateButton’
at webpackMissingModule (Contact.vue?./node_m…ue-loader-options:5)
at eval (Contact.vue?./node_m…ue-loader-options:5)
at Module../node_modules/babel-loader/lib/index.js?./src/pages/landingPages/Contact.vue?vue&type=script&lang=js& (main.7e3f.js:3826)
at webpack_require (main.7e3f.js:772)
at fn (main.7e3f.js:130)
at eval (VM8390 Contact.vue:2)
at Module../src/pages/landingPages/Contact.vue?vue&type=script&lang=js& (main.7e3f.js:16944)
at webpack_require (main.7e3f.js:772)
at fn (main.7e3f.js:130)
at eval (VM8390 Contact.vue:3)
webpackMissingModule @ Contact.vue?./node_m…ue-loader-options:5
(anonymous) @ Contact.vue?./node_m…ue-loader-options:5
./node_modules/babel-loader/lib/index.js?
./src/pages/landingPages/Contact.vue?vue&type=script&lang=js& @ main.7e3f.js:3826
webpack_require @ main.7e3f.js:772
fn @ main.7e3f.js:130
(anonymous) @ Contact.vue:2
./src/pages/landingPages/Contact.vue?vue&type=script&lang=js& @ main.7e3f.js:16944
webpack_require @ main.7e3f.js:772
fn @ main.7e3f.js:130
(anonymous) @ VM8390 Contact.vue:3
./src/pages/landingPages/Contact.vue @ main.7e3f.js:16932
webpack_require @ main.7e3f.js:772
fn @ main.7e3f.js:130
(anonymous) @ index.js:20
./src/router/index.js @ main.7e3f.js:17484
webpack_require @ main.7e3f.js:772
fn @ main.7e3f.js:130
(anonymous) @ main.js:4
./src/main.js @ main.7e3f.js:15336
webpack_require @ main.7e3f.js:772
fn @ main.7e3f.js:130
(anonymous) @ index.js:28
Promise.then (async)
render @ index.js:27
(anonymous) @ index.js:32
./src/index.js @ main.7e3f.js:15302
webpack_require @ main.7e3f.js:772
fn @ main.7e3f.js:130
(anonymous) @ client:3
0 @ main.7e3f.js:17579
webpack_require @ main.7e3f.js:772
(anonymous) @ main.7e3f.js:947
(anonymous)
sockjs.js:1605 GET http://dev.specttech.com:5000/sockjs-node/info?t=1547731688426 net::ERR_CONNECTION_REFUSED AbstractXHRObject._start @ sockjs.js:1605 (anonymous) @ sockjs.js:1494 setTimeout (async) AbstractXHRObject @ sockjs.js:1493 XHRCorsObject @ sockjs.js:2871 InfoAjax @ sockjs.js:356 InfoReceiver._getReceiver @ sockjs.js:539 InfoReceiver.doXhr @ sockjs.js:556 (anonymous) @ sockjs.js:525 setTimeout (async) InfoReceiver @ sockjs.js:524 SockJS @ sockjs.js:730 initSocket @ socket.js:9 (anonymous) @ client:206 (anonymous) @ client:249 ./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:5000 @ main.7e3f.js:11905 webpack_require @ main.7e3f.js:772 fn @ main.7e3f.js:130 (anonymous) @ client:1 0 @ main.7e3f.js:17579 webpack_require @ main.7e3f.js:772 (anonymous) @ main.7e3f.js:947 (anonymous)
Hi,
Would you check your file structure please. There is ’.babelrc’ file on root of the project folder, which start with a dot and they might be hidden and not copied.
Here is how structure should be: http://piaf-vue-docs.crealeaf.com/docs/getting-started/structure
Regards.
Hi,
I did check the files structure and .babelrc is on the root of the project, still having the same problem.
Kind Regards.
Failed to compile.
./src/pages/app/ui/Buttons.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref—1./src/pages/app/ui/Buttons.vue?vue&type=script&lang=js&)
Module not found: Error: Can’t resolve ‘components/common/StateButton’ in ’/app/Source/src/pages/app/ui’
Hi,
Sorry for the delay. We have tried to replicate the error on different machines and setups but had no luck.
I just noticed one thing on your first post where you have said ” I am trying to install it on the my dev server”. Are you on your local machine or trying to run it on something like vps?
Regards.
Hi again,
Sorry about the delay but i wanted to let you know that we have just found out that the problem you have experienced is about case sensitivity and it is Linux related. That is why we have not encountered it.
Here is the solution if you still have the problem.
Changing the first letters of “Sidebar” and “TopNav” with lowercase at “src/pages/app/index.vue”
import Sidebar from "containers/Sidebar";
import TopNav from "containers/TopNav";
to
import Sidebar from "containers/sidebar";
import TopNav from "containers/topNav";
import StateButton from "components/common/StateButton";
to
import StateButton from "components/Common/StateButton";
Cheers.
woooow your work is grateeeeeee
Hi,
Thank you for the comment
Hi, apart from colors, is there any difference than the other two?
Hi,
Piaf has a completely different codebase, it was built with Vuejs. We used React for one of our other item and JQuery for the other one.
Regards.
Great Work, Congratulations GLWS
Hi,
Thank you for the comment
Regards.
Congratulations! Nice Work, GLWS
Hi,
Thank you for the comment
Regards.
Congratulations! Nice Work, Good Luck With Sale 
Hi,
Thank you for the comment
Regards.
Congratulations!
Amazing Work, Good Luck With Sale
Hi,
Thank you for the comment
Regards.
Congratulations for excellent work and sales!
Hi,
Thank you for the comment
Regards.
