syncfusion-vue-barcode

Q: How do I install syncfusion-vue-barcode?

Run npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-barcode in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-vue-barcode/ (personal) or .claude/skills/syncfusion-vue-barcode/ (project).

by syncfusionFrontend & Design

Create and customize barcode, QR code, and Data Matrix components using Syncfusion Vue Barcode Generator. Use this skill when implementing barcode generation, QR code creation, Data Matrix codes, export functionality, and barcode styling. Covers Syncfusion's BarcodeGenerator, QRCodeGenerator, and DataMatrixGenerator components for Vue applications (Composition API and Options API).

Installs: 65
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-barcode

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-vue-barcode automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing Syncfusion Vue Barcode Generator

Generate professional barcodes, QR codes, and Data Matrix codes in Vue applications using Syncfusion's barcode components. Supports multiple barcode types, export formats, and comprehensive customization options.

When to Use This Skill

Implement barcode generation: Create Code39, Code128, Code93, and other barcode types
Generate QR codes: Create scannable 2D QR codes for URLs, contact info, or data sharing
Create Data Matrix codes: Generate industrial 2D barcodes for product tracking and labels
Export barcodes: Download barcodes as images (PNG, JPG, SVG) or Base64 strings
Customize appearance: Style barcode dimensions, colors, rendering modes (SVG vs Canvas)
Add barcodes to Vue apps: Integrate components using Composition API or Options API
Real-world implementations: Product barcodes, inventory tracking, shipping labels, QR code menus

Documentation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and npm dependencies
Vue 2 and Vue 3 setup
Composition API vs Options API registration
Basic component configuration

Barcode Generator Component

📄 Read: references/barcode-generator.md

BarcodeGenerator component overview
Barcode types (Code39, Code128, Code93, Code32, Code11)
Implementation and configuration
Type-specific examples
Props reference

QR Code Generator Component

📄 Read: references/qrcode-generator.md

QRCodeGenerator component
QR code versions and data capacity
2D QR code generation
Configuration options
Real-world use cases

Data Matrix Generator Component

📄 Read: references/datamatrix-generator.md

DataMatrixGenerator component
Data Matrix 2D encoding
Industrial applications
Configuration and sizing
Performance considerations

Export Functionality

📄 Read: references/export-functionality.md

Export as image (PNG, JPG, SVG formats)
Export as Base64 string
Browser downloads
File naming conventions
Composition API and Options API export patterns

Styling and Rendering Modes

📄 Read: references/styling-and-modes.md

SVG vs Canvas rendering modes
Width and height configuration
CSS styling and responsive design
Color customization
Theme integration

Common Use Cases and Patterns

📄 Read: references/common-use-cases.md

Product barcode generation workflows
QR code for URL sharing
Shipping label barcodes
Real-world implementation patterns
Performance and optimization tips

Quick Start Example

Generate a Simple QR Code

<template>
  <div class="barcode-container">
    <ejs-qrcodegenerator
      id="qrcode"
      ref="qrcodeControl"
      :width="width"
      :height="height"
      :value="value"
      :mode="mode"
    ></ejs-qrcodegenerator>
  </div>
</template>

<style>
  .barcode-container {
    height: 200px;
    width: 200px;
    padding: 20px;
  }
</style>

<script setup>
import { QRCodeGeneratorComponent as EjsQrcodegenerator } from '@syncfusion/ej2-vue-barcode-generator';

const width = "200px";
const height = "200px";
const mode = "SVG";
const value = "https://www.syncfusion.com";
</script>

Common Patterns

Pattern 1: Dynamic Barcode Generation with User Input

<template>
  <div>
    <input v-model="barcodeValue" placeholder="Enter barcode data" />
    <button @click="generateBarcode">Generate Barcode</button>
    <ejs-barcodegenerator
      id="barcode"
      ref="barcodeControl"
      :value="barcodeValue"
      :type="barcodeType"
      width="200px"
      height="150px"
    ></ejs-barcodegenerator>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { BarcodeGeneratorComponent as EjsBarcodegenerator } from '@syncfusion/ej2-vue-barcode-generator';

const barcodeValue = ref("PRODUCT123");
const barcodeType = ref("Code128");

const generateBarcode = () => {
  // Barcode updates automatically when value changes
  console.log("Generated barcode for:", barcodeValue.value);
};
</script>

Pattern 2: Export Barcode as Image

<template>
  <div>
    <ejs-qrcodegenerator
      id="qrcode"
      ref="qrcodeControl"
      value="https://www.example.com"
      width="200px"
      height="200px"
    ></ejs-qrcodegenerator>
    <button @click="exportAsImage">Download QR Code</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { QRCodeGeneratorComponent as EjsQrcodegenerator } from '@syncfusion/ej2-vue-barcode-generator';

const qrcodeControl = ref(null);

const exportAsImage = () => {
  if (qrcodeControl.value) {
    const instance = qrcodeControl.value.ej2_instances[0];
    instance.exportImage('qrcode', 'PNG');
  }
};
</script>

Pattern 3: Multiple Barcode Types in One View

<template>
  <div class="barcode-grid">
    <div class="barcode-item">
      <h3>Barcode (Code128)</h3>
      <ejs-barcodegenerator
        type="Code128"
        value="SYNC123456"
        width="200px"
        height="150px"
      ></ejs-barcodegenerator>
    </div>
    <div class="barcode-item">
      <h3>QR Code</h3>
      <ejs-qrcodegenerator
        value="https://www.syncfusion.com"
        width="200px"
        height="200px"
      ></ejs-qrcodegenerator>
    </div>
    <div class="barcode-item">
      <h3>Data Matrix</h3>
      <ejs-datamatrixgenerator
        value="SHIPMENT-12345"
        width="200px"
        height="200px"
      ></ejs-datamatrixgenerator>
    </div>
  </div>
</template>

<style scoped>
  .barcode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  
  .barcode-item {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
</style>

<script setup>
import { BarcodeGeneratorComponent as EjsBarcodegenerator } from '@syncfusion/ej2-vue-barcode-generator';
import { QRCodeGeneratorComponent as EjsQrcodegenerator } from '@syncfusion/ej2-vue-barcode-generator';
import { DataMatrixGeneratorComponent as EjsDatamatrixgenerator } from '@syncfusion/ej2-vue-barcode-generator';
</script>

Key Props Summary

Prop	Type	Purpose	Common Values
`value`	string	Data to encode	"PRODUCT123", URLs, text
`width`	string	Component width	"200px", "100%"
`height`	string	Component height	"150px", "200px"
`type`	string	Barcode type (BarcodeGenerator only)	"Code39", "Code128", "Code93"
`mode`	string	Rendering mode	"SVG", "Canvas"
`displayText`	boolean	Show text below barcode	true, false

Related Skills

Implementing Syncfusion Vue Components - Overview of all Vue components
Implementing Calendars - For date-related barcode data

FAQ

What does the syncfusion-vue-barcode skill do?

How do I install syncfusion-vue-barcode?

Run npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-barcode in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-vue-barcode/ (personal) or .claude/skills/syncfusion-vue-barcode/ (project).

Which AI agents can use syncfusion-vue-barcode?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-vue-barcode safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-vue-barcode?

It is published by syncfusion in syncfusion/vue-ui-components-skills. It has 65 recorded installs.