chuang
Posts: 5
Joined: Tue Feb 20, 2024 1:58 am

Custom Component in Vue?

Is there a straightforward way to use a vue component as a custom component in the dashboard. Currently I'm creating a new vue instance and mounting it to the DOM that highcharts provides. This causes some inconsistencies with the main vue instance for my app, like not sharing certain global libraries or settings. I was just wondering if there was a better way currently?

Thanks!
User avatar
dawid.d
Site Moderator
Posts: 990
Joined: Thu Oct 06, 2022 11:31 am

Re: Custom Component in Vue?

Hello,

Thanks for contacting us with your question!

Below I have prepared a solution for you on how to implement a custom component in Dashboards in Vue 3.

Demo: https://stackblitz.com/edit/dashboards- ... mponent.ts

Is this what you expected or does it not solve your DOM problems?
Best regards
Dawid Draguła
Highcharts Developer
chuang
Posts: 5
Joined: Tue Feb 20, 2024 1:58 am

Re: Custom Component in Vue?

Thanks for your example! I was probably being unclear, but I was wondering instead of attaching an HTML module, i can directly attach a vue component. For example like importing 'MyCustomComponent.vue' and then passing it to highcharts to use as a custom dashboard component.
User avatar
dawid.d
Site Moderator
Posts: 990
Joined: Thu Oct 06, 2022 11:31 am

Re: Custom Component in Vue?

Hi again,

Unfortunately, we do not have such a pipeline for this. You can try writing your own wrapper on a custom layout, but for now all component injection goes through ID.

See: https://stackblitz.com/edit/dashboards- ... hboard.vue

If you want, you can write a feature request for it: https://github.com/highcharts/highchart ... new/choose

Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Dashboards”