Vue.js components for detecting and decoding QR codes


Decode QR-code in your VueJs application

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.

As a developer, I always see the problem for creating images/banners whenever I post some content online.

Even for simple designs I always needed to open figma or search online, so I thought of automating it.

I've build BannerPot to solve this problem, would you like to give it a try?

Ramesh from BannerPot

Ramesh Mhetre

Maker of BannerPot