Press "Enter" to skip to content

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


See Demo And Download

Official Website(Binaryify): Click Here

This superior jQuery/javascript plugin is developed by Binaryify. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.