Vue3 Barcode and QR code scanner


A Vue.js set of components to scan barcodes and QR codes.

Benefits

- Can scan both barcodes and QR codes
- Uses ZXing ("zebra crossing"), an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.

Demo

Codesandbox


Repository

Installation

The easiest way to use Vue Barcode Reader is to install it from npm or yarn.

``sh
npm install vue3-barcode-qrcode-reader --save
`

Or

`sh
yarn add vue3-barcode-qrcode-reader
`

$3

For Vue 2.0 compatible version please use the vue-barcode-reader.

Usage

The Vue3 Barcode and QR code scanner works out of the box by just including it.

$3

Once a stream from the users camera is loaded, it's displayed and continuously scanned for barcodes. Results are indicated by the decode event.

`js
import { StreamQrcodeBarcodeReader, IconCameraVue } from 'vue3-barcode-qrcode-reader'
`

In your template you can use this syntax:

`html
capture="shoot"
@loaded="onLoaded"
@onloading="onLoading"
@result="onResult"
/>
`

$3

`html
capture="shoot"
@onloading="onLoading"
@result="onResult"
class="rounded-2xl"
>




`

Implementation use Ref component

$3

`ts

`

$3

`html

`

Props

| Parameter | value | Type | Description |
| :------------: | :-----------------: | :-----: | ------------------------------------------------------------------------------------------------------- |
| show-on-stream | true or false | Boolean | Props for show or hide button stream if you want implementation use Ref component or maybe another case |
| capture | "shoot" or "stream" | emun | Props capture |

$3

When the barcode or QR code is successfully scanned, the scanning process will stop.

$3

When the barcode or QR code is successfully scanned, the scanning process will not stop.

---

Slot

| Parameter | value | Type | Description |
| :--------------: | :----------------------------: | :-------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| #actions | {onCanPlay, isReset, onReset } | func & boolean & func | onCanPlay func for start stream camera & isReset state for handle show or hide button reset & onReset func for handle reset value Result |
| #action-stop | {onCanStop} | func | function for hanlde stop stream camera |
| #action-facemode | {onChangeFacemode} | func | function for hanlde switch camera on mobile |

Events

The library emits the following events:

| Parameter | type |
| :-------: | :---------------: |
| loaded | function |
| onloading | function(payload) |
| result | function(payload) |

$3

When the libraty is loaded and the camera is ready to scan

onloading

for get value loading from component.

#### .js

`js
const isLoading = ref(false)
function onLoading(loading) {
isLoading.value = loading
}
`

#### .ts

`ts
const isLoading = ref(false)
function onLoading(loading: boolean) {
isLoading.value = loading
}
`

$3

When a barcode or QR code is scanned. The result is passed as a parameter to the event handler. The result is the object with the following properties:

`js
//example
{
"text": "9578545203541",
"rawBytes": null,
"numBits": 0,
"resultPoints": [
{
"x": 29.5,
"y": 1016
},
{
"x": 394.5,
"y": 1016
}
],
"format": 7,
"timestamp": 1700195512963,
"resultMetadata": null
}
`

If you want to implement it in your code, you can follow this example:

$3

`js
const resultScan = ref(undefined)
function onResult(result) {
resultScan.value = result
}
`

$3

`ts
import type { Result } from 'vue-barcode-reader'
const resultScan = ref(undefined)
function onResult(result: Result | undefined) {
resultScan.value = result
}
`

`html



{{ resultScan }}



``