Vue Integration Guide

This guide contains step-by-step instructions for integrating the STRICH Barcode Scanning SDK into a Vue 3 app. Examples will use the Composition API, the recommended approach to building modern Vue components.

Installing the SDK

Installing the SDK in a Vue project depends on your setup. Assuming you've created the app using the standard npm create vue@latest path (see Vue Quick Start). If you're using npm, add the SDK to your project:

npm install @pixelverse/strichjs-sdk

This will install the latest version of the SDK. If barcode scanning functionality is a critical part of your app, we recommend pinning a version of the library.

SDK Initialization

To start using the SDK in your Vue app, you'll need a license key. Check out the Getting Started guide if you haven't already done that for instructions on how to obtain a license key.

The SDK is initialized using StrichSDK.initialize(). This has to be called before using any of STRICH's barcode scanning integrations (PopupScanner or BarcodeReader).

await StrichSDK.initialize('<your license key>');

Using the PopupScanner

STRICH ships with an out-of-the-box scanning experience: the Popup Scanner. It can be used to quickly start scanning barcodes with minimal integration effort.

The popup scanner is invoked by calling PopupScanner.scan(). In the example below, the scanner is integrated into a Vue SFC (Single File Component) and configured to detect QR Codes and Code 128 barcodes. If a code was scanned, the decoded value will be displayed. The user may also cancel the dialog, which is indicated by a return value of undefined.

<script setup lang="ts">
import { ref } from "vue";
import { PopupScanner } from "@pixelverse/strichjs-sdk";

const result = ref('no code scanned yet');

async function scan() {
    await StrichSDK.initialize('<your license key>');
    const detections = await PopupScanner.scan({
        symbologies: ['qr', 'code128']
    });
    result.value = detections ?  detections[0].data : 'User cancelled';
}
</script>

<template>
    <p>{{ result }}</p>
    <button @click="scan">Scan with PopupScanner</button>
</template>

The snippet initializes the SDK every time scanning is triggered, which isn't optimal, as there might be a short delay on the first call. You might decide to initialize the SDK when the Vue application is created, or in a route guard, see the Advanced Topics section below.

Using the Popup Scanner frees you from managing the BarcodeReader lifecycle, and is recommended for simple scanning scenarios.

Using BarcodeReader

If you need tighter integration with the rest of your app, you can choose to integrate BarcodeReader directly, which is a lower-level way of accessing the SDK functionality.

One way to achieve that is by creating a Vue component that wraps a BarcodeReader and provides it in a reusable way to the rest of Vue app.

Encapsulating BarcodeReader in a Vue Component

The snippet below shows a Vue SFC that wraps a BarcodeReader. The snippet is also available in a more complete form in our Vue 3 sample repository on GitHub.

Vue Scanner Component

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import { BarcodeReader, type CodeDetection, type Configuration } from "@pixelverse/strichjs-sdk";

// define a 'detected' event that the Scanner component emits when barcodes are detected
const emit = defineEmits<{
    detected: [detections: CodeDetection[]]
}>();

// bind to the host element that will contain the BarcodeScanner
const hostElement = ref();

// this component manages the BarcodeReader
let barcodeReader: BarcodeReader | undefined = undefined;

// expose start/stop to control pause/resume scanning
const start = async () => await barcodeReader?.start();
const stop = async () => await barcodeReader?.stop();
defineExpose({ start, stop })

// couple the component's lifecycle with the BarcodeReader lifecycle
onMounted(async () => {

  // BarcodeReader configuration is static, but might also be provided through a
  // prop to make// the Component more flexible
  const configuration: Configuration = {
    selector: hostElement.value,
    engine: {
      symbologies: ['code128', 'qr']
    }
  }

  // initialize the BarcodeReader: it is important for the Component to be mounted
  // as the host element must exist and be added to the DOM before a BarcodeReader
  // can be initialized
  barcodeReader = new BarcodeReader(configuration);
  await barcodeReader.initialize();
  barcodeReader.detected = (detections) => emit('detected', detections);
  await barcodeReader.start();
});

// destroying the BarcodeReader to release its resources (e.g. camera)
onBeforeUnmount(() => {
  barcodeReader?.destroy();
  barcodeReader = undefined;
});
</script>

<template>
  <div class="barcode-scanner" ref="hostElement">
    <!-- STRICH BarcodeReader instantiated here -->
  </div>
</template>

<style scoped>
.barcode-scanner {
  position: relative;
  background-color: black;
  height: 100%;
}
</style>

Key Implementation Aspects

The key aspects of the implementation are:

The host element which will contain the BarcodeReader is provided through the component's HTML template and referenced through a ref.
The component declares an emitted event detected to notify its consumer of a detected barcode. In the snippet, we use the newer Vue 3.3+ syntax for [typed emits](https://vuejs.org/api/sfc-script-setup.html#type-only-props-emit-declarations.
The component exposes start and stop functions to its consumer, for starting/stopping barcode recognition.
The component manages the BarcodeReader lifecycle by coupling initialization and destruction to the component's mount/unmount lifecycle hooks.
Props could be used to inject context-specific configuration for the BarcodeReader, e.g. for detecting only QR Codes in one screen, Code 128 barcodes in another.

Advanced Topics

Ensuring SDK Initialization via a Route Guard

In the sample code, we use Vue's client-side router and router guards, to ensure the SDK is initialized before entering a screen that needs it.

Router Initialization

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            component: HomeView,
        },
        // ... other routes...
        {
            path: '/scan-popup',
            component: ScanPopup,
            beforeEnter: [ensureStrichSDKInitialized]
        }
    ]
});

/**
 * A navigation guard that blocks navigation to a route
 * that uses barcode scanning. This approach performs SDK
 * initialization lazily, only when it's actually needed
 * in the app.
 */
async function ensureStrichSDKInitialized() {
    if (!StrichSDK.isInitialized()) {
        const licenseKey = '<your license key>';
        try {
            await StrichSDK.initialize(licenseKey);
            return true;
        } catch (e) {
            return '/'; // navigate home
        }
    }
    return true;
}

Sample Code

Full sample code for Vue 3 is available in our Vue 3 sample repository on GitHub.

08 May 2026

SDK Documentation Help