Generating Barcodes with the Vue Barcode component


If you are in need of generating barcodes in your Vue project check the Vue Barcode component, which can render barcodes based on a set of options. It is based on JsBarcode - Barcode generation library written in JavaScript that works in both the browser and on Node.js. It is supported in all the latest browsers.

You can find the props for the barcode generator here. The component references the JsBarcode's options.



yarn add xkeshi/vue-barcode

Import the component in your main file

import VueBarcode from 'vue-barcode'

Vue.component('barcode', VueBarcode)

Use it in your templates in a single line

<barcode value="1234567890" :options="{ lineColor: '#0275d8', text: 'Scan'}"></barcode>

Or bind your props to your data

<barcode :value="value" :tag="tag"  :options="options"></barcode>

data () {
    return {
    // using a Math.random function to get a random value
        value: '',
        tag: 'svg',
        options: {
            lineColor: '#ff7069',
            fontSize: 32,
            font: 'Courier',
            width: 3,
            height: 60,
            marginBottom: 60,
            format: 'MSI',
            background: '#ccffff'

The above will render

Find the barcode component on the GitHub repository and everything you need to get started.