This project demonstrates how to create a barcode scanner using the ZXing library wrapped in a NiceGUI custom Vue component. Based on this discussion, and inspired by the custom vue component example.

Install the package from PyPI:

pip install nicegui nicegui-scanner

Create a simple barcode scanner app (save as scanner_app.py):

from nicegui import ui
from nicegui_scanner import BarcodeScanner

def on_scan(event):
    ui.notify(f"Scanned: {event.args}")

scanner = BarcodeScanner(on_scan=on_scan)
scanner.create_controls()

ui.run()

Then run: python scanner_app.py

• Easy Integration: Drop-in component for NiceGUI apps - no additional setup require after pip install
• Camera Selection: Automatic camera detection with settings UI
• Flexible Styling: Use standard CSS via .style() method
• Multiple Formats: Supports QR codes, barcodes, and more via ZXing

See the examples/ directory for:

• app.py - Multiple scanner configurations
• pages.py - Usage with NiceGUI pages

To develop this component, install dependencies and run the example app:

npm install  # Install ZXing library
uv sync      # Install Python dependencies
make dev     # Run example app

This will start the example app on http://localhost:3001 with multiple scanner demos.