VueJsBarcode

Vue 3 Barcode Generator Component - wrapper for JsBarcode

A Vue 3 component wrapper for JsBarcode, allowing you to generate barcodes in your Vue3.js applications easily. This component supports multiple barcode formats and is fully customizable via props that map directly to JsBarcode options.

The existing JsBarcode port for Vue 3 vue3-barcode works well for most cases except its dependencies have not been updated for some time, which necessitated a new port. In addition, I required ability to allow multiple barcodes on the same page, which didn't work in vue3-barcode due to the way the barcode element was selected. This has been fixed in this port.

Since its a port of JsBarcode, all functionality available should work in the same manner. I used an AI to quickly pull up the following documentation.

Enjoy!

- Features
- Installation
- Usage
- Global Registration
- Local Registration
- Using with Script Setup
- Using with Composition API
- Available Props
- Value
- Format
- Width
- Height
- Display Value
- Text
- Font Options
- Font
- Text Align
- Text Position
- Text Margin
- Font Size
- Background
- Line Color
- Margin
- Margin Top
- Margin Bottom
- Margin Left
- Margin Right
- Flat
- EAN128
- Element Tag
- Examples
- Basic Usage
- Customizing Appearance
- Using with Script Setup
- Multiple Barcodes on the Same Page
- License

Features

- Supports multiple barcode formats (e.g., CODE128, EAN13, UPC, etc.)
- Fully customizable appearance via props
- Reactivity support: updates when props change
- Compatible with both Options API and Composition API
- Can render barcodes using , , or elements
- Easy to integrate into existing Vue 3 projects

Installation

Install the package via npm:

``

bash

npm install vue-jsbarcode jsbarcode

vue-jsbarcode

: The Vue 3 component

-

jsbarcode

: The underlying barcode generation library



Note:

jsbarcode

 is listed as a peer dependency and must be installed separately.



Usage



$3

Register the component globally in your main application file (e.g.,

main.js

):

javascript

import { createApp } from 'vue';

import App from './App.vue';

import VueJsBarcode from 'vue-jsbarcode';



const app = createApp(App);

app.use(VueJsBarcode);

app.mount('#app');





Now you can use

 anywhere in your templates.



$3

Import and register the component locally in your Vue component:

vue





$3

If you're using the

$3

vue





Available Props

The component accepts various props that correspond directly to JsBarcode options. Below is a detailed breakdown of each prop and its purpose.



$3

- Prop:

value



- Type: String or Number

- Default:



- Description: The value to be encoded into the barcode. This is required and should be a string or a number that represents the data you want to encode.



$3

- Prop:

format



- Type: String

- Default:

'CODE128'



- Description: The barcode format to use. Available formats include:

    -

CODE128

EAN13

UPC

EAN8

EAN5

EAN2

CODE39

ITF14

MSI

Pharmacode



    - and others supported by JsBarcode



Example:

vue





$3

- Prop:

width



- Type: Number or String

- Default:



- Description: The width of a single bar in the barcode, in pixels.



$3

- Prop:

height



- Type: Number or String

- Default:

100



- Description: The height of the barcode in pixels.



$3

- Prop:

displayValue



- Type: Boolean or String (

'true' or 'false'

)

- Default:

true



- Description: Whether to display the value (text) below the barcode.



$3

- Prop:

text



- Type: String or Number

- Default:

undefined



- Description: Custom text to display under the barcode. If not set, the

value

 prop will be used.



$3

- Prop:

fontOptions



- Type: String

- Default:



- Description: Additional font options. Possible values include:

    -

 (default)

    -

'bold'

'italic'

'bold italic'





$3

- Prop:

font



- Type: String

- Default:

'monospace'



- Description: The font family for the text displayed below the barcode.



$3

- Prop:

textAlign



- Type: String

- Default:

'center'



- Description: The alignment of the text. Possible values:

    -

'left'

'center'

'right'





$3

- Prop:

textPosition



- Type: String

- Default:

'bottom'



- Description: The position of the text relative to the barcode. Possible values:

    -

'top'

'bottom'





$3

- Prop:

textMargin



- Type: Number or String

- Default:



- Description: The margin between the barcode and the text, in pixels.



$3

- Prop:

fontSize



- Type: Number or String

- Default:



- Description: The font size of the text displayed below the barcode, in pixels.



$3

- Prop:

background



- Type: String

- Default:

'#ffffff'



- Description: The background color of the barcode.



$3

- Prop:

lineColor



- Type: String

- Default:

'#000000'



- Description: The color of the bars in the barcode.



$3

- Prop:

margin



- Type: Number or String

- Default:



- Description: The margin around the barcode, in pixels. This sets all margins (top, bottom, left, right) to the same value.



$3

- Prop:

marginTop



- Type: Number or String

- Default:

undefined



- Description: The top margin of the barcode, in pixels. If not set, the value of

margin

 prop is used.



$3

- Prop:

marginBottom



- Type: Number or String

- Default:

undefined



- Description: The bottom margin of the barcode, in pixels. If not set, the value of

margin

 prop is used.



$3

- Prop:

marginLeft



- Type: Number or String

- Default:

undefined



- Description: The left margin of the barcode, in pixels. If not set, the value of

margin

 prop is used.



$3

- Prop:

marginRight



- Type: Number or String

- Default:

undefined



- Description: The right margin of the barcode, in pixels. If not set, the value of

margin

 prop is used.



$3

- Prop:

flat



- Type: Boolean

- Default:

false



- Description: Renders the barcode flat without any background. Useful when rendering on transparent backgrounds.



$3

- Prop:

ean128



- Type: Boolean or String (

'true' or 'false'

)

- Default:

false



