@alzera/vue-scanner v1.0.0

Vue QR Scanner

@alzera/vue-scanner is a lightweight and simple-to-use Vue library for integrating QR code scanning functionality into your web applications. The primary goal of this library is to provide a hassle-free solution for developers who need a quick and efficient way to incorporate QR code scanning without the bloat.

Features

• Lightweight: Keep your web application nimble with a minimalistic QR code scanning solution.
• Simplicity: Easy-to-use API designed for developers of all skill levels.
• Legacy: Support image input as camera fallback.
• Customizable: Tailor the scanner's appearance to suit your application's needs.

Installation

Install @alzera/vue-scanner using your preferred package manager:

npm install @alzera/vue-scanner

Components

QRScanner

Combined version of Scanner component and DropZone component, comes with a built-in button that allows users to switch between the scanning mode and the drop zone mode.

Basic Example

<script setup>
import { BarcodeScanner } from '@alzera/vue-scanner'
import '@alzera/vue-scanner/style.css'

const scan = ref('')
</script>

<template>
  <div>
    <BarcodeScanner @scan="(v) => scan = v" />
    <p v-if="scan">Scanned Data: {{ scan }}</p>
  </div>
</template>

<style scoped>
div {
  max-width: 500px;
}
</style>

Slots

Events

Properties

Scanner

Simple component wrapper for barcode-detector library.

Basic Example

<script setup>
import { Scanner } from '@alzera/vue-scanner/vue'
import '@alzera/vue-scanner/vue/vue-scanner.css'

const scan = ref('')
</script>

<template>
  <div>
    <Scanner @scan="(v) => scan = v" />
    <p v-if="scan">Scanned Data: {{ scan }}</p>
  </div>
</template>

<style scoped>
div {
  max-width: 500px;
}
</style>

Events

Properties

DropZone

Simple component wrapper for barcode-detector library.

Basic Example

<script setup>
import { DropZone } from '@alzera/vue-scanner/vue'
import '@alzera/vue-scanner/vue/vue-scanner.css'

const scan = ref('')
</script>

<template>
  <div>
    <DropZone @scan="(v) => scan = v" />
    <p v-if="scan">Scanned Data: {{ scan }}</p>
  </div>
</template>

<style scoped>
div {
  max-width: 500px;
}
</style>

Slots

Content of drop zone, inside the border

Events

Properties

Contributing

We welcome contributions! Feel free to open issues, create pull requests, or provide feedback.

Happy scanning! 📷 🚀