lindell / vue-barcode

Barcode generator for Vue.js

VueBarcode

Add barcodes to your Vue application super easily with VueBarcode! Try it out!

Supported barcode formats: CODE128 EAN EAN-13 EAN-8 EAN-5 EAN-2 UPC (A) CODE39 ITF-14 MSI Pharmacode Codabar

It is a light wrapper for the JsBarcode barcode library.

Install

npm install vue-barcode

Use

1. Add VueBarcode as a component

import VueBarcode from 'vue-barcode';

new Vue({
  components: {
    'barcode': VueBarcode
  }
})

2. Use it

<barcode value="value-to-render" format="barcode-format" ...more options>
  Show this if the rendering fails.
</barcode>

Example

Simple example with input binding. Try it out with this JsFiddle!

<div id="app">
  <input v-model="barcodeValue" /><br>
  <barcode v-bind:value="barcodeValue">
    Show this if the rendering fails.
  </barcode>
</div>

import VueBarcode from 'vue-barcode';

var app = new Vue({
  el: '#app',
  data: {
    barcodeValue: 'test',
  },
  components: {
    'barcode': VueBarcode
  }
})

Options

All options:

format width height text font-options font text-align text-position text-margin font-size background lineColor margin margin-top margin-bottom margin-left margin-right display-value ean128

For more information, see the JsBarcode documentation.

vue-barcode's Issues

Code128C is not working properly

I have a UUID that I'm trying to generate a manageable barcode size for. A commonly suggested way is to use the hex representation then convert to decimal then use Code 128C to generate a barcode.

This library fails to generate barcodes using Code128C with any value of length greater than 20. At 20 it replaces the last couple digits with 0 so it's not even accurate unless you use a value <18 digits.

Code128C does not have a length limitation... why is this library failing with a larger value?

Example...
Input value (20 digit count): 12345678901234567890
The generate barcode:
vue-barcode-issue-1.pdf

If you use the default format it reduces length by using scientific notation as a string and then generating a barcode against that string which doesn't even make sense.
vue-barcode-issue-2.pdf

BarCode not generating

