Issues registering plugin Vite Vue 3 Typescript

[Jessica-Ryan]

Vite Vue 3

I have installed using

npm install highcharts-vue

I have imported as follows:

import HighchartsVue from 'highcharts-vue'

I have registered the component as follows:

    const app = createApp(App)
    app.use(HighchartsVue)

I am receiving the following error for app.use(HighchartsVue):

(alias) function HighchartsVue(vue: typeof _Vue, options?: ChartOptions): void import HighchartsVue Argument of type '(vue: typeof import("/home/jessicaryan/Documents/development/stx1alpha/frontend/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to parameter of type 'Plugin_2'. Type '(vue: typeof import("/home/jessicaryan/Documents/development/stx1alpha/frontend/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to type 'PluginInstallFunction & { install?: PluginInstallFunction | undefined; }'.ts(2345)

What is the correct method of importing highcharts-vue for Vite Vue 3?

[Denyllon]

Hi @Jessica-Ryan,

Thank you for opening the issue. Unfortunately we've not officially tested our Vue wrapper with Vite, so there is a chance that something will not work correctly. I see the error is the TypeScript error, and occurred because of some discrepancies within the library types (which are not fully suitable with Vue 3 yet), so to workaround the issue, you can most probably use type assertion here and cast this argument as the type of any. Then TS compiler will not throw the error.

const app = createApp(App)
app.use(HighchartsVue as any)

Kind regards!

[Jessica-Ryan]

Thank you, TS compiler error resolved using the above solution.

Chart is successfully rendered on the screen.