Registry / web-framework / vue-speedometer

vue-speedometer

JSON →
library3.0.1jsnpmunverified

vue-speedometer is a Vue 3 component library for rendering highly configurable speedometer-like gauges, leveraging D3.js for its robust data visualization capabilities. The current stable version is 3.0.1, which represents a complete rewrite utilizing Vue's Composition API and Single File Components (SFCs), requiring Vue 3.3.0 or later. While a specific release cadence isn't published, major version updates tend to align with significant architectural changes or Vue major version compatibility, with v3 focusing exclusively on Vue 3. This library differentiates itself by providing a performant, D3-driven gauge, offering a "slim build" option for users who wish to manage D3 microbundles externally, and maintains consistent API patterns across its React and Svelte ports. It provides extensive customization for appearance, segments, and labels.

web-frameworkdataserialization
npm install vue-speedometer
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-SPEEDOMETER
V
vue-speedometer
web-frameworkjavascriptv3.0.1
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueSpeedometer
✓ import VueSpeedometer from 'vue-speedometer'
✗ const VueSpeedometer = require('vue-speedometer')
Imports the main component. This library is ESM-only since v3 and requires Vue >=3.3.
VueSpeedometer (Slim Build)
✓ import VueSpeedometer from 'vue-speedometer/slim'
✗ import { VueSpeedometer } from 'vue-speedometer/slim'
Imports the slim build component, which excludes bundled D3. Requires manual installation of specific D3 microbundles.
SpeedometerProps
✓ import type { SpeedometerProps } from 'vue-speedometer'
Common pattern to import component prop types for advanced TypeScript usage (e.g., when defining props manually outside of `<script setup>`). Actual type name may vary based on library's type exports.

Demonstrates basic usage of `vue-speedometer` with dynamic value updates and common configuration props for customization.

<script setup lang="ts"> import { ref } from 'vue'; import VueSpeedometer from "vue-speedometer"; const currentValue = ref(555); const updateValue = () => { currentValue.value = Math.floor(Math.random() * 900) + 50; // Between 50 and 950 }; </script> <template> <div style="text-align: center; padding: 20px;"> <h1>Vue Speedometer Example</h1> <VueSpeedometer :value="currentValue" :minValue="0" :maxValue="1000" :segments="5" :maxSegmentLabels="3" forceRender startColor="red" endColor="green" needleColor="blue" height="300" width="500" currentValueText="Current Value: ${value}" /> <button @click="updateValue" style="margin-top: 20px; padding: 10px 20px;"> Randomize Value </button> </div> </template>
Debug
Known issues
breakingVersion 3.0 is a complete rewrite, requiring Vue 3.3.0 or higher. Projects using older Vue 3 versions or Vue 2 must use v2.x or v1.x respectively.
fix
Ensure your project's Vue version is >=3.3.0. For Vue 2 projects, use vue-speedometer v1.x.
affects: >=3.0.0
gotchaThe `value` prop must always fall between `minValue` and `maxValue` inclusive. Providing a value outside this range may lead to unexpected rendering behavior or errors.
fix
Validate input values to ensure `value >= minValue` and `value <= maxValue` before passing them to the component.
affects: >=1.0.0
gotchaThe `segments` and `maxSegmentLabels` props use D3's `d3-ticks` function for calculation, which provides an *approximate* number of uniformly spaced ticks, not an exact count. This is a characteristic of D3's scaling algorithms.
fix
Be aware that the actual number of segments or labels might slightly differ from the exact number specified. Refer to D3's `d3-array` and `d3-scale` documentation for details.
affects: >=1.0.0
gotchaWhen using the 'slim build' (`import VueSpeedometer from 'vue-speedometer/slim'`), D3 is not bundled. You must manually install all required D3 microbundles (e.g., `d3-array`, `d3-color`, `d3-ease`, `d3-format`, `d3-interpolate`, `d3-scale`, `d3-selection`, `d3-shape`, `d3-transition`) as direct dependencies in your project.
fix
Install the necessary D3 microbundles: `npm install d3-array d3-color d3-ease d3-format d3-interpolate d3-scale d3-selection d3-shape d3-transition`.
affects: >=1.0.0
Errors
Common errors & fixes
Failed to resolve component: VueSpeedometer
The VueSpeedometer component was not correctly imported or registered in the Vue application context.
fix
Ensure `import VueSpeedometer from 'vue-speedometer'` is present in your `<script setup>` block, or that the component is explicitly registered via `app.component('VueSpeedometer', VueSpeedometer)` if not using SFCs with script setup.
Vue warn]: Invalid prop: type check failed for prop "value". Expected Number, got String.
The `value` prop was provided as a string instead of a number, leading to a type mismatch error.
fix
Ensure that the `value` prop passed to `<VueSpeedometer>` is always a JavaScript `Number`. If your data comes as a string, parse it using `parseInt()` or `parseFloat()` (e.g., `:value="parseInt(myStringValue)"`).
TypeError: Cannot read properties of undefined (reading 'select') or similar 'd3 is not defined' errors.
Occurs when using the 'slim build' (`vue-speedometer/slim`) without manually installing the required D3 microbundles.
fix
Install all the specified D3 microbundles as direct dependencies: `npm install d3-array d3-color d3-ease d3-format d3-interpolate d3-scale d3-selection d3-shape d3-transition`.
Upgrade
Version history
3.0.1latest on npm
Audit
Dependencies
vuerequiredPeer dependency for Vue 3 component integration.
Agent activity
22 hits · last 30 days
node
18
OpenAI (training)
1
Resources
githubhttps://github.com/palerdot/vue-speedometer ↗
packagehttps://www.npmjs.com/package/vue-speedometer ↗
vue-speedometer — npm install vue-speedometer · libregistry