Registry / web-framework / vue-barcode-reader

vue-barcode-reader

library1.0.3jsnpmunverified

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.

web-framework ai-ml

npm install vue-barcode-reader

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-BARCODE-READER

vue-barcode-reader

web-frameworkjavascriptv1.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

StreamBarcodeReader

✓ import { StreamBarcodeReader } from 'vue-barcode-reader';

✗ const StreamBarcodeReader = require('vue-barcode-reader');

Primarily used for scanning from a live video camera stream. ESM is the standard for Vue 3.

ImageBarcodeReader

✓ import { ImageBarcodeReader } from 'vue-barcode-reader';

✗ const ImageBarcodeReader = require('vue-barcode-reader');

Used for scanning barcodes from uploaded image files. ESM is the standard for Vue 3.

Type definitions

✓ npm install @types/vue-barcode-reader --save-dev

✗ import type { BarcodeResult } from 'vue-barcode-reader';

Type definitions are provided as a separate `@types` package for TypeScript projects.

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> */

Debug

Known issues

breakingWith 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.

affects: >=1.0.0

gotchaThis 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.

affects: >=1.0.3

gotchaFor 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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.3

gotchaEarly 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`.

affects: <1.0.1

Errors

Common errors & fixes

ReferenceError: beforeDestroy is not defined

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

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

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')

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`.

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

44 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/olefirenko/vue-barcode-reader ↗

packagehttps://www.npmjs.com/package/vue-barcode-reader ↗