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.
npm install vue-barcode
import VueBarcode from 'vue-barcode';
new Vue({
components: {
'barcode': VueBarcode
}
})
<barcode value="value-to-render" format="barcode-format" ...more options>
Show this if the rendering fails.
</barcode>
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
}
})
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.