All Components

Barcodes Overview

The Barcodes enable the user to easily generate images that represent QR (Quick Response) codes and barcodes.

Installation

To initialize the Barcodes, either:

Initializing from CDN

The following example demonstrates how to initialize the Barcode and QRCode components by using the CDN services. To access all CDN references, open the sample in Plunker.

<div id="vueapp" class="vue-app">
    <h4>Barcode</h4>
    <kendo-barcode :value="'Mascarpone'"
                   :type="'code128'"
                   :width="280"
                   :height="100">
    </kendo-barcode>

    <h4>QRCode</h4>
    <kendo-qrcode :value="'geo:42.65049,23.37925,100'"
                  :error-collection="'H'"
                  :size="120"
                  :color="'#166a83'">
    </kendo-qrcode>
</div>
Vue.use(BarcodesInstaller);

new Vue({
    el: '#vueapp'
})

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default
  2. Install the Kendo UI Barcodes package for Vue.

    npm install --save @progress/kendo-barcodes-vue-wrapper

    The package also exports the following wrappers for individual components:

    • Barcode
    • QRCode
  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui'
    import '@progress/kendo-theme-default/dist/all.css'
    
    import { Barcode,
            QRCode,
            BarcodesInstaller } from '@progress/kendo-barcodes-vue-wrapper'
    
    Vue.use(BarcodesInstaller)
    
    new Vue({
       el: '#app',
       components: {
           Barcode,
           QRCode
       }
    })
In this article