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

🎭 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.