341 comments found.
Hi
Can’t get b-spinner show up anywhere or use theme .spinner class In particular I need to show spinner on the Tab title. Something in the theme disables it Below is the snippet http://snippi.com/s/g03it9n ( ” <template slot=”title”> {{item.name}} -spinner></template> <keep-alive></keep-alive>-tab>
“
Hi,
The problem occurs since surrent bootstrap version of the project is not the latest.
You may add following css styles to src/assets/css/sass/_piaf.style.scss file to make spinners work.
@-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.spinner-border {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
.spinner-border-sm {
width: 1rem;
height: 1rem;
border-width: 0.2em;
}
@-webkit-keyframes spinner-grow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
opacity: 1;
}
}
@keyframes spinner-grow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
opacity: 1;
}
}
.spinner-grow {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
background-color: currentColor;
border-radius: 50%;
opacity: 0;
-webkit-animation: spinner-grow .75s linear infinite;
animation: spinner-grow .75s linear infinite;
}
.spinner-grow-sm {
width: 1rem;
height: 1rem;
}
Awesome. That works. Thank you!
Howdy?
Still having issues creating working “router-link” buttons on <src/components/LandingPage/HeroHome.vue>
<router-link tag=”a” :to=”url” class=”btn btn-outline-semi-light btn-xl”> {{buttonText}} </router-link>
Adding additional buttons appear blank https://prnt.sc/nenwmu and still redirects to /auth-register
Also, already added the button text to the “hero” section in locales/en.json
Kindly assist.
Hi,
Sorry for the late reply. If you have not solved the problem yet, please check src/pages/landingPages/MultipageHome.vue file to see buttonText is a variable passed to HeroHome.vue component.
You may keep passing variables like this or use values from locale file directly via this syntax: {{$t(‘lp.hero.newbuttontext’)}}
Cheers.
Thanks for the insight. Should this syntax {{$t(‘lp.hero.newbuttontext’)}} be used in “MultipageHome.vue” or in “HeroHome.vue”
It may be used in both of them.
Hi,
Would you please provide a screen record or a screenshot of the problem since I am not sure I get the problem correctly.
Cheers.
in Piaf-Vue-Start project
Hi,
Thank you for pointing out the mistake. We have fixed the error and updated the item. Please download the item again to solve the problem.
Cheers.
<h1>{{ $t('menu.image-list') }}</h1>
<div class="float-sm-right">
<b-button v-b-modal.modalright="" variant="primary" size="lg" class="top-right-button">{{ $t('pages.add-new') }}-button>
but the css uses a 100% attribute i am not familiar with - how can i add a button to the right of the Add new and have them be on one line - without breaking the layout?
Thanks</b-button></div>
Hi,
You will need to remove “top-right-button” class which makes the button have a static width on large scenes and full width at smaller ones.
Here is an example:
<b-button variant="outline-primary" size="lg" class="mr-1 mb-1">NEW ONE-button>
<b-button v-b-modal.modalright="" variant="primary" size="lg" class="mr-1 mb-1">{{ $t('pages.add-new') }}-button>
</b-button></b-button>
I have bought the piaf-vuejs admin dashboard however it is not functional. I went through all the documentation and I am following the setup steps as documented however there are numerous issues when trying to get the test server up. Dependencies that cannot be resolved.
This is not on and I would like a fully functioning package or my money back
Purchase code: 6a7e38f7-5119-4748-82c8-9d87b93b022b
Hi,
Thank you for your purchase and sorry for the trouble.
The template builds and runs as expected but if you may share the error you are receiving we can try to help.
Cheers.
These dependencies were not found:
- core-js/modules/es6.array.find in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0./node_modules/cache-loader/dist/cjs.js??ref
./src/components/ChatApp/ConversationList.vue?vue&type=script&lang=js&, ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0 - core-js/modules/es6.array.sort in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0 - core-js/modules/es6.function.name in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-012-0-0-0 - core-js/modules/es6.number.constructor in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-012-0-0-0 - core-js/modules/es6.regexp.constructor in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0 - core-js/modules/es6.regexp.replace in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0 - core-js/modules/es6.regexp.search in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-012-0-0-0 - core-js/modules/es6.regexp.split in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-012-0-0-0 - core-js/modules/es6.regexp.to-string in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0 - core-js/modules/es6.string.includes in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-012-0-0-0 - core-js/modules/es7.array.includes in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-012-0-0-0 - core-js/modules/web.dom.iterable in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0
To install them, you can run: npm install—save core-js/modules/es6.array.find core-js/modules/es6.array.sort core-js/modules/es6.function.name core-js/modules/es6.number.constructor core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es7.array.includes core-js/modules/web.dom.iterable
I have run the above suggestion but get the following:
npm install—save core-js/modules/es6.array.find core-js/modules/es6.array.sort core-js/modules/es6.function.name core-js/modules/es6.number.constructor core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es7.array.includes core-js/modules/web.dom.iterable npm ERR! code ENOLOCAL npm ERR! Could not install from “core-js/modules/es6.array.find” as it does not contain a package.json file.
npm ERR! A complete log of this run can be found in: npm ERR! /home/gerhard/.npm/_logs/2019-04-10T19_05_59_123Z-debug.log gerhard [ ~/Development/Moxly/UI/Piaf-Vuejs-Admin-Dashboard-3.0.0/Source/Piaf-Vue ]$
I have attached the log above.
I have also tried installing core-js:
npm i core-js 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“})
+ core-js@3.0.1 added 1 package, updated 1 package and audited 25096 packages in 12.355s found 0 vulnerabilities
I’m on Linux.
installed version 2.6.5 of core-js as you suggested in previous post. working now
That is great, we should include it in our next update.
Cheers.
Thank you
I was download via elements.envato.com npm run serve I meet error below.
98% after emitting CopyPluginERROR Failed to compile with 6 errors 9:52:15 PMThese dependencies were not found:
- core-js/modules/es6.array.sort in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0 - core-js/modules/es6.regexp.to-string in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0
To install them, you can run: npm install—save core-js/modules/es6.array.sort core-js/modules/es6.regexp.to-string
Hi,
Please try this:
npm install core-js@^2.6.5
Also we don’t provide support for Elements purchases.
Cheers.
I cant see any UI component for tab. Is it missing?
Hi,
You may find it under cards title: https://piaf-vue.coloredstrategies.com/app/ui/cards
You may also see it in use at different places. Eg: Chat app contact list on the right side, details page on top of the page just under the title.
Cheers.
- core-js/modules/es6.array.find in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-00-0-12-012-0-0-0!./node_modules/vue-loader/lib??vue-l oader-options!./node_modules/vuetable-2/src/components/Vuetable.vue?vue&type=script&lang=js&, ./node_modules/cache-loader/dist/cjs.js??ref-12-0-0-012-0-0-0!./node_modules/vue-loader/lib?? vue-loader-options!./node_modules/vue-radial-progress/src/RadialProgressBar.vue?vue&type=script&lang=js&, ./node_modules/cache-loader/dist/cjs.js??ref—12-0 - core-js/modules/es6.regexp.constructor in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0!./node_modules/vue-loader/lib?? vue-loader-options!./src/components/Form/InputTag.vue?vue&type=script&lang=js& - core-js/modules/es6.regexp.replace in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0!./node_modules/vue-loader/lib??vue- loader-options!./node_modules/vuetable-2/src/components/Vuetable.vue?vue&type=script&lang=js&, ./src/utils/index.js - core-js/modules/es6.regexp.search in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0!./node_modules/vue-loader/lib??vue-l oader-options!./src/containers/TopNav.vue?vue&type=script&lang=js&, ./node_modules/cache-loader/dist/cjs.js??ref-12-0-0-0!./node_ modules/vue-loader/lib??vue-loader-options!./src/views/app/pages/DataList.vue?vue&type=script&lang=js& and 2 others - core-js/modules/es6.regexp.split in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-012-0-0-0 - core-js/modules/es6.regexp.to-string in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0 - core-js/modules/es6.string.includes in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-012-0-0-0 - core-js/modules/es7.array.includes in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-012-0-0-0 - core-js/modules/web.dom.iterable in ./node_modules/cache-loader/dist/cjs.js??ref-
12-0-0-0
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 50 errors 13:07:34These dependencies were not found:Hi,
Sorry for the trouble, we can not replicate it but we will try to solve it.
Would you provide your environment details so we try to replicate the error? We need your OS, npm and node versions. Also your version of Piaf may help.
Cheers.
Thanks for the reply:
OS: macOS Mojave 10.14.4
NPM: v6.5.0
Node: v8.11.1
I solved the problem launch the command: “npm install core-js@^2.6.5”
That is great, thank you letting us know.
We have not managed to replicate the problem yet but we will investigate the problem and add the package you mentioned to the project.
Cheers.
Good day! Bought and using this product in project. It’s so great!!!
Can you provide a source code of sample pages (demo pages) if possible for better understanding how things are designed / coded?
Hi,
Sorry I am not sure what do you mean by sample pages. They should be all in the zip file. Maybe you have looked into the Piaf-Vue-Start project only? All the pages at the demo are included in the “Piaf-Vue” project.
Cheers.
I want to ask about sizing options. Some themes like https://hencework.com/theme/brunette/sizing.html allows you to create cards (divs) in a specific size not with percentage, so like creating 100×100 boxes. Is such an option to this theme?
Hi,
We only used Bootstrap sizing principles(percent) and our theme does not provide a way to set static sizes.
Cheers.
Hi, please can you send me the jquery version ? Thanks !
Hi,
jQuery version is a separate item and you may find it here: https://themeforest.net/item/dore-jquery-bootstrap-4-admin-dashboard/22604108
If you have not downloaded Piaf and think that it was a mistake, you may start a refund request.
Cheers.
Hi What happened to Landing Page app in Piaf-Vuejs? I saw it at first version but now i cant. Regards
Hi,
Please reach us from the contact form at our profile page: https://themeforest.net/user/coloredstrategies
Cheers.
Hello there! I recently purchased your theme as I saw from a comment that it was compatible with nuxt. Do you have any instructions on how to use this theme with nuxt.js?
Hi,
Thank you for the purchase.
As for the nuxt issue, we can not provide a decent help about it since no one in our theme has a decent experience with it.
Best.
A disappointing project！！Do not like your code style!!!!!!
Hi,
What do you mean with code style, if you may provide some details we can check and fix any problems with the code.
Cheers
In the bootstrap pagination component, you pass HTML through properties which are escaped. you can pass the icons HTML with slots.
Hi,
Thank you for taking your time to write us about this problem. We have recently encountered the problem with latest version of node and worked on that for quite some time to figure out the problem.
This was the solution we had:
<b-pagination-nav>
<template v-slot:next-text>
<i class="simple-icon-arrow-right" />
</template>
<template v-slot:prev-text>
<i class="simple-icon-arrow-left" />
</template>
<template v-slot:first-text>
<i class="simple-icon-control-start" />
</template>
<template v-slot:last-text>
<i class="simple-icon-control-end" />
</template>
-pagination-nav>
</b-pagination-nav>
Cheers.
It’s similar to how I have solved it. In addition, I have a few more suggestions, can I contact you by mail?
You may reach us from the contact form at our profile page. https://themeforest.net/user/coloredstrategies
Hi, i want to ask question, how i could make the sidebar menu with no submenu open the page in full width, need help because my page is shown just like i click the sub menu
Hi,
To achive this you need to change menu type. This can be done by changing defaultMenuType variable at src/constants/config.js ‘menu-sub-hidden’.
You may aslo check documentation for a little bit extra info here: https://piaf-vue-docs.coloredstrategies.com/docs/appearance/menu
Cheers.
thanks for support, really help
You’re welcome and glad that you are happy with the theme. Hope you may consider giving a review.
Cheers.
Hello, I want to convert the template to use with laravel, but I have problems. can you help me? Thank you
Hi,
I am sorry but no one in our team have any experience with Laravel.
Please let us know if you require assistance for any other problem.
Cheers.
Thanks for the great template. It has given the development of my application a head start. Can you please give an example of an implementation of POST-ing data to a REST endpoint? For example, a todo-item post to the API? Thanks!
Hi,
Thank you for your kind words and we hope that you keep enjoying it.
As for the question, yes there is not a post request in the template but you may find a get example in “loadItems” method at “src/pages/app/layout/DataList.vue” file. Post receives a second parameter for variables to be sent. Here is the syntax:
axios.post(apiUrl, {
parameter1: "value1",
parameter2: "value2",
})
.then(response => {
//got the response
})
.catch(e => {
console.log(e);
})
You might want to check Github pages for axios if you will need to send headers or for some other advanced concept. https://github.com/axios/axios
Cheers.
Hi, I am wonderding if there will be a security compromise to have login information saved in the local storage as implemented in the user.js file? what’s your recommendation?
login({ commit }, payload) {
commit("clearError");
commit("setProcessing", true);
firebase
.auth()
.signInWithEmailAndPassword(payload.email, payload.password)
.then(
user => {
const item = { uid: user.user.uid, ...currentUser };
localStorage.setItem("user", JSON.stringify(item));
commit("setUser", { uid: user.user.uid, ...currentUser });
},
err => {
localStorage.removeItem("user")
commit("setError", err.message);
}
);Hi,
I don’t think it is okay to say this approach is safe, it is just for a demo purpose. Keeping a value at a user computer with local storage or cookie is okay but the value should be unique, temporary and verifiable.
You may need to verify the value with your own implementation or with a library like jwt. We will also include jwt with our next releases.
Cheers.
Great theme!. But, In pagination, this code is appearing instead of navigation icons. Also, can you please send landing page templates.
Hi,
Please reach us from the contact form at our profile page. https://themeforest.net/user/coloredstrategies Cheers.
