can't use it with nuxt vue.js

[ouarrtaha]

i spent 5 hours trying to integrate this lib in nuxt but with no success

i tried it with vue . single page app and it works here is my component.

->template

div .wrapper canvas#foo (ref="foo")

->script

import Gauge from 'gaugeJS';

export default {

mounted () { this.initGauge() },

methods: { initGauge () { let opts = { angle: 0, // The span of the gauge arc lineWidth: 0.35, // The line thickness radiusScale: 1, // Relative radius pointer: { length: 0.53, // // Relative to gauge radius strokeWidth: 0.057, // The thickness color: '#000000' // Fill color }, limitMax: false, // If false, max value increases automatically if value > maxValue limitMin: false, // If true, the min value of the gauge will be fixed colorStart: '#6F6EA0', // Colors colorStop: '#C0C0DB', // just experiment with them strokeColor: '#EEEEEE', // to see which ones work best for you generateGradient: true, highDpiSupport: true // High resolution support } let gauge = new Gauge(this.$refs.foo) gauge.maxValue = 3000 // set max gauge value gauge.setMinValue(0) // Prefer setter over gauge.minValue = 0 gauge.animationSpeed = 62 // set animation speed (32 is default value) gauge.set(1700) // set actual value gauge.setOptions(opts) // create sexy gauge! } } }

but with nuxt, i got an window undefined (this is caused by server rendering)

so i used a plugin //gauge.js import {Gauge} from 'gaugeJS' export default Gauge

and in nuxt.config.js i set:

plugins: [ {src:'~/plugins/gauge.js', ssr:false} ],

after that i delete the import line in my component also in my page i wrapped the component with when i run i get this in my client console :

Error while initializing app TypeError: this.canvas.getContext is not a function

is there any solution to resolve that…

[ouarrtaha]

Update:

i fixed that with :

build: {
    vendor: ['gaugeJS'],
}

and in component ->script

  let GaugePlug;
  if (process.browser) {
    GaugePlug = require('gaugeJS');
  }

and changed let gauge = new Gauge(this.$refs.foo) to let gauge = new GaugePlug.Gauge(this.$refs.foo)