Vue Barcode Scanner
Scan barcodes and QR codes in your Vue app with STRICH Barcode Scanning SDK.
Made in Switzerland
Runs in the browser
Add barcode scanning to your Vue app: fully client-side processing, no backend required! Why scan in the browser?
Simple, transparent pricing
No large up-front commitment. Unlimited devices. Cancel anytime. Free 14-day trial. Pricing is on this page, no talk to sales.
Quick start: scan with PopupScanner
The fastest way to scan a barcode in Vue. No component to write, just call PopupScanner.scan() from an event handler and await the result.
PopupScanner is a configurable, ready-to-use dialog displayed over your app and closes automatically as soon as a matching barcode is read.
PopupScanner is intentionally light, but still configurable enough to fit your app:
- Customizable labels for user guidance. Defaults are localized to the browser language.
- Colors to match your app's branding.
- Audio and vibration feedback on each scan.
- Custom detectionHandler to validate codes, or to keep the dialog open until all required barcodes have been scanned.
Check out our PopupScanner guide or dive directly into the Vue sample code to get started.
BarcodeReader: embed a scanner component in your Vue app
For more fine-grained control over the UX, embed a BarcodeReader in your Vue app.
When scanning is central to a screen, for example a stock-taking view with the camera on top and scanned items below, embed the scanner using the BarcodeReader API.
Our sample component wraps the BarcodeReader with a Vue component and ties its lifecycle to the component's lifecycle.
For detailed sample code, refer to our Vue sample code on Github. The repository contains a sample component as well as examples for single, multiple and repeated scanning use cases.
Installation and initialization
Install the SDK from NPM:
➜ npm i @pixelverse/strichjs-sdkOur SDK has zero dependencies and we use best practices for securely publishing on NPM.
Alternatively, load the SDK dynamically from jsDelivr CDN (fun fact: we're sponsors!):
import {StrichSDK} from 'https://cdn.jsdelivr.net/npm/@pixelverse/strichjs-sdk@latest';Before scanning, initialize the SDK with your license key:
await StrichSDK.initialize('your-license-key');To get a license key, start a free trial and create one in the Customer Portal. License keys are scoped to your app URLs: localhost and private IP ranges are always included, so local development works out of the box.
Trusted in production
“After struggling with other libraries we settled on STRICH. It excels reading barcodes in conditions that the other libraries simply cannot get a reading.”
Jukka Aittokallio, Senior SW Eng @ Reaktor
“STRICH is a professional barcode scanning solution for web apps that outperforms comparable libraries by a wide margin.”
Matthias Schmid, Founder @ Smantry
“Before, our customer’s teams spent hours manually entering data and struggled with tracking errors. STRICH’s scanning technology has transformed the operations - now they can simply scan a barcode to instantly access or update the data at hand. The integration was smooth, and scanning works reliably even in challenging field conditions with poor lighting or damaged labels.”
Simon Stadlinger, Co-Founder @ Cula Technologies
Not convinced? See how companies like Brooklyn Public Library, Swiss Railways (SBB) and Zeercle use STRICH for their scanning processes, or read our article on Barcode scanning in web apps.
Vue tips
Implementation guidance and some common pitfalls to avoid.
Read our integration guide
We have an extensive Vue Integration Guide in our reference documentation if you prefer something to read before diving into the examples.
Initialize the SDK before the user needs it
Calling StrichSDK.initialize() before using PopupScanner or BarcodeReader. Initialization may perform an online license check, so be sure to do it as early as possible (app startup), so the scanner opens without delay.
Destroy the reader in the onBeforeUnmount lifecycle hook
The BarcodeReader holds the camera. If it isn't destroyed in onBeforeUnmount, the next initialization will fail because the camera is still in use. PopupScanner manages this automatically.
Keep the host element's size fixed
The scanner's container must use position: relative and a fixed size while scanning. Give it an explicit height (e.g. 300px) rather than letting it grow or shrink with the content around it, such as the list of scanned items.
Stop/start instead of remounting
For flows with user interaction between multiple scans, such as confirming each item, considering calling stop() and start() on the BarcodeReader. That way the camera stays open, and scanning resumes instantly. The sample Scanner component shows how to do this using defineExpose.
Guard scanning routes
Route guards are the idiomatic way to enforce preconditions in Vue apps. The Vue 3 sample code uses a beforeEnter guard on every scanning route to enforce SDK initialization.
Scanning QR codes in Vue
Both integrations read QR codes, and all other supported types, through the same API. Enable QR codes with by configuring the 'qr' symbology. See supported barcode types for the full list.
Frequently asked questions
Is there a Vue component package?
STRICH has zero dependencies and works with any framework. The Popup Scanner needs no component at all, and the Vue sample code is all it takes to embed the scanner. Copy it into your project and adapt it, or tell your agent to do it.
Which Vue versions are supported?
Any recent Vue version works. We have sample code for both Vue 2 and Vue 3. STRICH doesn't place any requirements on the web framework it runs on.
Does it include TypeScript types?
Yes. The SDK ships with full TypeScript definitions.
Is there a free trial?
Yes, we offer a 14-day free trial. A credit card or PayPal is required to start the trial, but you won't be charged if you cancel before it ends.
How much does STRICH cost?
Plans start at €99/month for up to 10'000 scans, with unlimited devices and applications. Business and Enterprise licenses have flat annual pricing with unlimited scans and devices. See pricing.
Does barcode data leave the device?
No. Barcodes are decoded on the device, in the browser. The SDK only uses connectivity to perform license check and track usage, never barcode contents. Online license checks and usage tracking can both be disabled with add-ons in Business and Enterprise plans.
Which browsers are supported?
All major browsers on Android and iOS. The camera requires HTTPS (or localhost) and the decoding requires support for WebAssembly.
Still have questions? Check out the full FAQ.
Start your free 14-day trial today
Integrating STRICH into your web app typically takes less than a day. Or try our free demo app and convince yourself that STRICH meets your needs.
Live demo ↗ Try for free ↗