Detect and decode QR codes using a Vue.js component

vue-qrcode-reader

A Vue.js component, accessing the device camera and allowing users to read QR codes, within the browser.

Visit the page below to scan a QR* code through your camera and read on your display where it leads to. The user has to be asked for camera access permission first and the camera stream has to be loaded. Demo Page

* Click the link if you want to know more about building a QR scanner in a React Native Camera Tutorial*.

How it works

Once a stream from the user's camera is loaded, it is displayed and continuously scanned for QR codes. Results are indicated by the decode event.

Events

  • decode
  • locate - is an array of coordinates (for example { x: 278, y: 346 }) of the QR codes corners, emitted whenever the coordinates change or no QR code is detected anymore, resulting in an empty array payload.
  • init - emitted as soon as the component is mounted

Camera access permission can't really be requested a second time. Once denied, it can only be re-granted in the browser settings.

It might take a while before the component is ready and the scanning process starts. The user has to be asked for camera access permission first and the camera stream has to be loaded.

Installation & Usage

yarn add vue-qrcode-reader
# or
npm install --save vue-qrcode-reader

Register component globally:

import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader'

Vue.use(VueQrcodeReader)

A CSS file is included when importing the package. You may have to setup your bundler to embed the CSS in your page.

Note: In Chrome, this component only works with HTTPS (or localhost)

This project is open-source under an MIT License.