- Description: If set to true, uses the FNC1 character in Code 128 barcodes to encode GS1-128 (EAN-128) barcodes.



$3

- Prop:

elementTag



- Type: String

- Default:

'svg'



- Description: The HTML tag to use for rendering the barcode. Possible values:

    -

'svg'

 (default)

    -

'canvas'

'img'





Usage:

vue





Examples



$3

vue

$3

vue

$3

vue

$3

vue

License

MIT

Note: This component is a wrapper around JsBarcode. For more advanced usage and barcode formats, refer to the JsBarcode documentation.

VueJsBarcode

Vue 3 Barcode Generator Component - wrapper for JsBarcode

Features

Installation

Install the package via npm:

``

bash

npm install vue-jsbarcode jsbarcode

vue-jsbarcode

: The Vue 3 component

-

jsbarcode

: The underlying barcode generation library



Note:

jsbarcode

 is listed as a peer dependency and must be installed separately.



Usage



$3

Register the component globally in your main application file (e.g.,

main.js

):

javascript

import { createApp } from 'vue';

import App from './App.vue';

import VueJsBarcode from 'vue-jsbarcode';



const app = createApp(App);

app.use(VueJsBarcode);

app.mount('#app');





Now you can use

 anywhere in your templates.



$3

Import and register the component locally in your Vue component:

vue





$3

If you're using the

$3

vue





Available Props

The component accepts various props that correspond directly to JsBarcode options. Below is a detailed breakdown of each prop and its purpose.



$3

- Prop:

value



- Type: String or Number

- Default:



- Description: The value to be encoded into the barcode. This is required and should be a string or a number that represents the data you want to encode.



$3

- Prop:

format



- Type: String

- Default:

'CODE128'



- Description: The barcode format to use. Available formats include:

    -

CODE128

EAN13

UPC

EAN8

EAN5

EAN2

CODE39

ITF14

MSI

Pharmacode



    - and others supported by JsBarcode



Example:

vue





$3

- Prop:

width



- Type: Number or String

- Default:



- Description: The width of a single bar in the barcode, in pixels.



$3

- Prop:

height



- Type: Number or String

- Default:

100



- Description: The height of the barcode in pixels.



$3

- Prop:

displayValue



- Type: Boolean or String (

'true' or 'false'

)

- Default:

true



- Description: Whether to display the value (text) below the barcode.



$3

- Prop:

text



- Type: String or Number

- Default:

undefined



- Description: Custom text to display under the barcode. If not set, the

value

 prop will be used.



$3

- Prop:

fontOptions



- Type: String

- Default:



- Description: Additional font options. Possible values include:

    -

 (default)

    -

'bold'

'italic'

'bold italic'





$3

- Prop:

font



- Type: String

- Default:

'monospace'



- Description: The font family for the text displayed below the barcode.



$3

- Prop:

textAlign



- Type: String

- Default:

'center'



- Description: The alignment of the text. Possible values:

    -

'left'

'center'

'right'





$3

- Prop:

textPosition



- Type: String

- Default:

'bottom'



- Description: The position of the text relative to the barcode. Possible values:

    -

'top'

'bottom'





$3

- Prop:

textMargin



- Type: Number or String

- Default:



- Description: The margin between the barcode and the text, in pixels.



$3

- Prop:

fontSize



- Type: Number or String

- Default:



- Description: The font size of the text displayed below the barcode, in pixels.



$3

- Prop:

background



- Type: String

- Default:

'#ffffff'



- Description: The background color of the barcode.



$3

- Prop:

lineColor



- Type: String

- Default:

'#000000'



- Description: The color of the bars in the barcode.



$3

- Prop:

margin



- Type: Number or String

- Default:



- Description: The margin around the barcode, in pixels. This sets all margins (top, bottom, left, right) to the same value.



$3

- Prop:

marginTop



- Type: Number or String

- Default:

undefined



- Description: The top margin of the barcode, in pixels. If not set, the value of

margin

 prop is used.



$3

- Prop:

marginBottom



- Type: Number or String

- Default:

undefined



- Description: The bottom margin of the barcode, in pixels. If not set, the value of

margin

 prop is used.



$3

- Prop:

marginLeft



- Type: Number or String

- Default:

undefined



- Description: The left margin of the barcode, in pixels. If not set, the value of

margin

 prop is used.



$3

- Prop:

marginRight



- Type: Number or String

- Default:

undefined



- Description: The right margin of the barcode, in pixels. If not set, the value of

margin

 prop is used.



$3

- Prop:

flat



- Type: Boolean

- Default:

false



- Description: Renders the barcode flat without any background. Useful when rendering on transparent backgrounds.



$3

- Prop:

ean128



- Type: Boolean or String (

'true' or 'false'

)

- Default:

false



- Description: If set to true, uses the FNC1 character in Code 128 barcodes to encode GS1-128 (EAN-128) barcodes.



$3

- Prop:

elementTag



- Type: String

- Default:

'svg'



- Description: The HTML tag to use for rendering the barcode. Possible values:

    -

'svg'

 (default)

    -

'canvas'

'img'





Usage:

vue





Examples



$3

vue

$3

vue

$3

vue

$3

vue

License

MIT

Note: This component is a wrapper around JsBarcode. For more advanced usage and barcode formats, refer to the JsBarcode documentation.

vue-jsbarcode

Vue 3 Barcode Generator Component - wrapper for JsBarcode

Table of Contents

Features

Installation

Usage

$3

$3

$3

$3

Available Props

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

Examples

$3

$3

$3

$3

License

vue-jsbarcode

Vue 3 Barcode Generator Component - wrapper for JsBarcode

Table of Contents

Features

Installation

Usage

$3

$3

$3

$3

Available Props

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

Examples

$3

$3

$3

$3

License