{"id":21833479,"url":"https://github.com/olefirenko/vue-barcode-reader","last_synced_at":"2025-04-12T22:21:24.861Z","repository":{"id":35124219,"uuid":"209743185","full_name":"olefirenko/vue-barcode-reader","owner":"olefirenko","description":"A Vue.js set of components to scan barcodes and QR codes.","archived":false,"fork":false,"pushed_at":"2024-01-26T15:43:15.000Z","size":14,"stargazers_count":223,"open_issues_count":46,"forks_count":79,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-27T06:38:08.925Z","etag":null,"topics":["barcode-scanner","qrcode-scanner","vue","zxing"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/olefirenko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-20T08:30:56.000Z","updated_at":"2025-03-02T22:33:14.000Z","dependencies_parsed_at":"2023-01-15T14:18:45.910Z","dependency_job_id":"6812652d-1e84-4006-80dc-a0f2f910b192","html_url":"https://github.com/olefirenko/vue-barcode-reader","commit_stats":{"total_commits":23,"total_committers":5,"mean_commits":4.6,"dds":0.4782608695652174,"last_synced_commit":"fb415b7f97be9dafc734ab7ec5ec83ed34b983aa"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olefirenko%2Fvue-barcode-reader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olefirenko%2Fvue-barcode-reader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olefirenko%2Fvue-barcode-reader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olefirenko%2Fvue-barcode-reader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/olefirenko","download_url":"https://codeload.github.com/olefirenko/vue-barcode-reader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247103307,"owners_count":20884023,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["barcode-scanner","qrcode-scanner","vue","zxing"],"created_at":"2024-11-27T19:31:37.056Z","updated_at":"2025-04-04T01:09:56.292Z","avatar_url":"https://github.com/olefirenko.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Barcode and QR code scanner\n\n[![npm version](https://badgen.net/npm/v/vue-barcode-reader)](https://www.npmjs.com/package/vue-barcode-reader) [![sponsored_by](https://badgen.net/badge/sponsored%20by/%F0%9F%A4%96Easy-Peasy.AI/f2a)](https://Easy-Peasy.AI/?utm_source=npm\u0026utm_medium=badge\u0026utm_campaign=vue_barcode_reader)\n\nA Vue.js set of components to scan (or upload images) barcodes and QR codes.\n\n## Benefits\n\n- Can scan both barcodes and QR codes\n- Uses [ZXing](https://github.com/zxing-js/library) (\"zebra crossing\"), an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.\n\n## Demo\n\n[Demo repository](https://github.com/olefirenko/vue-barcode-reader-example) | [Codesandbox](https://codesandbox.io/s/vue-barcode-reader-demo-guj3f) | [Vercel](https://vue-barcode-reader-example-2iiz1fhbf-olefirenko.vercel.app/) | [Netlify](https://stupefied-meitner-58f299.netlify.app/)\n\nOr you can check the library in action on the website [parceltrackingapp.com](https://parceltrackingapp.com/en).\n\n## Installation\n\nThe easiest way to use Vue Barcode Reader is to install it from **npm** or **yarn**.\n\n```sh\nnpm install vue-barcode-reader --save\n```\n\nOr\n\n```sh\nyarn add vue-barcode-reader\n```\n\n### Vue 2.0 support\n\nFor Vue 2.0 compatible version please use the `vue-barcode-reader@0.0.3`.\n\n### TypeScript\n\nThere are type definitions available for those who work with TypeScript.\n\n```sh\nnpm install @types/vue-barcode-reader --save-dev\n```\n\nOr\n\n```sh\nyarn add -D @types/vue-barcode-reader\n```\n\n## Usage\n\nThe Vue Barcode Reader works out of the box by just including it.\n\n### Using Video Camera\n\nOnce a stream from the users camera is loaded, it's displayed and continuously scanned for barcodes. Results are indicated by the decode event.\n\n```js\nimport { StreamBarcodeReader } from \"vue-barcode-reader\";\n```\n\nIn your template you can use this syntax:\n\n```html\n\u003cStreamBarcodeReader @decode=\"onDecode\" @loaded=\"onLoaded\"\u003e\u003c/StreamBarcodeReader\u003e\n```\n\n### Scanning from Image\n\nThe component renders to a simple file picker input element. Clicking opens a file dialog. On supporting mobile devices the camera is started to take a picture. The selected images are directly scanned and positive results are indicated by the `decode` event.\n\n```js\nimport { ImageBarcodeReader } from \"vue-barcode-reader\";\n```\n\nIn your template you can use this syntax:\n\n```html\n\u003cImageBarcodeReader @decode=\"onDecode\" @error=\"onError\"\u003e\u003c/ImageBarcodeReader\u003e\n```\n\n```html\nmethods: { onDecode (result) { console.log(result) } }\n```\n\n## Events\n\nThe library emits the following events:\n\n### loaded\n\nWhen the libraty is loaded and the camera is ready to scan\n\n### decode\n\nWhen a barcode or QR code is scanned. The result is passed as a parameter to the event handler. The result is the text encoded in the barcode or QR code.\n\n### result\n\nWhen a barcode or QR code is scanned. The result is passed as a parameter to the event handler. The result is the object with the following properties:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folefirenko%2Fvue-barcode-reader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Folefirenko%2Fvue-barcode-reader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folefirenko%2Fvue-barcode-reader/lists"}