VueJS Sample To Generate QR Code Using VueQrcode

In this article, we are going to explore the 'vue-qrcode' plugin by integrating it into our sample VueJS application.

Create A Vue Sample App:

Let's use the following command to create a VueJS application.

Command To Install Vue CLI Globally On Your System:

npm run -g @vue/cli

Command To Create Vue App:

vue create your_application_name

After creating a sample application run the following command to start the application.

Command To Run Vue App:

npm run serve

Install vue-qrcode NPM Package:

Run the following npm package commands to install QRcode packages

Command For VueQRCode:

npm install vue-qrcode

Command For QRCode(VueQRCode depends on QRCode package)

npm install qrcode

After installing npm packages references will be added to package.json

vue-qrcode Key Properties:

The 'vue-qrcode' provides a configurable vue component to render the QR Code. The following key properties:

• errorCorrectionLevel
• margin
• scale
• width
• color
• type
• value
• color

Import VueQrCode Component:

Configuring the QR Code component involves fairly simple steps as follow:

src/components/HelloWorld.vue:

<template>
  <div>
    <vue-qrcode v-bind:value="qrValue" />
  </div>
</template>

<script>
import VueQrcode from 'vue-qrcode'
export default {
  name: 'HelloWorld',
  components:{
   VueQrcode
  },
  data(){
    return{
      qrValue : "My secret value"
    }
  }
}
</script>

• (Line: 3) '<vue-qrcode>' Qrcode template HTML. The 'value' property is the heart of the VueQrcode component where we have to pass our sensitive data that will be generated as Qr Code.
• (Line: 8) 'VueQrcode' plugin component imported.
• (Line: 12) registered 'VueQrcode' component.
• (Line: 16) our custom property 'qrValue' this will be passed as input value to 'value' property of the '<vue-qrcode>' component.

Now run the application, then QR Code renders as below:

Now scan the barcode using our mobile devices, if your mobile doesn't have an inbuilt scanner there are so many free scanners can be download. The output of the scanned QR Code as below.

errorCorrectionLevel Input Parameter:

QR Codes in the physical environment is their ability to sustain "damage" and continue to function even when the part of the QR Code image is obscured, defaced, or removed. So we can determine or set the QR Code image to work with a range of parameters using the 'error correction level'.

There are 4 error correction levels used for QR codes, with each one adding different amounts of "backup" data depending on how much damage the QR code is expected to suffer in its intended environment, and hence how much error correction may be required.

• Level L- up to 7% damage.
• Level M - up to 15% damage.
• Level Q - up to 25% damage.
• Level H - up to 30% damage.

src/components/HelloWord.vue:

<template>
  <div>
    <vue-qrcode 
    v-bind:value="qrValue"
    v-bind:errorCorrectionLevel="correctionLevel" />
  </div>
</template>
<script>
export default {
  // code hidden for display purpose
  data(){
    return{
      qrValue : "My secret value",
      correctionLevel:"H"
    }
  } 
}
</script>

• (Line: 5) 'errorCorrectionLevel' is the VueQrcode component input parameter.
• (Line: 14) "H" represents a "High" level of error correction.

margin Input Property:

Margin to left by the QR Code on rendering. Its default margin value is '4'.

src/components/HelloWorld.vue:

<template>
  <div>
    <vue-qrcode 
    v-bind:value="qrValue"
    v-bind:errorCorrectionLevel="correctionLevel"
    v-bind:margin="qrMargin" />
  </div>
</template>

<script>
// code hidden for display purpose
import VueQrcode from 'vue-qrcode'
export default {
  data(){
    return{
      qrMargin: 100
    }
  }
}
</script>

• (Line: 6) 'margin' input property of the VueQrcode component.

scale Input Property:

The 'scale' property to define the size of lines or scales of the QR Code. Its default value is '4'.

src/component/HelloWorld.vue:

<template>
  <div>
    <vue-qrcode 
    v-bind:value="qrValue"
    v-bind:scale="qrScale"/>
  </div>
</template>

<script>
import VueQrcode from 'vue-qrcode'
export default {
  data(){
    return{
      qrValue : "My secret value",
      qrScale: 15
    }
  } 
}
</script>

color InputProperty:

The 'color' input property of the VueQrCode component accepts an object with two props like 'dark' and 'light'. The 'dark' property is to change the color of the lines of QR Code and the 'light' property is to change the color of the background.

src/component/HelloWorld.vue:

<template>
  <div>
    <vue-qrcode 
    v-bind:value="qrValue"
    v-bind:color="qrColor"/>
  </div>
</template>

<script>
export default {
  data(){
    return{
      qrValue : "My secret value
      qrColor:{
        dark:"#8DFF33",
        light:"#00FFFF"
      }
    }
  }
}
</script>

Support Me!
Buy Me A Coffee PayPal Me

Wrapping Up:

Hopefully, I think this article delivered some useful information on creating a QR Code generator in the VueJS application. I love to have your feedback, suggestions, and better techniques in the comment section below.

Follow Me:

Facebook

Twitter

Pinterest