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

For more information, see the JsBarcode documentation.