We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
The Barcode (QR Code) generator component for Vue is a light-weight and high-performance component that displays industry-standard 1D and 2D barcodes in Vue applications. Generated barcodes are optimized for printing and on-screen scanning. It is designed for ease of use and does not require fonts.
The Vue barcode generator is easily customizable. The barcode provides an option to customize its color (dark or light), height, width, and more.
The Vue barcode generator provides an option to display a barcode with or without text along with alignment options in Vue.
The Syncfusion Vue barcode generator control supports a wide range of barcode symbologies.
The Quick Response code (QR code) is a two-dimensional barcode. It can efficiently store more information in a smaller space than 1D barcodes. Each barcode can store values up to 7089 characters. It is mostly used for URLs, business cards, contact information, and more.
A Data Matrix is a two-dimensional barcode. The information should be encoded with text or numeric values. Each barcode can store values up to 2335 alphanumeric characters. It is mostly used by couriers, food industry, and more.
Code 39 is a common barcode type used for various labels such as name badges, inventory, and industrial applications. The symbology of the Code 39-character set consists of barcode symbols representing numbers 0-9, upper-case letters A-Z, and the space character.
The Code 39 Extended is an extended version of Code 39. Additionally, lower characters and special characters are supported.
The Code 11 is also known as USD-8, high numeric symbology. The character set includes the digits 0-9, a dash symbol ( - ), and start and stop characters. It is commonly used in telecommunications.
The Codabar is also known as USD-4 and Code 2 of 7. It can encode 0-9 digits, six symbols, and start and stop characters. It is even possible to print Codabar codes using typewriter-like impact printers, which allows the creation of many codes with consecutive numbers without having to use a computer.
The Code 32 is also known as Italian Pharmacode. It is used to encode Italian Pharmacode, which has the following structure: ‘A’ character that is not really encoded, 8 digits for Pharmacode, and 1 digit for Checksum module 10 that is automatically calculated by Barcode Professional.
Code 93 was designed to complement and improve Code 39. It is used to represent the full ASCII character set by using combinations of 2 characters. Code 93 can encode uppercase letters, numeric digits, and a handful of special character.
It is based on Code 93, but can encode full 128-character ASCII. The characters represented by Code 93 are represented in Code 93 Extended as single barcode characters, but all other characters are represented by a control character plus another character.
It is a very high-density barcode that supports alphanumeric characters. This barcode is used as the basis for many other barcodes like UCC/EAN, HIBC (Health Industry Barcode), and the Blood Bank Industry.
The Universal Product Code (UPC -A) is a numeric symbology used in retail applications. UPC-A symbols consist of 11 data digits and one check digit. The first digit is a number system digit that normally represents the type of product being identified.
The Barcode component is also available in Blazor, React, Angular, and JavaScript frameworks. Check out the different Barcode platforms from the links below,
Easily get started with the Vue Barcode using a few simple lines of Vue codes as demonstrated below. Also explore our Vue Barcode Example that shows you how to render and configure a Barcode in Vue.
<template>
<div id="app" class="barcodeStyle">
<ejs-barcodegenerator
id="barcode"
ref="barcodeControl"
:width="width"
:height="height"
:type="type"
:value="value"
:mode="mode"
></ejs-barcodegenerator>
</div>
</template>
<style>
.barcodeStyle
{
height: 150px;
width: 200px;
padding-left: 40%;
padding-top: 9%;
}
</style>
<script>
import Vue from 'vue';
import { BarcodeGeneratorPlugin } from '@syncfusion/ej2-vue-barcode-generator';
Vue.use(BarcodeGeneratorPlugin);
export default {
name: 'app'
data () {
return {
width: "200px",
height: "150px",
type: "Codabar",
value: "123456789",
mode: "SVG",
}
}
}
</script>You can find our Vue Barcode demo here.
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
A good place to start would be our comprehensive getting started documentation.
Documentation
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
