Reader Barcode & QRCode
mode: shoot
capture="shoot"
show-on-stream
@onloading="onLoading"
@result="onResult"
/>
Vue 3 barcodes and QR codes scanner

A Vue.js set of components to scan barcodes and QR codes.
- 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.
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
For Vue 2.0 compatible version please use the vue-barcode-reader.
The Vue3 Barcode and QR code scanner works out of the box by just including it.
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`
@loaded="onLoaded"
@onloading="onLoading"
@result="onResult"
/>
`html
@onloading="onLoading"
@result="onResult"
class="rounded-2xl"
>
class="bg-red-300 w-10 h-10 p-2 inline-flex justify-center items-center rounded-full"
@click="onChangeFacemode"
>
`
`ts`
` html
Result:{{ decode }}
capture="shoot"
show-on-stream
@onloading="onLoading"
@result="onResult"
/>
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 }}
``