341 comments found.
To test the Piaf Vue Admin Theme in production, I ran “npm run build”, and moved the dist-folder to my local web server which is Nginx. I was surprised to find out, that neither the language select nor the dark mode switch are working correctly. It seems to me that the page reload, which is activated when using those, is not working as it should – I get a “404 – Not Found” error.
Anyway, I am not such a fan of the page reload on a SPA, do you have any plans to change this in a future release?
You are right about the page change and it could have been implemented to work without reload but our priority was to provide smaller file size for css. We will create a better solution for our future updates but I can’t say that it will be available soon though.
I think getting 404 isn’t directly related to theme change. It should also happen when you just reload the page so this might be the issue with url rewriting. You should redirect all the urls to index.html page and you may find how to do it with a quick search.
This is out of our support scope but below is our file content from sites-available directory. Might be helpful.
server {
listen 80;
root /var/www/html/sub.test.com;
index index.html index.htm index.nginx-debian.html;
server_name sub.test.com www.sub.test.com;
location / {
try_files $uri $uri/ /index.html?$args;
}
}
Cheers.
Hi, I have stumbled upon another problem. If I set my defaultMenuType = ‘menu-sub-hidden’; in constants/config.js, Side bar stops toggling with the stacked icon. I have tried changing in menu.js to selectedMenuHasSubItems: defaultMenuType === ‘menu-sub-hidden’
but no luck. Any fix?
Also, I am using the previous version of Piaf, any guide how can I implement the upgrades in my current project?
Thanks!
Hi,
In the new version, you can take the “Sidebar.vue” file in the “src/containers/navs/” directory and replace it with “Sidebar.vue” in your current project. All you have to do is edit the “constants/config” and “constants/menu” paths.
All the best.
Any upgradation guide?
Hi,
Unfortunately we can’t provide a decent guide for the updates. When we make updates, we work with the same files as the user and sometimes a small fix effects multiple files. Sincee both parties are working on an implementation rather than a library, it’s quite a work to update and we really don’t recommend it.
I hope that this is acceptable for you.
All the best.
Hello, When there is no sub child menu items are there, the menu is not toggling in mobile views. when we set default-menu as menu-type.
Kindly please help me with this.Hi,
Do you also see the error on our preview? Here is the page with no sub items: https://piaf-vue.coloredstrategies.com/app/blank-page
If I remember correctly, we have fixed a similar problem sometime ago. If the problem is not your end; it would be also helpful to know your Piaf version, your menu structure and the os&browser.
Hi, I am trying to use your small-line-chart-card component in my dashboard.
I was successful to manipulate the chart with my API data which I passed in the component through computed property.
However, there are 4 small-line-chart-card component I am trying to use in the dashboard, but all of small-line-chart-card components show same data even if I am using 4 different computed property for each.
example code below:
<small-line-chart-card class="dashboard-small-chart-analytics" :data="referralChartData" />
<small-line-chart-card class="dashboard-small-chart-analytics" :data="noshowChartData" />
computed: {
referralChartData() {
let data = smallLineChartStyle;
data['labels'] = this.dashboardData.attributes.referral.labels;
data['datasets'][0]['label'] = this.dashboardData.attributes.referral.label;
data['datasets'][0]['data'] = this.dashboardData.attributes.referral.data;
return data;
},
noshowChartData() {
let data = smallLineChartStyle;
data['labels'] = this.dashboardData.attributes.noshow.labels;
data['datasets'][0]['label'] = this.dashboardData.attributes.noshow.label;
data['datasets'][0]['data'] = this.dashboardData.attributes.noshow.data;
return data;
}
},
finally, the smallLineChartStyle is modified based on your smallLineChartData in chart.js
But both of the chart shows only no show data.
https://pasteboard.co/J2sfFz0.png
Help would be appreciated.
Thanks!
Hi,
First thing I noticed that “smallLineChartStyle” variable gets overriden and all charts have eventually same data. To prevent it, creating an initial value for dataset0 and using this value while apending chart data should do the trick. Below is an example.
// --- initial dataset[0] --//
import { ThemeColors } from '../../utils'
const colors = ThemeColors()
const initialDataset = {
label: '',
data: [],
borderColor: colors.themeColor1,
pointBorderColor: colors.themeColor1,
pointHoverBackgroundColor: colors.themeColor1,
pointHoverBorderColor: colors.themeColor1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 2,
fill: false,
borderWidth: 2,
datalabels: {
align: 'end',
anchor: 'end'
}
}
//--- computed :
//...
referralChartData() {
const dataset = { ...initialDataset };
dataset.label = this.dashboardData.attributes.referral.label;
dataset.data = this.dashboardData.attributes.referral.data;
return {
labels: this.dashboardData.attributes.referral.labels,
datasets: [dataset],
};
},
noshowChartData() {
const dataset = { ...initialDataset };
dataset.label = this.dashboardData.attributes.noshow.label;
dataset.data = this.dashboardData.attributes.noshow.data;
return {
labels: this.dashboardData.attributes.noshow.labels,
datasets: [dataset],
};
}
//...
//--- computed end
If your data gets loaded at mount, creating a container div for chart and checking v-if=”loaded===true” might be safer.
Hi, Please assist me to change default or selected to the last line in the SmallLineChart.
Take a look at the file in the link below: https://drive.google.com/open?id=1eWtz3uhWWZ6b9Qdtz3WUDl6XZq7IfNPCThanks
Hi,
Please change below part at “src/components/charts/SmallLine.js” file.
plugins={[
{
afterInit: function(chart, options) {
var yLabel = chart.data.datasets[0].data[chart.data.datasets[0].data.length-1];
var xLabel = chart.data.labels[chart.data.labels.length-1];
var label = chart.data.datasets[0].label;
changeState("$" + addCommas(yLabel), label + "-" + xLabel);
}
}
]}
Do you have guide for upgrade? Version 4.0.3 to Version 5.0.0 looks so much work. Not easy upgrade.
Cheers, Ian
Never mind, I figured out.
You created js components, that’s nice. Would be nice if you separate scss files too.
Hi,
As for your first question, it is not an easy job to upgrade as you have said. Since both parties work on the same project,conflicts are quite certain so we never encourage the update.
As for the scss files, it’s on our list to separete files.
All the best.
Hello! I would like to know how to run the project using node express. Because the server where I host only runs if using express. I tried something here that worked, however, partially because it doesn’t seem to run main.js and this is a big problem, because it contains the language settings.
FILE PACKAGE.JSON
"scripts": {
"start": "node ./src/server",
"postinstall": "npm run build",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},FILE SERVER.JS
const express = require(“express”); const path = require(“path”); const history = require(‘connect-history-api-fallback’); const app = express();
const configs = { caminho: “dist”, forcarHTTPS: false, port: process.env.PORT || 3000 }
if (configs.forcarHTTPS) { app.use((req, res, next) => { if (req.headers[“x-forwarded-proto”] == “http”) { res.redirect(`https://${req.headers.host}${req.url}`); //Redireciona pra HTTPS } else{ next(); } }); }
const staticFileMiddleware = express.static(configs.caminho); app.use(staticFileMiddleware); app.use(history({ disableDotRule: true, verbose: true })); app.use(staticFileMiddleware);
app.listen(configs.port, () => { console.log(`Escutando na ${configs.port}!`); });
Hi,
Nobody in our team has any expericen with express but here is a small reminder. You don’t need to build or run the application at the server. Building it on your local machine and deploying it to a basic server should be the way.
Can I use another api for the theme?
Hi,
If you are referring to auth as api, currently there is not any built-in implementation other than Firebase.
Hello,
I have a couple of small issues I’m trying to solve and thought I would reach out.
One is the dark mode switch input which is offset to the right of visible vue-switch and therefor triggers the switch when I’m clicking to the right of the switch. Do you know how I could fix this so the clickable area is only the vue-switch itself?
Also, my application does not need the sub menu in the Sidebar so I want to remove the notion of submenu. The main page is offset to the right to account for the submenu being present and the menu button goes will shift the main view as if there is a submenu. How can I remove all notion of submenu from the template so that the main view is not shifted over?
I may have some more questions in the future as I learn to modify the dashboard.
Thank you for your help!
I figured out how to remove the side menu but I still don’t know why the vue-switch has an offset input element inside of it.
Hi,
Sorry for our late reply, it’s a bit difficult to focus on work these days.
It’s nice to hear that you figured out the menu problem. We have some explanations in our docs if you like to take a look at: https://piaf-vue-docs.coloredstrategies.com/docs/codebase/routing
As for the switch problem, hidden input tag seems unpositioned and adding below lines to _piaf.style.scss file should fix the issue. As far as I see, it does not break anything. Let us know if you have any problems.
.vue-switcher input {
left: 0;
}
Have a good one.
My skype id live:getany1991 please contact me.
Hi,
You may type your problem here in the comments section, we don’t provide support via skype or any other channel.
Hi Are you here? I have a problem on your template.
Hi,
You may type your problem here in the comments section, we don’t provide support via skype or any other channel.
I am using as described in the docs at BootstrapVue, and which is demonstrated in your Piaf – Vuejs Admin Template:
{{ $t(‘menu.introduction’) }}-nav-item> {{ $t(‘menu.profile’) }}-nav-item> -nav>
But, I would like another styling.
I really like your Piaf – Vuejs Admin Template, and I try to keep the clean, intuitive and user friendly design, as my project evolves.
For that reason, I have decided on the styling I want for my nav-pills:
To be more obvious and visible to the user, I need them to look like Outline Buttons – Dark:
{{ $t(‘button.dark’) }}-button>
They should, however, match the color of the menu items, and when hovered over or selected, the default theme color should fill up the pill.
How can I accomplish this?
Note: I am not very familiar with styling, css and sass – that is why I bought the template in the first place.
Sorry, the code that I pasted in the comment did not appear right. Never mind, I am just talking about nav-pills and how to style them as outline buttons. I am sure you can check out the code and the related styling.
In short, I want nav-pills looking like outline buttons, styled and behaving like the regular menu items.
Hi,
If I understand it correctly, you may accomplish by adding “link-classes” property to b-nav-items.
<b-nav-item active="" link-classes="btn btn-outline-secondary">
</b-nav-item>
Here is the complete block.
<b-nav pills="">
<b-nav-item active="" link-classes="btn btn-outline-secondary">...-nav-item>
<b-nav-item link-classes="btn btn-outline-secondary">...-nav-item>
<b-nav-item link-classes="btn btn-outline-secondary">...-nav-item>
-nav>
</b-nav-item></b-nav-item></b-nav-item></b-nav>
Posting tags in the comments has some problems but it looks normal in the email.
Cheers.
Wow, that was pretty cool – thank you!
“Link-classes” does it do exactly what it sounds like? In this case, link a class from a button element to nav-pills element?
Anyway, the solution was just about what I wanted, but not a 100%. So, I am afraid, I need to ask you again. And, this time it will not be that easy – this is probably custom:
I like the look of the nav-pills using the link-classes=”btn btn-outline-primary” But I do not think it is consistent with the main menu items.
For that reason, I would like the inactive nav-pills using the link-classes=”btn btn-outline-primary” to have the same color as the inactive main menu items. The rest is perfectly fine!
Can this unusual request be satisfied?
I will be using nav-pills instead of sub items in the main menu. For my application, I think it is a lot cleaner and convenient for my users.
I am looking forward, and I do thank you!Hi,
I have just realised your intention for using b-nav inside sub-menu. If I understand it correctly you want it for the styles.
Changing the code for sub menu with nav would require lots of work and customisation and I am not sure how much of this you have implemented. You may achive it by adding below lines at the end of src/assets/css/sass/_piaf.style.scss file.
Here is the output: https://ibb.co/zSzSHYs
.sidebar .sub-menu ul li.active:after {
display: none;
}
.sidebar .sub-menu ul li {
margin-right: 20px;
margin-left: 20px;
a {
padding-left: 10px;
border: 1px solid $separator-color;
border-radius: 50px;
}
}
.sidebar .sub-menu ul li.active:not(.has-sub-item) a {
border: 1px solid $theme-color-1;
}
As for the “link-classes” part, I think it is more like classes of link(anchor tags). There are some other usage like “header-classes” and so on.
Hi, we wanna use this theme for a startup website, is this licence is enough?
Hi,
The distinction between regular and extended license is mostly about the nature of the startup. If the end users are charged, then you may need the extended license.
Here is the license type comparison chart: https://themeforest.net/licenses/standard
Cheers.
Hello!
The icons are from https://iconsmind.com/?
If so, is it possible to insert file icons?
Example, XML, CSV.
Hi,
You may use “src\assets\fonts\iconsmind” which should contain the icons you have mentioned. As a side not, you may also need to change current icons of the menu since naming of this file is different than the current one.
All the best.
I included this link in the index.html
<link rel="stylesheet" href="/assets/fonts/iconsmind/style.css">
Placing the iconsmind-File-Excel class worked.
It would be nice if you had these icons on your template website as a reference
https://piaf-vue.coloredstrategies.com/app/ui/components/iconsThank you!
Here is a little bit of code to list the icons from the bigger package. You may also save the file at the iconsmind folder and use locally. https://piaf-vue.coloredstrategies.com/assets/fonts/iconsmind/demo.html
Very good.
thanks!!
Hi, I’m programmer from Poland and I have a questions about Piaf for jQuery. What’s mean Regular License per 6 months… I need this dashboard to my website with code to modify pages, libraries etc. I want to use it with ASP.NET website with jQuery. Do I have to pay regularly every 6 months or will I pay once for a given version forever? What difference between Regular, Extended license?
Hi,
Thank you for your interest in our templates, we appreciate it.
As for your question, you may choose jquery only version if you will not use Vuejs. Here is the jquery version: https://themeforest.net/item/dore-jquery-bootstrap-4-admin-dashboard/22604108
You will have the item and rights to download updates as far as the item is available for sale at Themeforest. 6 months is the time for the support that we provide, which you may consider renewing after the period ends but is not something mandatory.
You may find license types here: https://themeforest.net/licenses/standard
All the best
Thank you 
when AuthRequired.js is not used or bypassed in code topNav bar doesn’t show up. How to goto dashboard without authentication
Hi,
You are right about this problem, we have missed it.
To solve the problem, there are a few fixes need to be implemented.
- src/constants/config.js
Set “isDemo” to true.
1. Add “isDemo” import.
import { currentUser, isDemo } from '../../constants/config'
2. Change below lines where “currentUser” is set.
export default {
state: {
currentUser: isDemo? currentUser : (localStorage.getItem('user') != null ? JSON.parse(localStorage.getItem('user')) : null),
...
}
...
}
Cheers.
Hi there,
given this example URL: http://localhost:8080/app/MyView/99 which is used to edit an object via a form. Is there a way to have a breadcrumb link point to “MyView” (which is the overview page) without showing menu.99 as the last item? Desired Result: Home | MyView (both clickable links)
This is what I did in the Breadcrump.vue: rawPaths.push(“blank”); rawPaths.map((sub, index) => { if (!isNaN(parseInt(sub))) { return; } rawPaths.map((sub, index) => { if (!isNaN(parseInt(sub))) { return; }... and then in the locales json I translated “blank” to ”” to hide the number.
I believe there must be a more elgant way. Thank you.
Hi,
If I understand it correctly, you don’t want current page on the breadcrumb and all the other links should be working. Like in this ss: https://i.ibb.co/YW7xcCc/vue-breadcrumb.jpg
You may achieve it by removing last item from rawPaths and providing breadcrumb items manually instead of sending them to breadcrumb directly.
<b-breadcrumb>
<b-breadcrumb-item v-bind:to="item.to" v-for="(item, index) in items" v-bind:item="item" v-bind:key="index">{{item.text}}-breadcrumb-item>
-breadcrumb>
mounted () {
let path = this.$route.path.substr(1)
let rawPaths = path.split('/')
rawPaths.splice(-1,1) // removing last item from rawPaths
...
}
</b-breadcrumb-item></b-breadcrumb>
Let us know if this is not the case.
Cheers.
Closing tags for b-breadcrumb and b-breadcrumb-item are not rendered corretly here because of the comment section rendering. Email notifications don’t have this problem, so copying the code from the email should be better.
Perfect. Thanks a lot for the quick reply!
When any component render on page, carousel will shake. My each page have carousel, it looks so bad. Can’t figure out what’s the issue.
Thanks, Ian
Hi Ian,
You are right about the shaky thing. As you may notice, there are two of them. First one occurs when scrollbar is became visible or when the window resized. I believe there is not much to do about it since there are other parts of the template changes their size upon resize and carousel needs to adapt. It also happens when there is no resize but upon the scrollbar addition to the window. The scrollbar becomes visible after the carousels are added to the page so carousels need to resize themself.
Second one seems more disturbing to me, looks like a flickering without any reason. We have figured out how to solve it while working on the Angular version recently.
You may get rid of it by updating “src/components/Carousel/Glide.Component.vue” file. You may find updated version of data and methods below.
You may see the below code implementation(without second shake) here: https://old-piaf-vue.coloredstrategies.com/app/ui/components/carousel
data() {
return {
total: 0,
mountTimeOut: -1,
resizeTimeOut: -1,
selfWidth: 0
}
},
methods: {
initGlide() {
this.selfWidth = this.$el.offsetWidth;
this.glideCarousel = new Glide(this.$refs.carouselImages, {
...this.settings,
direction: getDirection().direction
});
this.glideCarousel.mount();
this.total = this.glideCarousel._c.Html.slides.length;
this.glideCarousel.on("resize", this.onResize);
this.mountTimeOut = setTimeout(() => {
var event = document.createEvent("HTMLEvents");
event.initEvent("resize", false, false);
window.dispatchEvent(event);
}, 500);
},
destroyGlide() {
clearTimeout(this.resizeTimeOut);
clearTimeout(this.mountTimeOut);
if (this.glideCarousel) {
this.glideCarousel.destroy();
}
},
onResize() {
clearTimeout(this.resizeTimeOut);
this.selfWidth = this.$el.offsetWidth;
this.resizeTimeOut = setTimeout(() => {
if (this.$el.offsetWidth !== this.selfWidth) {
this.glideCarousel.update();
}
this.resizeTimeOut = -1;
}, 500);
}
}
All the best.
Hey, I’m new to vuejs, and I understand it’s basics. I know how to use firebase with it. How best do you expect me to read from firebase database using your template, please if possible share with me a sample of code which used the template already.
Hi,
We have used firebase only for the login part and unfortunately there is no example of reading data from it currently.
It’s not directly for Vue but you may look into the examples and guides at firebase docs, they are quite good.
https://firebase.google.com/docs/database/web/read-and-writeAll the best.
Is there a bug in Piaf? I notice I have to click twice on the 2nd level menu items before the component loads up. Please try this out.
Hi,
The menu had some problems earlier but I don’t think we would miss such a crucial bug. Can you see the problem at the preview: https://piaf-vue.coloredstrategies.com/
Yes, it happens at that preview, ok my iPad (where I originally observed.) I just noticed however that on an Android phone, each click of a 2nd level menu item collapses the entire menu opening the new component correctly. Because the ipad real estate is bigger, the menu doesn’t collapse
Correction: menu collapses on the ipad as well but only after the 2nd tap as explained. Arghhhhh! I hate such quirks, can’t a template work property on all devices?
The menu is a bit complicated since it auto resizes for 3 different resolutions. We have tested with different browsers and phones but it looks like we have missed the one with the iPad.
We will look into into and get back to you as soon as we can. Thanks for letting us know.
