Vue.js Wrapper for AwesomeQR.js

vue-qr

Grab this QRCode Component, to generate your own unique codes. This Vue component is based on Awesome-qr.js, another QR code generator written in JavaScript. You can find more information on QRCodes and the use of these, here.

Using this component you can add contents to encode and url to embed in the QR code, colors and background images. Here is some variations:

Example

Install

yarn add vue-qr

Usage

Register the component

import VueQr from 'vue-qr'

Vue.component('vue-qr', VueQr)

Pass your options like text, the string to generate QR Code and bgSrc background url to embed in the QR code in the markup.

<template>
<div id="app">
    <vue-qr 
        :bgSrc='src' 
        :logoSrc="src2" 
        text="This is going to encode" 
        colorDark="#3a683f"
    ></vue-qr>
</div>
</template>

Don't to forget to pass in your data any binded values you may have.

The above will display a QR code in this manner:

Additional Parameters:

  • text | Contents to encode.
  • size | Width as well as the height of the output QR code, includes margin.
  • margin | Margin to add around the QR code.
  • colorDark | Color of "true" blocks. Works only when both colorDark and colorLight are set.
  • colorLight | Color of empty space, or "false" blocks. Works only when both colorDark and colorLight are set.
  • bgSrc | Background url to embed in the QR code.
  • backgroundDimming | Color mask to add above the background image. Helpful when having problems with decoding.
  • logoSrc | Logo url to embed at the center of generated QR code.
  • logoScale | Value used to scale the logo image. Larger value may result in decode failure. Size of the logo equals to logoScale*(size-2*margin). Default is 0.2f.
  • logoMargin | White margin that appears around the logo image. Default is 0.
  • logoCornerRadius | Radius of the logo's corners.Default is 0 LOGO
  • whiteMargin | If set to true, a white border will appear around the background image. Default is true.
  • dotScale | Value used to scale down the data dots' size. (0 < scale < 1.0f)
  • autoColor | If set to true, the dominant color of backgroundImage will be used as colorDark. Default is true.
  • binarize | If set to true, the whole image will be binarized with the given threshold, or default threshold if not specified.
  • binarizeThreshold | Threshold used to binarize the whole image. Default is 128. (0 < threshold < 255)
  • callback | Data URI of the generated QR code will be available here.

That's it! Check out GitHub for more options where you will also find the source code.