vuejs

html5-qrcode with vue.js

vuejs.org | Support Level = Strong

How to create a vue.js component for html5-qrcode

Include the js library in your project

<script src="https://unpkg.com/html5-qrcode"></script>

Create a qrcode-scanner component

Vue.component('qrcode-scanner', {
  props: {
    qrbox: {
      type: Number,
      default: 250
    },
    fps: {
      type: Number,
      default: 10
    },
  },
  template: `<div id="qr-code-full-region"></div>`,
  mounted () {
    const config = {
      fps: this.fps,
      qrbox: this.qrbox,
    };
    const html5QrcodeScanner = new Html5QrcodeScanner('qr-code-full-region', config);
    html5QrcodeScanner.render(this.onScanSuccess);
  },
  methods: {
    onScanSuccess (decodedText, decodedResult) {
      this.$emit('result', decodedText, decodedResult);
    }
  }
});

Usage

<template>
  <qrcode-scanner
    :qrbox="250" 
    :fps="10" 
    style="width: 500px;"
    @result="onScan"
  />
</template>

<script>
export default {
  methods: {
    onScan (decodedText, decodedResult) {
      // handle the message here :)
    }
  }
}
</script>

Contributors

Name	Profile
Jofferson Ramirez Tiquez	@jofftiquez