highcharts / highcharts-vue

Other
686 stars 150 forks source link

Update doc to install HV globally as a plugin? #246

Closed sjoshid closed 8 months ago

sjoshid commented 1 year ago

Hi, I don't know much about Vue 2, but Vue 3 doesn't have Vue.use() function.

Ideal way to register a plugin is given here.

In my Nuxt app, I do this: image

Surprisingly, even though TS catches this error, charts are rendered correctly. The only nitpick, at least in Nuxt, is that I have manually (defeating the purpose of a global plugin) import the component. Like so:

const highcharts = useNuxtApp().vueApp.component('highcharts')

So, maybe this section needs an update?

BTW, importing chart at a component level works.: I was wrong about this. Component level import doesn't work either. I get

[Vue Router warn]: uncaught error during route navigation:                                                                                                                                                                                              4:14:13 PM
ReferenceError: window is not defined                                                                                                                                                                                                                   4:14:13 PM
    at Object.<anonymous> (/Users/bossman/Library/Mobile Documents/com~apple~CloudDocs/Documents/nuxt-quasar-playground/node_modules/highcharts-vue/dist/highcharts-vue.min.js:1:316)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
jszuminski commented 1 year ago

Hi,

Thanks for reporting!

You're right. This part of the documentation is correct for Vue2. For Vue3, you can use the app.use(HighchartsVue).

Here's a demo: https://codesandbox.io/s/silly-bhaskara-k64zry

When it comes to Nuxt + highcharts-vue, we will be diving into that in the near future.

sjoshid commented 1 year ago

Even with vanilla Vue 3 I get an error.

image

Upon further inspection, I think the install method (that is required for all Vue plugin) of HV needs an update too. You of course need TS enabled to see the problem Im talking about.

If you are OK, I can create a PR for doc update and for method update (only if you think it is needed).

jszuminski commented 1 year ago

Solved with https://github.com/highcharts/highcharts-vue/pull/253.