Read

QrcodeDropZone Component

Learn how to read QRCodes by dropping files.

`QrcodeDropZone`

The QrcodeDropZone component lets you read and decode QRCodes and various other barcodes by dropping files onto a designated area. It processes the files locally on the client, without uploading them.

Scanned QRCodes:

<template>
  <div class="min-w-full h-fit">
    <div class="h-24 w-full">
      <QrcodeDropZone
        class="border size-full px-2 py-1 border-gray-300 rounded-lg"
        @detect="onDetect"
        @dragover="onDropping"
      />
    </div>
    <div class="pt-4">
      <h5>
        Scanned QRCodes: {{ isDropping ? 'Dropping...' : '' }}
      </h5>
      <ul v-if="result" class="list-disc pl-4">
        <li v-for="(r, i) in result" :key="i">
          <span class="text-wrap wrap-anywhere">
            {{ r }}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { DetectedBarcode } from 'nuxt-qrcode'

const toast = useToast()

const result = ref<string[]>()
const isDropping = ref(false)

function onDetect(detectedCodes: DetectedBarcode[]) {
  result.value = detectedCodes.map((code) => {
    toast.add({
      title: 'Detected',
      description: `Value: ${code.rawValue}`,
      actions: [
        {
          label: 'Copy',
          onClick: () => {
            navigator.clipboard.writeText(code.rawValue)
          },
        },
      ],
    })
    return code.rawValue
  })
}

function onDropping(dropping: boolean) {
  isDropping.value = dropping
}
</script>

QrcodeCapture Component

Learn how to read QRCodes from a file input.