Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue3-barcode-qrcode-reader

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-barcode-qrcode-reader - npm Package Compare versions

Comparing version 1.0.14 to 1.0.15

7

package.json
{
"name": "vue3-barcode-qrcode-reader",
"version": "1.0.14",
"version": "1.0.15",
"description": "Vue 3 barcodes and QR codes scanner",

@@ -44,4 +44,5 @@ "type": "module",

"@zxing/library": "^0.20.0",
"vue": "^3.3.4",
"vue-demi": "^0.14.6"
"vue": "^3.3.11",
"vue-demi": "^0.14.6",
"vue-router": "^4.2.5"
},

@@ -48,0 +49,0 @@ "devDependencies": {

@@ -94,7 +94,92 @@ # Vue3 Barcode and QR code scanner

## Implementation use Ref component
### Script
```ts
import { ref } from 'vue'
import { type Result, StreamQrcodeBarcodeReader } from 'vue-barcode-reader'
const decode = ref<Result | undefined>(undefined)
const isLoading = ref<boolean>(false)
function onResult(data: Result | undefined): void {
decode.value = data
}
function onLoading(loading: boolean) {
isLoading.value = loading
}
// define ref for component
const refCamera = ref<InstanceType<typeof StreamQrcodeBarcodeReader> | null>(null)
function handleOnCanPlay() {
refCamera.value?.onCanPlay()
}
function handleOnReset() {
refCamera.value?.onReset()
}
function handleFacemode() {
refCamera.value?.onChangeFacemode()
}
function handleOnCanStop() {
refCamera.value?.onCanStop()
}
```
### HTML
```html
<div class="flex justify-center items-center mt-10">
<template v-if="isLoading">
<button class="bg-yellow-300 px-6 py-1 rounded-md me-4" @click="handleFacemode">
Facemode
</button>
<button class="bg-red-300 px-6 py-1 rounded-md" @click="handleOnCanStop">Stop</button>
</template>
<template v-else>
<button class="bg-green-300 px-6 py-1 rounded-md" @click="handleOnCanPlay">Stream</button>
<button v-if="decode" class="bg-blue-300 px-6 py-1 rounded-md" @click="handleOnReset">
Reset
</button>
</template>
</div>
<div class="flex flex-col items-center justify-center mt-6">
<pre>Result:{{ decode }}</pre>
<div class="phone mt-6">
<div class="notch-container">
<div class="notch"></div>
</div>
<div class="content">
<template v-if="!isLoading">
<h1 class="text-xl mb-2">Reader Barcode & QRCode</h1>
<h2 class="text-base text-red-500 capitalize mb-4">mode: shoot</h2>
</template>
<StreamQrcodeBarcodeReader
ref="refCamera"
capture="shoot"
show-on-stream
@onloading="onLoading"
@result="onResult"
/>
</div>
</div>
</div>
```
## Props
| Parameter | value | Type | Description |
| :-------: | :-----------------: | :--: | ------------- |
| capture | "shoot" or "stream" | emun | Props capture |
| 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 |

@@ -195,3 +280,3 @@ ### shoot

```ts
import { Result } from 'vue-barcode-reader'
import type { Result } from 'vue-barcode-reader'
const resultScan = ref<Result | undefined>(undefined)

@@ -198,0 +283,0 @@ function onResult(result: Result | undefined) {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc