How to render QR code at center of the div in Vue platform

Syncfusion JavaScript Barcode control allows you to easily generate QRCode on your application.

To render QR code at center of the div, we need to follow the below steps.

Step 1: Create QR Code using QrCodeGenerator

You can use the Syncfusion Barcode control’s QrCodeGenerator to generate QR code.

Step 2: Add style to div

To center the QR Code add style to the div

.element {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 } 

Refer the code snippet below

App.vue

<template>
 <div id="app" class="barcodeStyle">
   <ejs-qrcodegenerator
     id="barcode"
     class="element"
     ref="barcodeControl"
     :width="width"
     :height="height"
     :displayText="displaytext"
     :value="value"
     :mode="mode"
   ></ejs-qrcodegenerator>
 </div>
</template>
<style>
 body {
   margin-top: 100px;
 }
 .barcodeStyle {
   height: 400px;
   width: 400px;
   background-color: #acf1e9;
   position: absolute;
 }
 .element {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
</style>
<script>
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-vue-barcode-generator';

export default {
 name: 'App',
 components: {
   'ejs-qrcodegenerator': QRCodeGeneratorComponent,
 },
 data() {
   return {
     width: '200px',
     height: '200px',
     displaytext: { text: 'Syncfusion' },
     mode: 'SVG',
     value: 'Syncfusion',
   };
 },
};
</script> 

Sample: Click here for sample