Vue QR Code Generator Component Awesome-qr.js Library

vue-qr is a Vue2/Vue3/Vite component of SumiMakito’s Awesome-qr.js, which helps you create an awesome QR code generator in your app.

free qr code generator, qr code generator with logo free download, best free qr code generator, best qr code generator

How to make use of it:

Install and download:

npm install vue-qr --save

1. Import and register the QR code generator.

// Vue 2
import VueQr from 'vue-qr'
// Vue 3
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
new Vue({
    components: {
      VueQr
    }
})

2. Add the <vue-qr /> component to the template.

<vue-qr text="webcodeflow.com"></vue-qr>

3. Complete component props to customize the QR code.

text: {
  type: String,
  required: true
},
qid: {
  type: String
},
correctLevel: {
  type: Number,
  default: 1 // 0-3
},
size: {
  type: Number,
  default: 200
},
margin: {
  type: Number,
  default: 20
},
colorDark: {
  type: String,
  default: "#000000"
},
colorLight: {
  type: String,
  default: "#FFFFFF"
},
bgSrc: {
  type: String,
  default: undefined
},
background: {
  type: String,
  default: "rgba(0,0,0,0)"
},
backgroundDimming: {
  type: String,
  default: "rgba(0,0,0,0)"
},
logoSrc: {
  type: String,
  default: undefined
},
logoBackgroundColor: {
  type: String,
  default: "rgba(255,255,255,1)"
},
gifBgSrc: {
  type: String,
  default: undefined
},
logoScale: {
  type: Number,
  default: 0.2
},
logoMargin: {
  type: Number,
  default: 0
},
logoCornerRadius: {
  type: Number,
  default: 8
},
whiteMargin: {
  type: [Boolean, String],
  default: true
},
dotScale: {
  type: Number,
  default: 1
},
autoColor: {
  type: [Boolean, String],
  default: true
},
binarize: {
  type: [Boolean, String],
  default: false
},
binarizeThreshold: {
  type: Number,
  default: 128
},
callback: {
  type: Function,
  default: function() {
    return undefined;
  }
},
bindElement: {
  type: Boolean,
  default: true
},
backgroundColor: {
  type: String,
  default: "#FFFFFF"
}

Vue Component For Awesome-qr.js QR Code Generator, vue-qr Plugin/Github