Nuxt module

@orbisk/nuxt-barcode-detection registers the composable as an auto-import and the scanner + overlay as global components, so you can drop them anywhere in your Nuxt app without importing.

Setup

export default defineNuxtConfig({
  modules: ['@orbisk/nuxt-barcode-detection'],
})

What you get

• useBarcodeDetector — auto-imported composable. See useBarcodeDetector for the full reference.
• <UseBarcodeDetector /> — drop-in scanner component, registered globally.
• <BarcodeDetectorOverlay /> — standalone SVG overlay drawing accepted (green) and rejected (red) barcode polygons. Registered globally.
• <UBarcodeInput /> — opt-in input field paired with a scan button. Only registered when @nuxt/ui is present in your app. See the Nuxt UI integration page for the full reference.

Options

Configure the module under the barcodeDetection key.

Usage

<template>
  <UseBarcodeDetector v-slot="{ start, stop, isActive, detected }">
    <button @click="isActive ? stop() : start()">
      {{ isActive ? 'Stop' : 'Start camera' }}
    </button>
    <ul>
      <li v-for="b in detected" :key="b.rawValue">
        <strong>{{ b.format }}</strong> — <code>{{ b.rawValue }}</code>
      </li>
    </ul>
  </UseBarcodeDetector>
</template>

No imports needed — the composable and components are auto-registered.

Polyfill on the client

To support browsers without a native BarcodeDetector (Firefox, Safari, desktop Linux Chromium), enable the polyfill option:

export default defineNuxtConfig({
  modules: ['@orbisk/nuxt-barcode-detection'],
  barcodeDetection: {
    polyfill: true,
  },
})

The module ships a client-only plugin that conditionally loads the barcode-detector polyfill — only when globalThis.BarcodeDetector is missing — so native implementations keep winning where they exist.

The plugin also exposes a useState<boolean>('barcode-detector-polyfilled') flag so you can show a banner or warning when the polyfill is active.