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 theJsBarcodebarcode library.

Install

npm install vue-barcode

Use

1. Add VueBarcode as a component

importVueBarcodefrom'vue-barcode';

newVue({
components:{
'barcode':VueBarcode
}
})

2. Use it

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

Example

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

<divid= "app">
<inputv-model= "barcodeValue"/><br>
<barcodev-bind:value= "barcodeValue">
Show this if the rendering fails.
</barcode>
</div>

importVueBarcodefrom'vue-barcode';

varapp=newVue({
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 theJsBarcode documentation.