DEV Community

Cover image for How to Add a QR and Barcode Scanner to Your Vue.js App
Dmytro Olefyrenko
Dmytro Olefyrenko

Posted on • Originally published at olefyrenko.com

How to Add a QR and Barcode Scanner to Your Vue.js App

In this blog post, I will show you how to add a QR and barcode scanner to your Vue.js website. This is a great way to increase engagement with your users and can be used for a variety of purposes, such as marketing, product identification, and more! We will be using the vue-barcode-reader library for this tutorial, which is a popular option for scanning both QR codes and barcodes. Let’s get started!

Installation

First, we need to install the vue-barcode-reader library. We can do this with npm:

    npm install vue-barcode-reader --save
Enter fullscreen mode Exit fullscreen mode

Or yarn:

    yarn add vue-barcode-reader
Enter fullscreen mode Exit fullscreen mode

Please note that for projects which use the Vue 2.0 version you need to install the compatible version of the library (vue-barcode-reader@0.0.3).

TypeScript

If you are using TypeScript, you will need to install additionally the definitions of the vue-barcode-reader types. There are type definitions available at DefinitelyTyped for those who work with TypeScript.

    npm install @types/vue-barcode-reader --save-dev
Enter fullscreen mode Exit fullscreen mode

Or

    yarn add -D @types/vue-barcode-reader
Enter fullscreen mode Exit fullscreen mode

Usage

Next, we need to add the library to our project. We can do this by adding it to our Vue component:

    import { StreamBarcodeReader } from "vue-barcode-reader";
Enter fullscreen mode Exit fullscreen mode

Now, we need to add a QR or barcode scanner component to our project. We can do this by adding the following code:

    <StreamBarcodeReader
        @decode="onDecode"
        @loaded="onLoaded"
    ></StreamBarcodeReader>
Enter fullscreen mode Exit fullscreen mode

We should also implement the handlers for decode and loaded events which the library exposes.

    onDecode(text) {
        console.log(`Decode text from QR code is ${text}`)
    },

    onLoaded() {
       console.log(`Ready to start scanning barcodes`)
    }
Enter fullscreen mode Exit fullscreen mode

Now, you can scan QR codes and barcodes in your Vue.js application! Here is an example of a QR code that I scanned:

QR code scanning in action

Demo

You can find the source code of the example application on Github or check it live at Vercel or Netlify. You can also check how vue-barcode-reader library works on the live production website here.

Conclusion

In this blog post, I showed you how to add a QR and barcode scanner capabilities to your Vue.js app. This is a great way to increase engagement with your users, and can be used for a variety of purposes, such as marketing, product identification, and more! I hope you found this blog post helpful. Feel free to ask me any questions in DM on Twitter. Thanks for reading!

Top comments (0)