highcharts / highcharts-vue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Update doc to install HV globally as a plugin?

sjoshid opened this issue · comments

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)

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.

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).

Solved with #253.