Sign in
Log inSign up

How does ES6/TypeScript import work?

Emil Moe's photo
Emil Moe
·Jun 20, 2016

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>
Hassle-free blogging platform that developers and teams love.
  • Docs by Hashnode
    New
  • Blogs
  • AI Markdown Editor
  • GraphQL APIs
  • Open source Starter-kit

© Hashnode 2024 — LinearBytes Inc.

Privacy PolicyTermsCode of Conduct