Vue Barcode and QR Code Scanner

1.0.3 · abandoned · verified Sun Apr 19

This library provides Vue.js components, `StreamBarcodeReader` and `ImageBarcodeReader`, enabling barcode and QR code scanning within web applications. It leverages the ZXing ("zebra crossing") image processing library for its core decoding capabilities, supporting various 1D and 2D formats from either a live video camera feed or uploaded image files. The current latest version, 1.0.3, was published approximately three years ago, with Vue 3 compatibility introduced in version 1.0.0. For applications requiring Vue 2 support, users must install version 0.0.3. While the package offers straightforward integration, community forks like `@teckel/vue-barcode-reader` describe this original package as abandoned, suggesting a lack of active maintenance and potential for unaddressed issues or performance improvements found in alternatives. TypeScript definitions are available via `@types/vue-barcode-reader` for better developer experience.

Common errors

```
ReferenceError: beforeDestroy is not defined
```
cause Attempting to use the Vue 2 lifecycle hook `beforeDestroy` in a Vue 3 application after upgrading `vue-barcode-reader` to v1.0.0 or higher.

fix Replace `beforeDestroy` with `beforeUnmount` in your Vue 3 components to align with the Vue 3 API.
```
[Vue warn]: Failed to resolve component: StreamBarcodeReader
```
cause The `StreamBarcodeReader` component (or `ImageBarcodeReader`) was not correctly imported or registered within your Vue component where it's being used.

fix Ensure you `import { StreamBarcodeReader } from 'vue-barcode-reader';` and include it in your component's `components` option: `{ components: { StreamBarcodeReader } }`.
```
NotAllowedError: Permission denied
```
cause The browser has denied access to the user's camera, which is required by `StreamBarcodeReader` to function.

fix Prompt the user for camera permissions, ensure your application is served over HTTPS (required by most browsers for camera access), and instruct users to manually grant camera access if they previously denied it.
```
TypeError: Cannot read properties of undefined (reading 'length')
```
cause This error was a common symptom of Vite compatibility issues in `vue-barcode-reader` versions prior to 1.0.1.

fix Upgrade your `vue-barcode-reader` package to version 1.0.1 or newer to benefit from Vite support fixes: `npm update vue-barcode-reader`.

Warnings

breaking With the release of v1.0.0, which added Vue 3 support, the lifecycle hook `beforeDestroy` was renamed to `beforeUnmount` to align with Vue 3's API changes.
Fix: Update any `beforeDestroy` hooks in your components to `beforeUnmount` when migrating to Vue 3 and using `vue-barcode-reader` v1.0.0 or higher.
gotcha This package (olefirenko/vue-barcode-reader) appears to be unmaintained, with its last update several years ago. Consider using actively maintained forks or alternatives like `@teckel/vue-barcode-reader` for better performance, bug fixes, and newer ZXing features.
Fix: For ongoing support and new features, evaluate migrating to `@teckel/vue-barcode-reader` or other actively maintained barcode scanning libraries for Vue.
gotcha For Vue 2.x compatible applications, you must use version `vue-barcode-reader@0.0.3`. Versions 1.0.0 and above are specifically designed for Vue 3.
Fix: Install the correct version for your Vue environment: `npm install vue-barcode-reader@0.0.3` for Vue 2, or `npm install vue-barcode-reader` (latest) for Vue 3.
gotcha The documentation states the `@decode` event emits the decoded text. However, a v1.0.3 changelog entry mentions "Emit whole result object." While the README still suggests text, there might be inconsistencies. Verify the payload of the `@decode` event in your specific version to ensure you are handling the expected data type (string or object).
Fix: Always log the `result` parameter passed to your `@decode` handler to confirm its structure. If you need the full result object, consider if the `@result` event is available in your version.
gotcha Early versions (pre-v1.0.1) of `vue-barcode-reader` had known issues with Vite. If you are using Vite and encountering build or runtime problems, ensure you are on v1.0.1 or newer.
Fix: Upgrade to `vue-barcode-reader@1.0.1` or a later version to resolve Vite compatibility issues: `npm update vue-barcode-reader`.

Install

npm install vue-barcode-reader npm
yarn add vue-barcode-reader yarn
pnpm add vue-barcode-reader pnpm

Imports

StreamBarcodeReader
wrong:
```
const StreamBarcodeReader = require('vue-barcode-reader');
```
correct:
```
import { StreamBarcodeReader } from 'vue-barcode-reader';
```
Primarily used for scanning from a live video camera stream. ESM is the standard for Vue 3.
ImageBarcodeReader
wrong:
```
const ImageBarcodeReader = require('vue-barcode-reader');
```
correct:
```
import { ImageBarcodeReader } from 'vue-barcode-reader';
```
Used for scanning barcodes from uploaded image files. ESM is the standard for Vue 3.
Type definitions
wrong:
```
import type { BarcodeResult } from 'vue-barcode-reader';
```
correct:
```
npm install @types/vue-barcode-reader --save-dev
```
Type definitions are provided as a separate `@types` package for TypeScript projects.

Quickstart

This quickstart demonstrates how to set up both `StreamBarcodeReader` for live camera scanning and `ImageBarcodeReader` for image file scanning within a Vue 3 component. It includes handlers for successful decodes, camera loading, and error states, displaying the last decoded value.

import { defineComponent } from 'vue';
import { StreamBarcodeReader, ImageBarcodeReader } from 'vue-barcode-reader';

export default defineComponent({
  components: {
    StreamBarcodeReader,
    ImageBarcodeReader,
  },
  data() {
    return {
      decodedText: '',
      cameraLoaded: false,
      streamError: null as string | null,
      imageError: null as string | null
    };
  },
  methods: {
    onDecode(result: string) {
      console.log('Decoded text:', result);
      this.decodedText = result;
    },
    onLoaded() {
      console.log('StreamBarcodeReader camera loaded!');
      this.cameraLoaded = true;
    },
    onStreamError(error: Error) {
      console.error('StreamBarcodeReader error:', error);
      this.streamError = error.message;
    },
    onImageError(error: Error) {
      console.error('ImageBarcodeReader error:', error);
      this.imageError = error.message;
    },
  },
});

/* In your template: */
/*
<template>
  <div>
    <h1>Vue Barcode Reader Demo</h1>
    
    <h2>Live Camera Scan</h2>
    <StreamBarcodeReader
      @decode="onDecode"
      @loaded="onLoaded"
      @error="onStreamError"
    ></StreamBarcodeReader>
    <p v-if="!cameraLoaded">Loading camera...</p>
    <p v-if="streamError" style="color: red;">Camera Error: {{ streamError }}</p>

    <h2>Scan from Image</h2>
    <ImageBarcodeReader
      @decode="onDecode"
      @error="onImageError"
    ></ImageBarcodeReader>
    <p v-if="imageError" style="color: red;">Image Scan Error: {{ imageError }}</p>

    <h3 v-if="decodedText">Last Decoded: {{ decodedText }}</h3>
  </div>
</template>
*/

view raw JSON →