Flexible Barcode Generator In Vue.js

Flexible Barcode Generator In Vue.js

A Vue.js component used to generate customizable barcodes using JsBarcode library.

vue-barcode

Build Status Downloads Version

Barcode component for Vue.js, bases on JsBarcode.

Table of contents

Main

dist/
├── vue-barcode.js        (UMD)
├── vue-barcode.min.js    (UMD, compressed)
├── vue-barcode.common.js (CommonJS)
└── vue-barcode.esm.js    (ES Module)

Getting started

Install

npm install @xkeshi/vue-barcode vue

In browser:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-barcode.js"></script>

Usage

import Vue from 'vue';
import VueBarcode from '@xkeshi/vue-barcode';

Vue.component(VueBarcode.name, VueBarcode);
<barcode value="Hello, World!" :options="{ displayValue: false }"></barcode>

In browser:

<script>Vue.component(VueBarcode.name, VueBarcode);</script>

⬆ back to top

Props

value

  • Type: String

The value of the barcode.

options

  • Type: Object

The options for the barcode generator. References the JsBarcode's options.

tag

  • Type: String
  • Default: 'canvas'
  • Options: 'canvas', 'svg' and 'img'

The tag of the component root element.

Browser support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Opera (latest)
  • Edge (latest)
  • Internet Explorer 9+

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Xkeshi

⬆ back to top

Github Repository

Tags: #VueJs