A lightweight and simple-to-use Vue library for integrating QR code scanning functionality into your web applications.
npm install @alzera/vue-scannerCombined version of Scanner component and DropZone component, comes with a built-in button that allows users to switch between the scanning mode and the drop zone mode.
<script setup>
import { BarcodeScanner } from '@alzera/vue-scanner'
import '@alzera/vue-scanner/style.css'
const scan = ref('')
</script>
<template>
<div>
<BarcodeScanner @scan="(v) => scan = v" />
<p v-if="scan">Scanned Data: {{ scan }}</p>
</div>
</template>
<style scoped>
div {
max-width: 500px;
}
</style>| Name | Type | Description |
|---|---|---|
| decoderOptions | BarcodeDetectorOptions | Exposed BarcodeScanner config, more on here. |
Scan barcode from camera stream.
<script setup>
import { Scanner } from '@alzera/vue-scanner/vue'
import '@alzera/vue-scanner/vue/vue-scanner.css'
const scan = ref('')
</script>
<template>
<div>
<Scanner @scan="(v) => scan = v" />
<p v-if="scan">Scanned Data: {{ scan }}</p>
</div>
</template>
<style scoped>
div {
max-width: 500px;
}
</style>| Name | Type | Description |
|---|---|---|
| decoderOptions | BarcodeDetectorOptions | Exposed BarcodeScanner config, more on here. |
Scan barcode from image input.
<script setup>
import { DropZone } from '@alzera/vue-scanner/vue'
import '@alzera/vue-scanner/vue/vue-scanner.css'
const scan = ref('')
</script>
<template>
<div>
<DropZone @scan="(v) => scan = v" />
<p v-if="scan">Scanned Data: {{ scan }}</p>
</div>
</template>
<style scoped>
div {
max-width: 500px;
}
</style>Content of drop zone, inside the border
| Name | Type | Description |
|---|---|---|
| decoderOptions | BarcodeDetectorOptions | Exposed BarcodeScanner config, more on here. |
Hook for creating a decoder instance.
<script setup>
import { useDecoder } from '@alzera/vue-scanner'
const decoder = useDecoder()
</script>| Name | Type | Description |
|---|---|---|
| opts | BarcodeDetectorOptions | Exposed BarcodeScanner config, more on here. |
We welcome contributions! Feel free to open issues, create pull requests, or provide feedback. Happy scanning! 📷 🚀
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent