Vue-speedometer: Vue component library for showing speedometer like gauge

Hi All,

vue-speedometer is a Vue component library for showing speedometer like gauge using d3.

You can see it in action here - https://palerdot.in/vue-speedometer
Here is a sandbox link to play around with - https://codesandbox.io/s/vue-template-5yuw8
source code - https://github.com/palerdot/vue-speedometer

As an aside, it shares its core with react-d3-speedometer which was recently rewritten from scratch by modularizing its core.

If you have a need for a similar component in your Vue apps please let me know on what you think. Feedbacks appreciated.

3 Likes

Hi looks really nice :slight_smile:

Hi. I am trying to add this in my project, but its not working. I’ve instaled through npm.

and in my code:
import VueSpeedometer from “vue-speedometer”

  <vue-speedometer

    :maxSegmentLabels="12"

    :segments="3"

    :value="470"

    :segmentColors='["tomato", "gold", "limegreen"]'

    needleColor="lightgreen"

  />

</div>

giving:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build
1 Like

I am receiving the same error. Can you please tell me how was it solved.

Please check FAQ section which has information on dealing with this issue. Basically you need to create a vue.config.js file with following contents. For more context please refer to the actual source of this solution - https://github.com/vuejs/vue-cli/issues/1875#issuecomment-408739414

// vue.config.js
module.exports = {
  runtimeCompiler: true
}

You need to create a vue.config.js file with following contents. For more context please refer to the actual source of this solution - https://github.com/vuejs/vue-cli/issues/1875#issuecomment-408739414