340 comments found.
Hi there, we love this template. It’s installed and runs beautifully. Do you have a recommendation to change your vertical bar chart to a stacked chart instead? Something like this, but one that follows your thematic guidelines.
https://www.chartjs.org/samples/latest/charts/bar/horizontal.htmlHi,
Thank you for your nice comments, I hope you keep enjoying to work with the template.
As for the question, here is a small guide how to do it:
Please locate “src/components/Charts/BarShadow.vue” file. This file extends default bar chart and creates a chart called BarShadow. You may copy this file to create yourself a HorizontalBarShadow.vue. You will need to change following lines from “bar” to “horizontalBar”.
Chart.defaults.bar //from this
Chart.defaults.horizontalBar //to this
Chart.controllers.bar //from this
Chart.controllers.horizontalBar //to this
And you may find all the configuration files if you check “src/components/Charts/config.js”. You may add following config and experiemnt with it.
export const horizontalBarChartOptions = {
legend: {
position: 'bottom',
labels: {
padding: 30,
usePointStyle: true,
fontSize: 12
}
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [
{
gridLines: {
display: false
}
}
],
xAxes: [
{
gridLines: {
display: true,
lineWidth: 1,
color: 'rgba(0,0,0,0.1)',
drawBorder: false
},
ticks: {
stepSize: 100,
min: -600,
max: 600,
padding: 20
}
}
]
},
tooltips: chartTooltip
}
When you initialize your HorizontalBarShadow.vue with this config and some negative and positive data, you will end up with something like this: https://ibb.co/FsnRr8y
Best.
Thank you very much!
You’re welcome:)
I congratulate you for the excellent work done.
Could you give me access to githubs, to see the changes that are made in the project?
Thank you
Hi,
Thank you for your kind works, I hope that you enjoy working with it.
We currently don’t provide Github access. There is a basic changelog here: https://gogo-react-docs.coloredstrategies.com/docs/gettingstarted/changelog
If you wish to see changes to update from v3 to v4, I don’t think seeing what have changed will help. We have made so many changes with the code and the structure so it is not quite possible to merge your current project to latest one.
Best.
Hi, I just got the theme and all was ok till I found 2 differences form the online versions:
1. the shadow of a dialog is all black 2. in the survey app the modal dose not appear in the right side of the screen but in center, this in one of the features I liked most and it’s not working
Please help me fix the above issues. Thanks.
Yes, you are right about it and we have just noticed it.
We will look into it and get back to you as soon as we can.
Cheers.
Hi,
The problem is about Vue Bootstrap.
To solve it, please change “bootstrap-vue”: “^2.0.0-rc.15”, to “bootstrap-vue”: “2.0.0-rc.15”. After making this change, delete the package-lock.json and node_modules and install modules again.
Removing ^ will allow installing the exact package and solve the problem.
We have also updated the zip file so you may download it again to solve the problem.
Cheers.
Hello can you raplce my template of VUE version to JQURY, PLEASE. A have trouble with integration of your VUE template to my VUE project. Its my first buy. I am beginner in VUE
Hi,
I don’t think jQuery version will do better since it is dependant to jQuery and it would not do good in a Vue project. If you tell the problem you are having in detail, we may try to help you or at least guide you.
That being said, we don’t have any authority to replace purchased items and neither do Envato.
Best.
Hi, i brouth your theme and after building with npm on Windows PC, the index file in the generated dist don’t run, its just loading forever
Hi,
If you have tried to open the index.html page directly from your file system, it would not load.
You will need a basic http server to serve dist build. Nginx, Apache, Node or IIS should do.
You may also use serve plugin for the purpose. Docs: https://github.com/zeit/serve
npm install -g serve
serve -s dist
Cheers.
Ok thanks. So, may you help me to install it in my yii2 project? Thanks in advance
I installed in apache (windows), its not working
- ./assets/css/sass/themes in ./dist/index.js
- ./assets/css/vendor/bootstrap.min.css in ./dist/index.js
- ./assets/css/vendor/dropzone.min.css in ./dist/index.js
Hi,
Have you created a distribution build? If not, please see “Production Build” of the docs at the bottom of the docs page: https://piaf-vue-docs.coloredstrategies.com/docs/getting-started/introduction
You will need to put content of the dist folder at your server.
If you have created the production build and it is not working, please let us know.
Yes, i have created a production build
Maybe problem is with the server installation.
You may use serve package to see dist build in action easily. Here is how to do it in project directory.
npm install -g serve
serve -s dist
Hi I would like to add your dashboard to my project. However once I have copied the files across and updated the paths in the vue.config.js file I get an npm error “These dependencies were not found: @/components/Common/Breadcrumb in ./resources/js/main.js”.
How may I resolve this. (I’ve only seen the @ syntax used for modules before a handful of times and I have found it hard to find any resource on how to configure this. IF you could provide any additional context it would be much appreciated. THANKYOU
Hi,
@ sign is an alias which comes with vue(or vue-cli setup I am not sure). It points to “src” directory and I guess instead of using it you may go ahead and use the real path. I must say it is not a practical usage since it will differ by used file. Eg: ”../../../src/components/Common/Breadcrumb”
If I understand it correctly, you are using the template with Laravel. No one in our team has any experience about this to guide you but I may suggest a medium article about it. You may find the same problem you are having at step 6 and solution at step 10: https://medium.com/@weehong/laravel-5-7-vue-vue-router-spa-5e07fd591981
Let us know if this does not help.
Cheers.
Dear author
Hi. I’m glad to find out your simple and clear design. I have a plan to develop an opensource web application.
Since I hope to use your design, I will buy it. However, I’m not clear whether I can open my source using your design. Is it possible ? Or do you have another price policy?
Have a good day. Thanks~
Hi,
Thank you for your interest in our template.
As for you question, Envato sells the items under two license and both of them does not allow the item to be distributed. So basically no item under Envato market can be included in an open source project.
Cheers.
I’m not able to get vue-slider work in ApplicationMenu component. It works when ApplicationMenu is statically open (e.g. large screens) but when it’s hidden and then shown it seems not to work. Any idea?
Hi,
We have found out the problem and created a workaround.
Hi,
We have found out the problem and created a workaround. Transition on the app menu causes slider to malfunction. Here you may see the problem at the slider docs: https://github.com/NightCatSama/vue-slider-component/tree/v2#exceptions
For the solution, we made a small update on application menu and on the it’s used with slider.
Here is the modification at src/components/Common/ApplicationMenu.vue file. We have updated “watch” function to emmit “show” event after transition complete(It completes in 300ms):
...
watch: {
isOpen (val) {
if (val) {
setTimeout(() => {
this.$emit('show')
}, 300)
this.addEvents()
} else {
this.removeEvents()
}
}
},
...
And this is the usage of the app menu with a slider(it’s ref should be slider for the below code) inside of it. It calls refresh on the slider upon show event.
<application-menu @show="()=>{this.$refs.slider.refresh()}">
...
</application-menu>
Let us know if you have any questions.
Cheers.
Yes, I was able to solve in a similar way, with a custom wrapper component and an eventbus, applicationmenu would trigger a “application-menu:toggle” event the custom component registers as listener. So I can confirm this would work as intended! Thanks!
That is nice, thanks for the confirmation.
Cheers.
Hi guys. piaf can support RTL?
Hi,
No, currently can not.
Cheers.
Hi, is it possible to use theme scss variables inside component’s style block? How can be achieved?
Hi,
Yes it is possible and used in the template. Here is a little guide:
1- You will need to attach the variable to root at “src/assets/css/sass/_piaf.style.scss” file
:root {
--theme-color-1: #{$theme-color-1};
--theme-color-2: #{$theme-color-2};
...
}
2- Get the variable from root and create a varible under a util at “src/utils/index.js”
export const ThemeColors = () => {
let rootStyle = getComputedStyle(document.body)
return {
themeColor1: rootStyle.getPropertyValue('--theme-color-1').trim(),
themeColor2: rootStyle.getPropertyValue('--theme-color-2').trim(),
...
}
}
3- Then access this const from utils and use it. You may find a usage example at “src/views/app/applications/SurveyDetail.vue” file
import { ThemeColors } from '@/utils'
const colors = ThemeColors()
colors.themeColor1 // This is the variable from scss
Cheers.
Good day,
Form validation with “Top Labels In Input” has some issues:
https://i.imgur.com/y59Nzvv.jpg1. <b-form-input> placeholder property is displayed only on input focus. 2. <b-form-invalid-feedback> is always displayed regardless of the state and hides on input focus. </b-form-invalid-feedback></b-form-input>
<label class="form-group has-top-label" for="website-name"> <span>Website Title:</span> <b-form-input id="website-name" type="text" v-model="name" :state="!validate" placeholder="Website" /> <b-form-invalid-feedback :state="!validate"> Error message goes here -form-invalid-feedback> </label> </b-form-invalid-feedback>
Is there a quick way to resolve this, so that inputs with Top labels behaved the same way as basic ones?
Also right modal is not working for me… =(
Hi,
Sorry for the late reply, we had the weekend off.
There is some extra css we have forgotten to remove, sorry about that. If you remove them you will have placeholders. Output will be something like this: https://ibb.co/QQHvKp7
This part should be removed: https://ibb.co/g9GSJyX
And here is the vue part, which I created by modifing validation part at Forms.vue page:
<b-row>
<b-colxx xxs="12">
<b-card class="mb-4" :title="$t('forms.validation')">
<b-form>
<b-row>
<b-colxx sm="6">
<label class="form-group has-top-label">
<input type="text" class="form-control" v-model="validateForm.firstname" :state="!$v.validateForm.firstname.$invalid" placeholder="Your name">
<span>{{ $t('forms.firstname') }}</span>
<b-form-invalid-feedback :state="!$v.validateForm.firstname.$invalid">{{ $t('forms.firstname-message')}}-form-invalid-feedback>
</label>
-colxx>
<b-colxx sm="6">
<label class="form-group has-top-label">
<input type="text" class="form-control" v-model="validateForm.city" :state="!$v.validateForm.city.$invalid" placeholder="Your city">
<span>{{ $t('forms.city') }}</span>
<b-form-invalid-feedback :state="!$v.validateForm.city.$invalid">{{ $t('forms.city-message')}}-form-invalid-feedback>
</label>
-colxx>
-row>
<b-button type="submit" variant="primary" class="mt-4" :disabled="$v.validateForm.$invalid">{{ $t('forms.submit') }}-button>
-form>
-card>
-colxx>
-row>
</b-button></b-form-invalid-feedback></b-colxx></b-form-invalid-feedback></b-colxx></b-row></b-form></b-card></b-colxx></b-row>
And for the right modal, something might be missing at your syntax. Please check the usage at modals page.
There is also another usage at Todo and Survey app “Add New” button.
Thank you very much for your feedback!
You are welcome, thank you for your patience.
Hello,
I would like to know how can I install this template in Laravel?
Hi,
Noone in our team has any experience with laravel so we can not offer any support regarding your issuse. Sorry about that.
Cheers.
How can I upgrade from V2 to 3? Please help me I need an urgent help 
41612975-3914-4fc2-82c8-44d13e9cddfb
Hi,
Just answered your email.
Hello,
First, wanted to say great template! Even as a beginner in Vue.js I found your template code well organized and easy to navigate.
I am currently having an issue with the v-select spinner. I searched the forum but didn’t find anyone else posting the same issue. Basically, when the spinner on v-select activates, I believe it is picking up the .spinner style from the piaf style sheet. I think the style class for the spinner on v-select is named the same as the template. This causes the spinner in v-select to display incorrectly. What is the best way to fix this issue?
Ciao!
Hi,
Thank you for the purchase and your kind words. I hope that you enjoy working on it.
As for the question, I checked and found out that v-select adds the spinner with “vs__spinner” class so the problem you are having might be related to something else.
It looks like v-select provides a way to include your own spinner with a template, you may try that way. Here is the doc page: https://vue-select.org/guide/ajax.html#loading-options-with-ajax
<template slot="spinner" slot-scope="spinner">
<div class="spinner-border text-primary" v-show="spinner" />
</template>
If using your own spinner class works for you, here is a sass code to make “spinner-border” work. It should be added in _piaf.style.scss file
@-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;
}
.v-select .spinner-border, .v-select .spinner-grow {
width: 1.4rem;
height: 1.4rem;
margin-top: 8px;
}
Let us know if this solves the problem.
Cheers.
in the current version of v-select they renamed the style (https://vue-select.org/guide/upgrading.html#misc). so, the current version (v3.1) of v-select is “vs__spinner” but the template comes with the previous version of v-select (v2.6.4) which still has ”.spinner”.
I tried updating the v-select to the current version but the style was broken due to the renaming for the classes used in v3 listed in the link in my first paragraph. The newest version of your template also uses v2 of vue-select.
I am using the vue-select like this: https://codepen.io/sagalbot/pen/POMeOX
Would it be possible to update the style for version 3 of vue-select?
You are right about that, I have not noticed it.
It seems that we have made our major update on March and they did theirs on April so we stayed a little bit behind.
I will try to update to the lates one with styles and all. Will notify you as soon as possible.
Cheers.
that would be great. Thank you! Ciao!
Hi,
We have updated Piaf to support latest version of Vue Select.
If you want to implement it to your current project, you will need to change _piaf.style.scss file and set version of vue-select to “^3.1.0”. You will also need to include css file of vue-select with “import ‘vue-select/dist/vue-select.css’”
You may check implementation from “FormComponents.vue” file. Online demo is also updated: https://piaf-vue.coloredstrategies.com/app/ui/form-components
And, sorry for the delay. We had to complete some work which we have started earlier.
Cheers.
No need to apologize. The support and turnaround time has been great! Thank you, Ciao!
Hello i ordered the Piaf template via Themeforrest – but i am missing parts, i dont have the mailing and invoice pages included in the template – could you send these to me please? thank you.
My download is: themeforest-23160320-piaf-vuejs-admin-dashboard.zip
Hi,
Please download the files again to get the updates including mailing and invoice.
Cheers.
Would this work with Laravel Spark?
Hi,
Sorry that nobody in our theme has any experince with Laravel. We can not provide a certain answer for that.
Cheers.
Hi!
Page “UI -> Form Components” has 2 problems: Switch and Slider.
https://piaf-vue.coloredstrategies.com/app/ui/form-components https://i.imgur.com/1AhgQSx.pngHi,
Thank you for letting us know, we will look into this and get back to you as fast as we can.
Cheers.
Hi,
Thank you for your patience, we have fixed the problems and published an update. Here you may check working version: https://piaf-vue.coloredstrategies.com/app/ui/form-components
Cheers.
Thank you!
Very cool theme, just exactly what I was looking for my project. Just wanted to ask if there any plans on further updates and more features?
Hi,
Our current version is quite stable, we will update bootstrap version once vue-bootstrap is ready. Then continue developing the theme further.
Cheers.
Hi, All previous issues have been resolved thanks.
Just a couple more questions. How may I activate/functionalize the following landing pages….
-1) search box on “docs” & “videos” pages -2) forms on “contact” page -3) Newsletter email box? -4) “auth-login” & “auth-register” pages
Hi,
That is all up to you. It would differ by project needs and your abilities. We would suggest creating your backend as a service and loading data async, as we used in list pages.
Cheers.
Was expecting this to be controlled by “config.js” as those login/signup those landing pages are linked to the admin dashboard. What role does the config file play here?
Config file is there for a prof of concept and to provide a starting point.
Cheers.
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!
