Getting started

@orbisk/vue-use-barcode-detection ships four primitives on top of the Barcode Detection API:

• useBarcodeDetector — a reactive composable.
• <UseBarcodeDetector /> — a drop-in scanner component (camera + overlay in one tag).
• <BarcodeDetectorOverlay /> — a standalone SVG overlay for drawing polygons over detected codes.
• Nuxt module — auto-imports the composable and registers the components globally; pulls in <UBarcodeInput /> when @nuxt/ui is present.

Requirements

• Vue 3.5+
• @vueuse/core 14+ — peer dependency
• A browser that ships the Barcode Detection API, or the barcode-detector polyfill where it's missing. See Compatibility & polyfill for the support table.

Install

pnpm add @orbisk/vue-use-barcode-detection vue @vueuse/core

npm install @orbisk/vue-use-barcode-detection vue @vueuse/core

yarn add @orbisk/vue-use-barcode-detection vue @vueuse/core

bun add @orbisk/vue-use-barcode-detection vue @vueuse/core

Vue

Drop the component in and you have a working scanner — <video>, camera stream, and a polygon overlay are wired up for you. start() must be triggered from a user gesture so iOS/Safari accepts getUserMedia.

<script setup lang="ts">
import { UseBarcodeDetector } from '@orbisk/vue-use-barcode-detection'
</script>

<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>

Prefer the composable for full control:

<script setup lang="ts">
import { useTemplateRef } from 'vue'
import { useBarcodeDetector } from '@orbisk/vue-use-barcode-detection'

const video = useTemplateRef<HTMLVideoElement>('video')
const { detected, start, stop, isActive } = useBarcodeDetector(video)
</script>

<template>
  <video ref="video" playsinline muted />
  <button @click="isActive ? stop() : start()">
    {{ isActive ? 'Stop' : 'Start camera' }}
  </button>
</template>

See the useBarcodeDetector reference for every option, slot, and return value.

Nuxt

Add the module to nuxt.config.ts — the composable becomes an auto-import and the components are registered globally.

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

<template>
  <UseBarcodeDetector v-slot="{ detected }">
    <pre>{{ detected }}</pre>
  </UseBarcodeDetector>
</template>

If your app already uses @nuxt/ui, the module also registers <UBarcodeInput /> — a UInput paired with a scan button that opens a live-camera modal. See the Nuxt UI integration page for the full component reference.

Polyfill

For browsers without a native BarcodeDetector (Firefox, Safari, desktop Linux Chromium), ship the barcode-detector polyfill — see Compatibility & polyfill for the supported browsers and exact wiring for Vue and Nuxt.

Next steps

• Compatibility & polyfill — browser support table and polyfill setup.
• useBarcodeDetector — the composable, the wrapper component, and the standalone overlay.
• Nuxt module — what gets auto-imported.
• Nuxt UI integration — the optional <UBarcodeInput />.