vue-qr

The Vue Component for SumiMakito's Awesome-qr.js. Support Vue2/Vue3/Vite

The only one qr code component for Vue.js you need !

Notice

Not support IE IE

Examples,

Try to scan these QR codes below with your smart phone.

Example 1	Example 2	Example 3	Example 4

Demo

Run npm run dev or yarn dev

npm run dev or yarn dev

Installation

install with NPM

npm install vue-qr --save

Import

// vue2.0
import VueQr from 'vue-qr'

// vue3.0 (support vite)
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
...
{
  components: {VueQr}
}

Usage

In template

<vue-qr text="Hello world!"></vue-qr>
<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" :size="200"></vue-qr>
<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>

export default {
    methods:{
        test(dataUrl,id){
            console.log(url, id)
        }
    }
}

Parameter	Explanation
text	Contents to encode.
correctLevel	Correct Level 0-3 0-3
size	Width as well as the height of the output QR code, includes margin. , ,
margin	Margin to add around the QR code, default 20px. , 20px
colorDark	Color of "true" blocks. Works only when both colorDark and colorLight are set. (BYTE_DTA, BYTE_POS, BYTE_AGN, BYTE_TMG)
colorLight	Color of empty space, or "false" blocks. Works only when both colorDark and colorLight are set. (BYTE_EPT)
components	Controls the appearances of parts in the QR code. Read section ComponentOptions to learn more. ComponentOptions
bgSrc	Background url to embed in the QR code.
gifBgSrc	Gif background url to embed in the QR code, If gifBackground is set, backgroundImage will be ignored. This option will affects performance. gif ,
backgroundColor	Background color
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 LOGO
logoScale	Value used to scale the logo image. Larger value may result in decode failure. Size of the logo equals to `logoScale(size-2margin)`. Default is 0.2. LOGO , , LOGO `logoScale(size-2margin)`, 0.2
logoMargin	White margin that appears around the logo image. Default is 0. LOGO , 0
logoBackgroundColor	Logo background color, need set logo margin. Logo , logo margin
logoCornerRadius	Radius of the logo's corners.Default is 0 LOGO , 0
whiteMargin	If set to true, a white border will appear around the background image. Default is true. true,
dotScale	Value used to scale down the data dots' size. (0 < scale < 1.0) default 1 ,1
autoColor	If set to true, the dominant color of backgroundImage will be used as colorDark. Default is true. true, , colorDark, true
binarize	If set to true, the whole image will be binarized with the given threshold, or default threshold if not specified. Default is false. true, ,
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. Data URI , data URL, props qid(, id )
bindElement	If set to true, the generated QR will bind to a HTML element automatically. Default is true. HTML, true

ComponentOptions

ComponentOptions controls the appearances of parts in the QR code.

type ComponentOptions = {
  data?: {
    scale?: number;
  };
  timing?: {
    scale?: number;
    protectors?: boolean;
  };
  alignment?: {
    scale?: number;
    protectors?: boolean;
  };
  cornerAlignment?: {
    scale?: number;
    protectors?: boolean;
  };
};

// default ComponentOptions

{
  data: {
    scale: 1,
  },
  timing: {
    scale: 1,
    protectors: false,
  },
  alignment: {
    scale: 1,
    protectors: false,
  },
  cornerAlignment: {
    scale: 1,
    protectors: true,
  },
}