Vue.js components for detecting and decoding QR codes

Vue.js components for detecting and decoding QR codes

2019-04-14T17:24:32.000Z

A set of Vue.js components, allowing you to detect and decode QR codes, without leaving the browser.

  • QrcodeStream 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.

All components are responsive. Beyond that, close to zero styling. Make them fit your layout. Usage is simple and straightforward:

<qrcode-stream @decode="onDecode"></qrcode-stream>

Get decoded string.

methods: {
  onDecode (decodedString) {
    <span class="hljs-meta">// ...
  }
}

Here is the installation guide for this package.