I'm trying to import this Gauge into a Vue component, but I'm getting the error TypeError: _gauge2.default is not a constructor. So far I think it's because I'm doing something wrong with the import.
ChartJS works in a similar way, the difference though is that ChartJS is a NPM package which Gauge.js isn't. Could this be something that conflicts?
<template>
<canvas></canvas>
</template>
<script>
import Gauge from './gauge.js';
export default {
props: {
max: {
type: Number,
default: 100
},
value: {
type: Number,
default: 50,
twoWay: true,
required: true
}
},
data() {
return {
gauge: null
}
},
computed: {
options() {
return {
lines: 12, // The number of lines to draw
angle: 0.15, // The length of each line
lineWidth: 0.44, // The line thickness
pointer: {
length: 0.9, // The radius of the inner circle
strokeWidth: 0.035, // The rotation offset
color: '#000000' // Fill color
},
limitMax: 'false', // If true, the pointer will not go past the end of the gauge
colorStart: '#6FADCF', // Colors
colorStop: '#8FC0DA', // just experiment with them
strokeColor: '#E0E0E0', // to see which ones work best for you
generateGradient: true
};
}
},
ready() {
this.gauge = new Gauge(this.$el).setOptions(this.options);
this.gauge.maxValue = this.max;
this.gauge.animationSpeed = 32;
gauge.set(this.value);
}
}
</script>
<style lang="scss">
</style>
JS enthusiast
Hi!
If you're writing it from Typescript, then you could (and should) skip the extension in your TS file, to get something either:
import {Gauge, Donut, BaseDonut, TextRenderer} from './gauge'; import * as gauge from './gauge'; (in which case you then later need to use the exports from this module: gauge.Gauge, gauge.Donut, gauge.BaseDonut, gauge.TextRendererAbout the question, «why are the { } required», in fact the only case you don't need it is when your module has only one default export declaration.
To really get how it works, I would really recommend you to take 10-15 minutes and read the modules chapter of Typescript's Handbook, it would be really worth it! And if you're short in time, read the import part, and make sure to read the very short but so usefull 'red flags' part at the very end!
I changed to this import {Gauge} from './gauge.js/dist/gauge.js';
Can someone explain me why it needs { }?
Peter Scheler
Read gauge.js and you find:
module.exports = { Gauge: Gauge, Donut: Donut, BaseDonut: BaseDonut, TextRenderer: TextRenderer };There are many ways of
import. Withimport something from 'somewere'you requireexports.default, but there is no default. With the brackets you requiredexports.Gauge.An other way is
import * as gauge from './gauge.js/dist/gauge.js', but then you have to usegauge.Gauge.