{"id":12405,"library":"vue-barcode-reader","title":"Vue Barcode and QR Code Scanner","description":"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.","status":"abandoned","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://olefirenko@github.com/olefirenko/vue-barcode-reader","tags":["javascript","vue","barcode","qrcode","zxing"],"install":[{"cmd":"npm install vue-barcode-reader","lang":"bash","label":"npm"},{"cmd":"yarn add vue-barcode-reader","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-barcode-reader","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primarily used for scanning from a live video camera stream. ESM is the standard for Vue 3.","wrong":"const StreamBarcodeReader = require('vue-barcode-reader');","symbol":"StreamBarcodeReader","correct":"import { StreamBarcodeReader } from 'vue-barcode-reader';"},{"note":"Used for scanning barcodes from uploaded image files. ESM is the standard for Vue 3.","wrong":"const ImageBarcodeReader = require('vue-barcode-reader');","symbol":"ImageBarcodeReader","correct":"import { ImageBarcodeReader } from 'vue-barcode-reader';"},{"note":"Type definitions are provided as a separate `@types` package for TypeScript projects.","wrong":"import type { BarcodeResult } from 'vue-barcode-reader';","symbol":"Type definitions","correct":"npm install @types/vue-barcode-reader --save-dev"}],"quickstart":{"code":"import { defineComponent } from 'vue';\nimport { StreamBarcodeReader, ImageBarcodeReader } from 'vue-barcode-reader';\n\nexport default defineComponent({\n  components: {\n    StreamBarcodeReader,\n    ImageBarcodeReader,\n  },\n  data() {\n    return {\n      decodedText: '',\n      cameraLoaded: false,\n      streamError: null as string | null,\n      imageError: null as string | null\n    };\n  },\n  methods: {\n    onDecode(result: string) {\n      console.log('Decoded text:', result);\n      this.decodedText = result;\n    },\n    onLoaded() {\n      console.log('StreamBarcodeReader camera loaded!');\n      this.cameraLoaded = true;\n    },\n    onStreamError(error: Error) {\n      console.error('StreamBarcodeReader error:', error);\n      this.streamError = error.message;\n    },\n    onImageError(error: Error) {\n      console.error('ImageBarcodeReader error:', error);\n      this.imageError = error.message;\n    },\n  },\n});\n\n/* In your template: */\n/*\n<template>\n  <div>\n    <h1>Vue Barcode Reader Demo</h1>\n    \n    <h2>Live Camera Scan</h2>\n    <StreamBarcodeReader\n      @decode=\"onDecode\"\n      @loaded=\"onLoaded\"\n      @error=\"onStreamError\"\n    ></StreamBarcodeReader>\n    <p v-if=\"!cameraLoaded\">Loading camera...</p>\n    <p v-if=\"streamError\" style=\"color: red;\">Camera Error: {{ streamError }}</p>\n\n    <h2>Scan from Image</h2>\n    <ImageBarcodeReader\n      @decode=\"onDecode\"\n      @error=\"onImageError\"\n    ></ImageBarcodeReader>\n    <p v-if=\"imageError\" style=\"color: red;\">Image Scan Error: {{ imageError }}</p>\n\n    <h3 v-if=\"decodedText\">Last Decoded: {{ decodedText }}</h3>\n  </div>\n</template>\n*/","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"For ongoing support and new features, evaluate migrating to `@teckel/vue-barcode-reader` or other actively maintained barcode scanning libraries for Vue.","message":"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.","severity":"gotcha","affected_versions":">=1.0.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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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).","severity":"gotcha","affected_versions":">=1.0.3"},{"fix":"Upgrade to `vue-barcode-reader@1.0.1` or a later version to resolve Vite compatibility issues: `npm update vue-barcode-reader`.","message":"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.","severity":"gotcha","affected_versions":"<1.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Replace `beforeDestroy` with `beforeUnmount` in your Vue 3 components to align with the Vue 3 API.","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.","error":"ReferenceError: beforeDestroy is not defined"},{"fix":"Ensure you `import { StreamBarcodeReader } from 'vue-barcode-reader';` and include it in your component's `components` option: `{ components: { StreamBarcodeReader } }`.","cause":"The `StreamBarcodeReader` component (or `ImageBarcodeReader`) was not correctly imported or registered within your Vue component where it's being used.","error":"[Vue warn]: Failed to resolve component: StreamBarcodeReader"},{"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.","cause":"The browser has denied access to the user's camera, which is required by `StreamBarcodeReader` to function.","error":"NotAllowedError: Permission denied"},{"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`.","cause":"This error was a common symptom of Vite compatibility issues in `vue-barcode-reader` versions prior to 1.0.1.","error":"TypeError: Cannot read properties of undefined (reading 'length')"}],"ecosystem":"npm"}