Usage of 0.7.7 in Nuxt.js

[DepkaCZ]

Hi,

is there a way how to use this plugin in Nuxt.js ?

1. If i import the plugin in the component, nuxt gives me 'window not defined' which i understand as it tries to import it on server side
2. If i create a Nuxt.js plugin zoom.client.js like this :

import Vue from 'vue'
import * as Zoom from 'chartjs-plugin-zoom'

Vue.use(Zoom)

and then register it as a nuxt.js plugin i dont really know how to register that plugin in the component, like, how do i call something like Chart.register(Zoom) or something to make it work ?

3. Lastly as the nuxt.js plugin way is a mystery to me, I've tried to include cdn links in head but that crashes on

Uncaught TypeError: Cannot read properties of undefined (reading 'helpers')
    at Object.2.chart.js (Chart.Zoom.min.js:10:3567)
    at o (Chart.Zoom.min.js:10:254)
    at t (Chart.Zoom.min.js:10:421)
    at Chart.Zoom.min.js:10:438

So is there a way how to make the zoom plugin work ? I've spent two nights trying to figure this out but without luck :/

[LeeLenaleee]

For the CDN links to work it need to match version (0.7.7 relies on Chart.js V2 and version >= 1 relies on CHart.js V3) also Chart.js needs to be loaded before you load the zoom plugin

[kurkle]

The "window not defined" probably comes from hammer.js, you can use ng-hammmer instead: https://www.npmjs.com/package/ng-hammerjs

[jornhymcfly]

@kurkle did you manage to fix the problem of "window not defined" ?

[kurkle]

Yes, I've used the linked nh-hammer instead of hammer before.

[jornhymcfly]

Oh that's that's great.

Could you please provide an example? I can't figure out how to use the package with the plugin.

[mikeswart]

+1 to the request for an example of this, I am encountering the same issue.

[ntatko]

Getting this same issue in a react remix app