adding image to the header

[Docrom]

Hello there, I'm new to Vue.js so I'm struggling a bit with a simple thing, I would like to add a logo next to the title in the header, I've tried a lot of things but I keep getting errors.

Do you have a tuto or an example to show me so I can understand how it works please ? Or maybe it is already implemeted in the config file and I missed it ?

Thank you for your help !

Regards,
Docrom.

[Lissy93]

Hey @Docrom, this is a really good idea! Nope, it's not already available, but it should be.

So first off you'd add a new attribute to your conf.yml file, I would probably put it under pageInfo, but that's up to you.

And then, I think the best place to implement it would be next to the page title, in PageTitle.vue, since that's where it would be displayed.
You could add a logo prop to that component, with:

export default {
  name: 'PageTitle',
  props: {
    title: String,
    description: String,
+   logo: String,
  },
};

Then you can use that prop within the component. Note the v-if, which means this component will only be rendered if a logo image attribute is available.

<img v-if="logo" :src="logo" class="my-logo" />

Now all you need to do is to pass that logo prop to the PageTitle component within Header.vue. Since you've added the data to pageInfo, you can just to something like this:

<PageTitle
  v-if="titleVisible"
  :title="pageInfo.title"
  :description="pageInfo.description"
+ :logo="pageInfo.logo"
/>

If you were to submit this as a PR, you'd also need to add your new attribute into the schema (ConfigSchema.json), so that the validator doesn't fail, and probably into the docs too (configuring.md) so that people know how to use it

This would be a really good task for a first PR, if you'd like to add it. Or I can implement it now, as it will be pretty quick, and I think it's a really good idea of yours :)

[Lissy93]

Implemented in PR: #105 😄

Once it's merged, which I will do when the build finished, then you can update (to version 1.4.5), and use it.
Then you just need to add a logo attribute under pageInfo. This should be the path to your image, either local (if it's stored in ./public), or remote as the URL to anywhere if it's on a CDN.

In my dashboard, it looks like this

Hope this helps :)

[Lissy93]

#105 is merged 🔀

[Docrom]

Wow, I didn't think I would get such a clear explanation this quick and even more with a Dashy update !

Thank you very much for that, can't wait to use it tomorrow 🙂

Keep up with the good work, your app is really cool and easy to use !

Have a good evening,
Docrom.

[Lissy93]

No problem :) I'm just glad that someone is using it, I never expected that!
Feel free to let me know if you've got any other ideas :)