Simple Barcode Generator For Vue.js

Simple Barcode Generator For Vue.js

Add barcodes to your Vue application super easily with VueBarcode.

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.

Github Repository

Tags: #VueJs