A set of Vue.js components for detecting and decoding QR codes.
npm install qrcode-reader-vue3QrcodeStream accesses the device camera and continuously scans incoming frames.
QrcodeDropZone renders to an empty region where you can drag-and-drop images to be decoded.
QrcodeCapture is a classic file upload field, instantly scanning all files you select.
html
`
`js
methods: {
onDecode (decodedString) {
// ...
}
}
`
$3
Please donate algorand to support this project:
$3
qrcode reader vue3 is used for example in this production environment: Algorand Wallet - https://github.com/scholtz/wallet/blob/master/src/pages/Pay.vue
$3
Installation :package:
With NPM
Run
`bash
npm install --save qrcode-reader-vue3
`
If you are looking for QR Code generator, see qrcode-vue3 project
`bash
npm install --save qrcode-vue3
`
You can import the components independantly
`javascript
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'qrcode-reader-vue3'
const MyComponent = {
components: {
QrcodeStream,
QrcodeDropZone,
QrcodeCapture
},
// ...
))
`
or register all of them globally right away
`javascript
import Vue from "vue";
import QrcodeReaderVue3 from "qrcode-reader-vue3";
Vue.use(QrcodeReaderVue3);
`
Without NPM
Include the following JS file:
https://unpkg.com/qrcode-reader-vue3/dist/QrcodeReaderVue3.umd.min.js
Make sure to include it after Vue:
`html
`
All components are automatically registered globally.
Use kebab-case to reference them in your templates:
`html
`
Troubleshooting :zap:
#### I don't see the camera when using QrcodeStream.
- Check if it works on the demo page. Especially the Decode All demo, since it renders error messages. If you see errors, consult the docs to understand their meaning.
- The demo works but it doesn't work in my project: Listen for the init` event to investigate errors.