QrcodeCapture

Browser Support

The newest API this component depend on is the FileReader API. Vue Native is not supported (see #206).

10+	Yes	Yes	Yes	Yes¹

1. It doesn't work in web apps added to home screen (PWA mode) on iOS prior to 11.3 (see this StackOverflow question)

Events

detect

• Payload Type: DetectedBarcode[]

The component renders to a simple file picker input element. Clicking opens a file dialog. On supporting mobile devices the camera is started to take a picture. The selected images are directly scanned and positive results are indicated by the detect event. You can also select multiple images at the same time (still one event per image though). If no QR code can be recognized an empty array is emitted.

The structure of the event payload is the same as for the detect event on QrcodeStream.

decode removed in v5.0.0

Use detect instead. TODO: link old docs.

Props

formats since v5.3.0

• Payload Type: BarcodeDetectorOptions['formats']
• Default: ['qr_code']

The formats prop defines which barcode formats are detected. Supported Formats.

<qrcode-capture :formats="['qr_code', 'code_128']"></qrcode-capture>

disabled, capture, multiple, ...

Technically, QrcodeCapture does not explicitly define any other props. But checkout the components template:

<template>
  <input
    @change="onChangeInput"
    type="file"
    name="image"
    accept="image/*"
    capture="environment"
    multiple
  />
</template>

Because the input element is the root element of the component and because Vue components accept fallthrough attributes you can make use of any valid input attribute:

<qrcode-capture disabled />

You can also override attributes. To remove attributes, set them to null:

<qrcode-capture :capture="null" />

Slots

no slots