All Components

Barcode Overview

Barcodes represent data in a machine-readable format and support symbologies.

All graphics are rendered on the client in a Scalable Vector Graphics (SVG) format.

The Barcode wrapper for Vue is a client-side wrapper for the Kendo UI Barcode widget.

Basic Usage

The following example demonstrates the Barcode in action.

<div id="vueapp" class="vue-app">
    <kendo-barcode :value="2346722"
                   :type="'ean8'"
                   :width="280"
                   :height="100">
    </kendo-barcode>
    <kendo-barcode :value="barcodeValue"
                   :width="280"
                   :height="100">
    </kendo-barcode>
    <h4>Enter a number:</h4>
    <kendo-numerictextbox type="number"
                          title="number"
                          :value="100000"
                          :min="0"
                          :max="10000000000000"
                          v-model="barcodeValue"
                          :format="'n0'">
    </kendo-numerictextbox>
</div>
Vue.use(BarcodesInstaller);
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            barcodeValue: 1234
        }
    }
})
In this article