Vue.js components for detecting and decoding QR codes

Vue.js components for detecting and decoding QR codes

Apr 13, 2019 / Ramesh Mhetre

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) {
    // ...
  }
}


Here is the installation guide for this package.



Similar Articles

VueJs content loading placeholders

VueJs content loading placeholders

Vue Content Loading is a component to use placeholder or preset.
Read more...
Compiling assets with Laravel Mix

Compiling assets with Laravel Mix

Laravel Mix provides a fluent API for defining Webpack build steps
Read more...