Use a plugin like barcodescanner in nativescript vue

Question

Im trying to use the barcodescanner plugin here with nativescript-vue so first i install it with npm like that in my project :

npm install nativescript-barcodescanner

then i register it in my src/main.js file :

Vue.registerElement('BarcodeScanner', () => require('nativescript-barcodescanner').BarcodeScanner)

And then i tried many ways to include the scanner in my vue component but i always get an error. Does anyone knows how to use this component with nativescript vue ?

as an xml component it return a frame error :

<BarcodeScanner
  class="scanner-round"
  formats="QR_CODE, EAN_13"
  beepOnScan="true"
  reportDuplicates="true"
  preferFrontCamera="false"
  (scanResult)="onScanResult($event)">
</BarcodeScanner>

Answer 1

In fact we need to use normal javascript require to use this barcodescanner plugin like that :

const BarcodeScanner = require("nativescript-barcodescanner").BarcodeScanner;

and then inside a computed method :

var barcodescanner = new BarcodeScanner();

and then use this class :

barcodescanner
    .scan(
        {
            // Enter here your scanner preferences
        }
    )
    .then(
        result => {
            // handle here the barcode result.
        }
    )