Vue.js Wrapper for AwesomeQR.js
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:
yarn add vue-qr
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:
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.