vue-sevenseg | Vaadin

A Vue component that creates a vector-based (SVG) seven-segment display.


A Seven Segment Display Component for Vue.js based on sevenSeg.js

Compile to web component

yarn build

Compile to Vue library so that it can be used in Vue components and apps

yarn build-lib

Compile example vue app that uses the component

yarn serve

Project setup (I haven't tried this, but it should work)

npm install --save vue-sevenseg

JSFiddle example as web component

chrome, safari:


Look in the files ex1.html, ex_unpkg.html for examples... Look at ex_ff.html for firefox for examples.


<v-sevenseg value=".34" color-back="transparent" color-on="green" color-off="rgb(255, 240, 255)" height=80 digits=7 slant=10></v-sevenseg>

value or :value

  • Any Number between 0-9 in String format. Default is "8"
  • Use :value={myValue} to bind value prop to myValue


  • String. Default is Red.
  • Color when a segment is on


  • String. Default is rgb(50, 0, 0)
  • Color when a segment is off


  • String. Default is Black
  • Color for the box/background of the display


  • Number. Default is 100
  • Height in pixels of a box the includes the display.


  • Number. Default is 400
  • Width in pixels of a box the includes the display.


  • Number. Default is 4
  • Number of digits in the display


  • Number. Default is 0
  • Degrees slant of the digits in the display


This is my first vue project. Any suggestions to improve the code is welcome.

Based on code and instructions from


Link to this version
ImportedReleased 29 January 2019MIT License
Framework Support
Browser Independent
Install with
npm install v-sevenseg"@1.0.3"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.3


  • vue#^2.5.21