Vue 3 compatibility

[Sadga]

Hello, i tried using the module with vue 3 but it doesn't seem to work, i am on the latest version (1.3.5 from npm), tried both local and global registration but with the same result.

Is there anything i can do or do i need to wait for a compatible version of the module?

Kind regards.

[Sadga]

Hi, i "solved" the problem using the standard version of Highcharts imported from the html files.

[Denyllon]

Hello @Sadga ,

Thank you for reporting the problem. For now, the wrapper is intended to use with Vue v2.x, and I'm not able to specify any ETA of when it will be refactored to support Vue v3. I'm adding the Enhancement label for this issue, so please check for the updates here from time to time, or just watch the topic to get notification.

Kind regards!

[beau-gosse]

Hi, i "solved" the problem using the standard version of Highcharts imported from the html files.

@Sadga Any chance you could share a code sample of how you made it work?

Thanks!

[Denyllon]

@beau-gosse @Sadga probably meant using the highcharts directly within HTML by linking the library through <script> tag, and completely omit the wrapper package.

[Sadga]

Yes, as @Denyllon said you can include the standard library in the htm with the <script> tag, then you can use Highcharts.chart(...) in like the mounted method (or where you need it).

[beau-gosse]

@Sadga @Denyllon thanks for the follow-up! Will definitely give it a go.

[dmitrystas]

https://github.com/highcharts/highcharts-vue/pull/180

[norecords]

Hi, I started an ionic vuejs 3 project ionic vuejs highcharts @dmitrystas I have installed your patch via npm, but still not rendered and got some warns.

[Vue warn]: `beforeDestroy` has been renamed to `beforeUnmount`. 
  at <Anonymous options= 
Object { title: {…}, subtitle: {…}, xAxis: {…}, yAxis: {…}, series: (1) […] }
 > 
  at <Anonymous fullscreen=true > 
  at <IonPage isInOutlet=true registerIonPage=fn<registerIonPage> > 
  at <Home ref=Ref< undefined > key="/home" isInOutlet=true  ... > 
  at <IonRouterOutlet> 
  at <IonApp> 
  at <App> runtime-core.esm-bundler.js:38

[Vue warn]: Unhandled error during execution of render function 
  at <Anonymous options= 
Object { title: {…}, subtitle: {…}, xAxis: {…}, yAxis: {…}, series: (1) […] }
 > 
  at <Anonymous fullscreen=true > 
  at <IonPage isInOutlet=true registerIonPage=fn<registerIonPage> > 
  at <Home ref=Ref< undefined > key="/home" isInOutlet=true  ... > 
  at <IonRouterOutlet> 
  at <IonApp> 
  at <App>

Uncaught (in promise) TypeError: t is not a function
    render VueJS
    renderComponentRoot runtime-core.esm-bundler.js:710
[...]

My app use dist/highcharts-vue.min.js so I change beforeDestroy:function(){this.chart&&this.chart.destroy()}}}; to beforeUnmount:function(){this.chart&&this.chart.destroy()}}}; and first warn leave, still the other ones. What other changes we have to do ? Thanks.

[Denyllon]

Hi @norecords ,

Thank you for letting us know about the issue. The PR which is responsible for adding Vue 3 support have been waiting for review and merge. It should be done in a few days, so after that, the next released version will most probably resolve the issues described above.

Kind regards!

[norecords]

hi @Denyllon , Thank you for your answer, that so nice to use these libraries and frameworks together!

Best Regards.

[jszuminski]

Closing as highcharts-vue offers support for Vue3 with Composition API since version 1.4.2. Here's a demo: https://codesandbox.io/s/cool-shannon-qvrir6