Vue 3 Gauge remade from `https://github.com/amroessam/vgauge`

VGauge.vue

<template>
  <div>
    <div class="gauge-title">
      <span ref="gauge_value" v-if="top" :class="gaugeValueClass"></span>
      <span v-if="top" :class="gaugeValueClass">{{ unit }}</span>
    </div>
    <canvas ref="gauge_ref" :class="canvasClass" :height="height" :width="width"></canvas>
    <div class="gauge-title">
      <span ref="gauge_value" v-if="!top" :class="gaugeValueClass"></span>
      <span v-if="!top" :class="gaugeValueClass">{{ unit }}</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, onBeforeUnmount } from "vue";
import { Gauge, Donut } from "gaugeJS";

const props = defineProps({
  unit: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "100",
  },
  width: {
    type: String,
    default: "100",
  },
  decimalPlace: {
    type: Number,
    default: 0,
  },
  canvasClass: {
    type: String,
    default: "",
  },
  gaugeValueClass: {
    type: String,
    default: "",
  },
  top: {
    type: Boolean,
    default: false,
  },
  maxValue: {
    type: Number,
    default: 100,
  },
  minValue: {
    type: Number,
    default: 0,
  },
  options: {
    type: Object,
    default: () => {
      return {
        angle: 0.15,
        lineWidth: 0.44,
        radiusScale: 1,
        pointer: {
          length: 0.6,
          strokeWidth: 0.035,
          color: "#000000",
        },
        limitMax: false,
        limitMin: false,
        colorStart: "#6FADCF",
        colorStop: "#8FC0DA",
        strokeColor: "#E0E0E0",
        generateGradient: true,
        highDpiSupport: true,
      };
    },
  },
  animationSpeed: {
    type: Number,
    default: 10,
  },
  initialValue: {
    type: Number,
    default: 0,
  },
  value: {
    type: Number,
    default: 50,
  },
  donut: {
    type: Boolean,
    default: false,
  },
});

const gauge = ref(null);
const gauge_ref = ref(null);
const gauge_value = ref(null);

onMounted(() => {
  initializeGauge();
});
onBeforeUnmount(() => {
  delete gauge.value;
});

watch(
  () => props.value,
  (newVal, _) => {
    gauge.value.set(newVal);
  }
);

const initializeGauge = () => {
  gauge.value = props.donut ? new Donut(gauge_ref.value) : new Gauge(gauge_ref.value);
  gauge.value.maxValue = props.maxValue;
  gauge.value.setMinValue(props.minValue);
  gauge.value.animationSpeed = props.animationSpeed;
  gauge.value.setOptions(props.options);
  gauge.value.setTextField(gauge_value.value, props.decimalPlace);
  gauge.value.set(props.value);
};
</script>

<style scoped>
.gauge-title span {
  display: inline;
  text-align: center;
}
</style>