CODEWITHSUNDEEP
nativescript-vue
Ron Millano Querimit
Ron Millano Querimit

Reputation: 83

NativeScript-vue Barcode creation

Hi i would like to ask if there is anyway to create a barcode in nativescript-vue, there is a lot of vue js example of creating barcode but im not equipped to translate or convert the codes. is there anyone can give me an example of creating barcode on nativescript-vue? thank you.

Upvotes: 0

Views: 372

Answers (1)

Madhuri kulkarni
Madhuri kulkarni

Reputation: 95

You can use nativescript-qr-generator & nativescript-base-64-manager.

The base-64 only if you want to convert the QR code as a base-64.

Import it in your template:

import { QrGenerator } from "nativescript-qr-generator";
import { Base64Manager } from "nativescript-base-64-manager";

You would need a data property generatedQR: null and then you would need a method to generate QR. So the QR code is generated and then then your code value is converted to the base64 value. You can also append any data to the result like an url for example: new QrGenerator().generate("url/" + _Base64Manager.btoa(this.code)

 generateQR() {
      const _Base64Manager = new Base64Manager();
      const result = new QrGenerator().generate( _Base64Manager.btoa(this.code),
        {
          color: "#your_color",
          backgroundColor: "#your_color"
        }
      );
      this.generatedQR = new ImageSource(result);
    }

and in template you will have the QR code like an image:

<Image :src="generatedQR" row="4" imageFit="aspectFill"/>

Upvotes: 1

Related Questions