Getting Started with the Kendo UI for Vue Native Barcodes

Updated on Jul 29, 2026

This guide provides essential information about using the Kendo UI for Vue Native Barcodes package—you will learn how to install the package, add Barcodes to your project, style the components, and activate your license. The steps demonstrated in this guide are applicable to all Kendo UI for Vue Native Barcodes.

The Barcodes are part of Kendo UI for Vue, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

After completing this guide, you will be able to reproduce the following example.

Loading ...

Install the Component

To install the Barcodes package, run the following command in the root folder of your Vue project:

npm i @progress/kendo-vue-barcodes

Importing the Components

After installing the Barcodes package, import the desired components in the Vue App. This guide shows how to add the Barcode.

In the App component file of your Vue project (for example, src/App.vue), add the following code:

import { Barcode } from '@progress/kendo-vue-barcodes';

If your project requires more Barcodes, you can import them too. The Barcodes package provides the following components:

Barcode
QR Code

Using the Components

After installing the Barcodes package and importing the components, add the Barcode to the App component file of your Vue project (for example, src/App.vue).

html

<template>
  <Barcode :type="'EAN13'" :value="'123456789012'" />
</template>
<script setup>
import { Barcode } from '@progress/kendo-vue-barcodes';
</script>

To style the Barcode, install and import the Default theme, which is one of several beautiful themes for Kendo UI for Vue.

2.1. Install the Default theme package.
sh
```
npm i @progress/kendo-theme-default
```
2.2. Import the CSS file from the package in main.js.
js
```
import '@progress/kendo-theme-default/dist/all.css';
```
Build and run the application by typing the following command in the root folder of your project:
sh
```
npm start
```

Activating Your License Key

For information on activating your license, see the Set Up Your Kendo UI for Vue License Key page.

Dependencies

The Barcodes package requires you to install the following peer dependencies in your application:

Package Name	Description
vue 3.x	The Vue 3 framework.
@progress/kendo-drawing	Contains the Drawing library, which provides interactive vector graphics.
@progress/kendo-licensing	Contains the internal infrastructure related to licensing.