Vue barcodes and QR codes scanner
npm install vue-barcode-reader 
A Vue.js set of components to scan (or upload images) barcodes and QR codes.
- Can scan both barcodes and QR codes
- Uses ZXing ("zebra crossing"), an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.
Demo repository | Codesandbox | Vercel | Netlify
Or you can check the library in action on the website parceltrackingapp.com.
The easiest way to use Vue Barcode Reader is to install it from npm or yarn.
``sh`
npm install vue-barcode-reader --save
Or
`sh`
yarn add vue-barcode-reader
For Vue 2.0 compatible version please use the vue-barcode-reader@0.0.3.
There are type definitions available for those who work with TypeScript.
`sh`
npm install @types/vue-barcode-reader --save-dev
Or
`sh`
yarn add -D @types/vue-barcode-reader
The Vue Barcode Reader works out of the box by just including it.
Once a stream from the users camera is loaded, it's displayed and continuously scanned for barcodes. Results are indicated by the decode event.
`js`
import { StreamBarcodeReader } from "vue-barcode-reader";
In your template you can use this syntax:
`html`
The 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.
`js`
import { ImageBarcodeReader } from "vue-barcode-reader";
In your template you can use this syntax:
`html`
`html``
methods: { onDecode (result) { console.log(result) } }
The library emits the following events:
When the libraty is loaded and the camera is ready to scan
When 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.
When 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: