VueBarcode

Add barcodes to your Vue application super easily with VueBarcode! Try it out!

Supported barcode formats:
CODE128
EAN
EAN-13
EAN-8
EAN-5
EAN-2
UPC (A)
CODE39
ITF-14
MSI
Pharmacode
Codabar

It is a light wrapper for the JsBarcode barcode library.

Install

npm install vue-barcode

Use

1. Add VueBarcode as a component

 import VueBarcode from 'vue-barcode';

new Vue({
  components: {
    'barcode': VueBarcode
  }
})

2. Use it

 <barcode value="value-to-render" format="barcode-format" ...more options>
  Show this if the rendering fails.
</barcode>

Example

Simple example with input binding. Try it out with this JsFiddle!

 <div id="app">
  <input v-model="barcodeValue" /><br>
  <barcode v-bind:value="barcodeValue">
    Show this if the rendering fails.
  </barcode>
</div>

 import VueBarcode from 'vue-barcode';

var app = new Vue({
  el: '#app',
  data: {
    barcodeValue: 'test',
  },
  components: {
    'barcode': VueBarcode
  }
})

Options

All options:

format
width
height
text
font-options
font
text-align
text-position
text-margin
font-size
background
lineColor
margin
margin-top
margin-bottom
margin-left
margin-right
display-value
ean128

For more information, see the JsBarcode documentation.