vue3-svg-gauge

Vue SVG Gauge (Vue 3)

An elegant, animated SVG gauge component for Vue 3 with customizable gradients, transitions, and scaling.

🚀 Features

• Vue 3 Support ✨
• Smooth Animations via Tween.js
• Gradient & Customizable Colors
• Flexible Props to fine-tune gauge behavior
• Slot Support for custom content inside the gauge

📦 Installation

npm install vue3-svg-gauge@latest

yarn add vue3-svg-gauge

⚡ Quick Start

Global Registration

import { createApp } from 'vue';
import App from './App.vue';
import VueSvgGauge from 'vue3-svg-gauge';

const app = createApp(App);
app.use(VueSvgGauge);
app.mount('#app');

Component Usage

<script setup>
  import { VueSvgGauge } from 'vue-svg-gauge';
</script>

<template>
  <VueSvgGauge
      :value="3"
      :min="0"
      :max="4"
      :start-angle="-110"
      :end-angle="110"
      :separator-step="1"
      :gauge-color="[
      { offset: 0, color: '#347AB0' },
      { offset: 100, color: '#8CDFAD' }
    ]"
      :scale-interval="0.1"
  />
</template>

🎨 Props

Prop	Type	Default	Description
value	Number	70	Current value of the gauge
min	Number	0	Minimum value
max	Number	100	Maximum value
startAngle	Number	-90	Gauge start angle
endAngle	Number	90	Gauge end angle
innerRadius	Number	60	Inner radius (determines gauge thickness)
separatorStep	Number	10	Steps between each separator (0 = no separator)
gaugeColor	String/Array	['#347AB0', '#8CDFAD']	Single color or gradient array
baseColor	String	#DDDDDD	Background color of empty gauge
scaleInterval	Number	5	Interval for scale lines
transitionDuration	Number	1500	Animation duration in ms
easing	String	Circular.Out	Easing function for animation

🎭 Slot Support

Customize your gauge with a slot for custom content inside the gauge.

<VueSvgGauge :value="random" :separator-step="20" :scale-interval="10">
  <div class="gauge-content">🔥 Custom Content 🔥</div>
</VueSvgGauge>

.gauge-content {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: red;
}

📖 Documentation & Demo

Check out the full documentation and live demo here.

🤝 Credits & License

Forked from original vue-svg-gauge. Licensed under MIT. Made with ❤️ by the Vue community.