Web Demos

BARCODE READER SDK DEMO

Explore the flexibe barcode reading settings to optimize for your specific usage scenario.

WEB TWAIN SDK DEMO

Try the most popular web scanner features: scan images, import local images and PDF files, edit, save to local, upload to database, and etc.

BARCODE READER JAVASCRIPT DEMO

Transform any camera-equipped devices into real-time, browser-based barcode and QR code scanners.

MRZ SCANNER WEB DEMO

Detects the machine-readable zone of a passport, scans the text, and parses into human-readable data.

APP STORE DEMOS

BARCODE READER SDK FOR IOS

BARCODE READER SDK FOR ANDROID

VIEW MORE DEMOS >
Dev Center
Table of contents

Thanks for downloading Dynamsoft Barcode Reader Package!

Your download will start shortly. If your download does not begin, click here to retry.

JavaScript Hello World Sample - Vue Vue logo

Vue is a progressive framework for building user interfaces. Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called “the library”) into a Vue application.

Official Sample

Preparation

Make sure you have node, yarn and Vue CLI installed. node 14.16.0 , yarn 1.22.10 and @vue/cli 4.5.11 are used in the example below.

Create the sample project

Create a Bootstrapped Raw React Application

vue create read-video-vue

CD to the root directory of the application and install the dependencies

yarn add dynamsoft-javascript-barcode

Start to implement

Add a file “dbr.js” under “/src/” to configure the library

import { BarcodeReader } from 'dynamsoft-javascript-barcode';
BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/";

Note:

  • license specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days.
  • engineResourcePath tells the library where to get the necessary resources at runtime.

Add a file BarcodeScanner.vue under “/components/” as the BarcodeScanner component

  • In BarcodeScanner.vue, add code for initializing and destroying the library.
<template>
  <div id="barcodeScannerUI"></div>
</template>

<script>
import "../dbr";
import { BarcodeScanner } from 'dynamsoft-javascript-barcode';

export default {
  data() {
    return {
      bDestroyed: false,
      pScanner: null,
    };
  },
  async mounted() {
    try {
      let scanner = await (this.pScanner =
        this.pScanner || BarcodeScanner.createInstance());
      if (this.bDestroyed) {
        scanner.destroyContext();
        return;
      }
      this.$el.appendChild(scanner.getUIElement());
      await scanner.open();
    } catch (ex) {
      console.error(ex);
    }
  },
  async beforeDestroy() {
    if (this.pScanner) {
      (await this.pScanner).destroyContext();
      this.bDestroyed = true;
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#barcodeScannerUI {
  width: 100%;
  height: 100%;
}
</style>

Note:

  • The element “barcodeScannerUI” is used to build the UI for the library in this line

    this.$el.appendChild(scanner.getUIElement());
    
  • To release resources timely, the BarcodeScanner instance is destroyed with the component in the callback beforeDestroy .

Add BarcodeScannerComponent in HelloWorld.vue

<template>
  <div id="UIElement">
    <BarcodeScannerComponent></BarcodeScannerComponent>
  </div>
</template>

<script>
import BarcodeScannerComponent from "./BarcodeScanner";

export default {
  name: "HelloWorld",
  props: {},
  components: {
    BarcodeScannerComponent,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#UIElement {
  margin: 2vmin auto;
  text-align: center;
  font-size: medium;
  height: 40vh;
  width: 80vw;
}
</style>
  • Try running the project.
yarn serve

If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. However, the found barcodes are not displayed anywhere yet. At the same time, there is a short delay for the initialization of the library during which nothing happens and is not user-friendly. The following takes care of these two issues.

Update HelloWorld.vue

  • Change the template
<template>
  <div className="helloWorld">
    <div id="UIElement">
      <span style="font-size: x-large" v-if="!libLoaded">Loading Library...</span>
      <BarcodeScannerComponent
        v-if="bShowScanner"
        v-on:appendMessage="appendMessage"
      ></BarcodeScannerComponent>
    </div>
    <input type="text" id="resultText" v-model="resultValue" readonly="true" />
  </div>
</template>
  • Add style for the “input” element
#resultText {
    display: block;
    margin: 0 auto;
    padding: 0.4rem 0.8rem;
    color: inherit;
    width: 80vw;
    border: none;
    font-size: 1rem;
    border-radius: 0.2rem;
    text-align: center;
}
  • Change the script
<script>
import "../dbr";
import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
import BarcodeScannerComponent from "./BarcodeScanner";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  components: {
    BarcodeScannerComponent,
  },
  data() {
    return {
      resultValue: "",
      libLoaded: false,
      bShowScanner: false,
    };
  },
  async mounted() {
    try {
      //Load the library on page load to speed things up.
      await BarcodeScanner.loadWasm();
      this.libLoaded = true;
      this.showScanner();
    } catch (ex) {
      alert(ex.message);
      throw ex;
    }
  },
  methods: {
    showScanner() {
      this.bShowScanner = true;
    },
    appendMessage(message) {
      switch (message.type) {
        case "result":
          this.resultValue = message.format + ": " + message.text;
          break;
        case "error":
          this.resultValue = message.msg;
          break;
        default:
          break;
      }
    },
  },
};
</script>

NOTE :

  • The method loadWasm() in the function mounted() initializes the library in the background. The scanner UI is only shown when the initialization finishes.
  • The method appendMessage() is used to show the result text on the page.
  • In BarcodeScanner.vue, use the event onFrameRead and the parent method appendMessage() to return the results.
<script>
import "../dbr";
import { BarcodeScanner } from 'dynamsoft-javascript-barcode';

export default {
  //Omitted code...
  async mounted() {
    try {
      //Omitted code...
      this.$el.appendChild(scanner.getUIElement());      
      scanner.onFrameRead = (results) => {
        for (let result of results) {
          const format = result.barcodeFormat ? result.barcodeFormatString : result.barcodeFormatString_2;
          this.$emit("appendMessage", {
            format,
            text: result.barcodeText,
            type: "result",
          });
        }
      };
      await scanner.open();
    } catch (ex) {
      this.$emit("appendMessage", { msg: ex.message, type: "error" });
      console.error(ex);
    }
  },
  //Omitted code...
};
</script>

NOTE :

  • The event onFrameRead is triggered upon reading of each frame. If barcodes are found on that frame, the results will be returned and shown on the page.

After the above changes, the application is made more user-friendly and the barcode text is displayed on the page right away. You can start implementing your own business workflow and make the application useful.

This page is compatible for:

Version 7.5.0

Is this page helpful?

YesYes NoNo

In this article:

latest version

    • Latest version
    • Version 9.x
      • Version 9.6.10
      • Version 9.6.2
      • Version 9.6.1
      • Version 9.6.0
      • Version 9.3.1
      • Version 9.3.0
      • Version 9.2.13
      • Version 9.2.12
      • Version 9.2.11
      • Version 9.0.2
      • Version 9.0.1
      • Version 9.0.0
    • Version 8.x
      • Version 8.8.7
      • Version 8.8.5
      • Version 8.8.3
      • Version 8.8.0
      • Version 8.6.3
      • Version 8.6.0
      • Version 8.4.0
      • Version 8.2.5
      • Version 8.2.3
      • Version 8.2.1
      • Version 8.2.0
      • Version 8.1.3
      • Version 8.1.2
      • Version 8.1.0
      • Version 8.0.0
    • Version 7.x
      • Version 7.6.0
      • Version 7.5.0
    Change +