Vue Component For Awesome-qr.js QR Code Generator

Install & Download:

npm install vue-qr --save

Description:

A Vue2/Vue3/Vite Component for SumiMakito’s Awesome-qr.js, which helps you create an awesome QR code generator in your app.

How to use it:

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="VueScript.Com"></vue-qr>

3. Full 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"
}