VUE: How to Use QRcode or vue-qr to generate a QR code

Here are two methods for Vue to generate QR codes

• QRcode
• vue-qr

vue-qr has more functions than QRcode: logo can be added in the middle

QRcode¶

npm¶

npm install qrcodejs2

import¶

Import on the required page

import QRCode from'qrcodejs2'

use¶

<div class="qrcode" ref="qrCodeUrl"></div>
<script>
methods: {
creatQrCode() {
  var qrcode = new QRCode(this.$refs.qrCodeUrl, {
      text: 'xxxx',
      width: 100,
      height: 100,
      colorDark: '#000000',
      colorLight: '#ffffff',
      correctLevel: QRCode.CorrectLevel.H
 })
},
}

mounted() {
       this.creatQrCode();
    },
</script>

vue-qr¶

npm¶

npm install vue-qr --save

use¶

<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
<script>
  import vueQr from 'vue-qr'
  export default {
    name: "qecode",
    data() {
      return {
        imageUrl: require("../assets/logo.png"),
      }
    },
    components: {
      vueQr
    },
    },
  }
</script>

Is it much simpler than qrcode, but there are still differences between the two styles of generating QR codes.

Note: It should be noted that the referenced img path must be added with require