It seems as the barcode is not generate. Even the example link ( http://jsfiddle.net/hfgan035/13/ ) do not generate the url when I try it.

This project fails to be built with Uglify

I use laravel-mix to aid in my projects compilation, and this package worked great until I tried to run npm run production, which runs the code through Uglify. After I added this package to my project I didn't try to run production until just a day or two ago. When I did run it I received the following errors.

ERROR  Failed to compile with 1 errors                                                                       3:55:15 PM  

dist/tickets-vendor.js from UglifyJs
Unexpected character '`' [./~/vue-barcode/index.js:4,0][dist/tickets-vendor.js:32577,12]

 ERROR  Failed to compile with 1 errors                                                                       3:56:39 PM  

dist/tickets-vendor.js from UglifyJs
Unexpected token: operator (>) [./~/vue-barcode/index.js:59,0][dist/tickets-vendor.js:32632,18]

Thankfully it didn't take long to fix, so I will be submitting a PR to fix these issues shortly!

vue-barcod not suport ITF just ITF-14?

Here in Brazil we use the ITF to generate the barcode. It is a FEBRABAN (Brazilian Federation of Banks) standard. The pattern requires 44 digits plus two digits to start and end the sequence, totaling 46 digits, doesn't vue-barcode support this pattern?

i can't change the style

hello, ignore the options I put

<barcode :value="codigo" :option='{format: "pharmacode", width:4, height:40, displayValue: false}'> <i style="font-size:10px;" class="fa fa-spinner fa-pulse fa-fw"></i> <span style="font-size:10px;">Gerando código de barras.</span> </barcode>

Element-tag option not in documentation

Please add element-tag prop option to "all options" in the documentation. I spent way to long to figure out how to make an image barcode instead of an SVG. Thank you.

Not able to export to image

Not seeing the export option in the documentation.
How do I export the bar code to image?

Missing property displayValue

There is a missing property here from the jsbarcode library displayValue

How to control the width of SVG?

Hello, lindell!
The width option of the current vue-barcode is the width option of the bar.
However, in addition to adjusting the barcode width, I need a way to control the width of the SVG.

I don't know how to control SVG width.
I would thank it if you could tell me.
Have a nice day. thank you.

No jsDelivr CDN file

需要编辑后CDN能引用的文件

Not working with vue (laravel+ inertia)

Despite many attempts, the module does not render the barcode in vue (laravel + inertia).

Also the jsFiddle example doesn't work.

how to print/put in a pdf the generated barcode?

hi! how could i print the generated barcode, let's say by using pdfmake and then printing the resulting pdf file? thanks!

参数设置宽高，没有效果，能补充全文档吗

参数设置宽高，没有效果，能补充全文档吗

<svg> attribute width: Expected length, "NaNpx"

Quite a lot err in console.
And my Code:

import VueBarcode from 'vue-barcode'

<vue-barcode value="123456"></vue-barcode>

setSvgAttributes @ svg.js?83f5:144
prepareSVG @ svg.js?83f5:64
render @ svg.js?83f5:36
render @ JsBarcode.js?a07e:227
API.render @ JsBarcode.js?a07e:206
JsBarcode @ JsBarcode.js?a07e:76
render @ index.js?8f42:41
Vue.$watch @ vue.esm.js?65d7:3367
mounted @ index.js?8f42:32
callHook @ vue.esm.js?65d7:2665
insert @ vue.esm.js?65d7:3526
invokeInsertHook @ vue.esm.js?65d7:5469
patch @ vue.esm.js?65d7:5639
Vue._update @ vue.esm.js?65d7:2414
updateComponent @ vue.esm.js?65d7:2538
get @ vue.esm.js?65d7:2881
Watcher @ vue.esm.js?65d7:2870
mountComponent @ vue.esm.js?65d7:2542
Vue$3.$mount @ vue.esm.js?65d7:7863
Vue$3.$mount @ vue.esm.js?65d7:10066
Vue._init @ vue.esm.js?65d7:4236
Vue$3 @ vue.esm.js?65d7:4321
(anonymous) @ main.js?1c90:25
(anonymous) @ app.js:1245
__webpack_require__ @ app.js:660
fn @ app.js:86
(anonymous) @ app.js:2509
__webpack_require__ @ app.js:660
(anonymous) @ app.js:709
(anonymous) @ app.js:712
svg.js?83f5:148 Error: <svg> attribute viewBox: Expected number, "0 0 NaN 0".
setSvgAttributes @ svg.js?83f5:148
prepareSVG @ svg.js?83f5:64
render @ svg.js?83f5:36
render @ JsBarcode.js?a07e:227
.......
(anonymous) @ app.js:709
(anonymous) @ app.js:712
svg.js?83f5:175 Error: <rect> attribute x: Expected length, "NaN".```

Sometimes can't generate barcode

Hi lindell,
i don't know why, but sometime i can't generate a barcode for some values. For example i'm trying to get a bar code for this ean13 format value "9788865932478", but nothing happen. Why ?

This is the code that i'm using on jfiddle:

var VueBarcode = require('vue-barcode');

var app = new Vue({
  el: '#app',
  data: {
    barcodeValue: '9788865932478',
  },
  components: {
		'barcode': VueBarcode
	}
})

and the html:

<div id="app">
  <input v-model="barcodeValue" /><br>
  <barcode v-bind:value="barcodeValue" font-options="bold" format="ean13">
    Can't generate the barcode
  </barcode>
</div>

does not work

the example you have mentioned in jsfiddle does not work, also i have tried to use it according to documentation but it did not work.

how to hide the text?

the option displayValue is not support...

No example to pass format option

Could you provide some example code about the format option. I'm trying to set it to EAN-13, but i got an error:

Can't generate the barcode

My fault, i need to pass a correct ean 13 value. Sorry!

Self contained example

Hi,
Would it be possible to have example without the use of npm nor JsFiddle ?
Thank you,
Igor

Can you support foamat interleaved 2 of 5 (int25) and datamatrix

Can you support foamat interleaved 2 of 5 (int25) and datamatrix?
请问您能支持条码的 interleaved 2 of 5 (int25) and datamatrix 两种格式吗？

Release Changelog

Any chance there can be regular changelogs on this for releases? I'm noticing that it was upgraded a minor version recently but can't seem to find the changelog. Thanks!

Publish a new version

This PR was merged: #14, but there hasn't been a new release.

Would you mind publishing a new version? Thanks!

You need to babel your code for support the IE

vue warn and error in electron project

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <Barcode>
       <Modal>
         <Card>

and this:

TypeError: this.$el.querySelector is not a function
    at VueComponent.render (/Users/Fauny/Work/WoodManager/source/epacial-vid/node_modules/vue-barcode/index.js:72:22)
    at VueComponent.Vue.$watch (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3606:10)
    at VueComponent.mounted (/Users/Fauny/Work/WoodManager/source/epacial-vid/node_modules/vue-barcode/index.js:35:10)
    at callHook (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2916:21)
    at Object.insert (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4149:7)
    at invokeInsertHook (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5944:28)
    at Vue.patch [as __patch__] (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6163:5)
    at Vue._update (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2665:19)
    at Vue.updateComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2783:10)
    at Watcher.get (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3137:25)

Options not working

This is my configuration

<vue-barcode
     :value="codigoBarras"
     width="1"
     height="60"
     :options="{
        lineColor: '#007bff',
        fontSize: '20',
        lineColor: '#990000',
        marginLeft: 30,
        marginTop: 50,
        background: '#dddddd'
     }"
>
      Não possível renderizar a imagem
</vue-barcode>

The style is not applied to the component. I'm using it on quasar framework.

And here is how it's rendered

Global Import Warning

Hello,

I found that i have a warning when i import globaly :

Argument type {data: (function(): {valid: boolean}), render: (function(any): any), mounted: VueBarcode.mounted, props: {margin: [String | StringConstructor, Number | NumberConstructor], textPosition: [String | StringConstructor], textMargin: [String | StringConstructor, Number | NumberConstructor], textAlign: [String | StringConstructor], format: [String | StringConstructor], fontOptions: [String | StringConstructor], lineColor: [String | StringConstructor], elementTag: {default: string, validator: (function(any=): boolean), type: StringConstructor}, marginLeft: [String | StringConstructor, Number | NumberConstructor], marginRight: [String | StringConstructor, Number | NumberConstructor], displayValue: {default: boolean, type: [String | StringConstructor, Boolean | BooleanConstructor]}, ...}} is not assignable to parameter type ThisTypedComponentOptionsWithArrayProps | undefined   Type VueBarcode.mounted is not assignable to type () => void

Error: Uncaught (in promise) TypeError: createElement is not a function

Hey I'm using VueJs 3 and it seems to be incompatible with this package.
I have these errors:

@lindell is there any tip on how to fix it?