Simple Vue3 barcode scanner detector.

BarcodeScannerProvider.vue

<template>
  <slot />
</template>

<script lang="ts">
import { defineComponent } from "vue";

interface ComponentSetup {
  buff: string;
  isReading: boolean;
  eventHandler: (ev: KeyboardEvent) => void;
}

export default defineComponent({
  name: "BarcodeScannerProvider",
  emits: [
    "onBarcodeScan",
    "onBackspace",
    "onEnter",
    "onEscape",
    "onMiscellaneousInput",
  ],
  setup(): ComponentSetup {
    return {
      buff: "",
      isReading: false,
      eventHandler: function (ev: KeyboardEvent) {
        console.log(ev);
      },
    };
  },
  mounted() {
    let eventHandler = this.barcodeReaderEventHandler;

    this.eventHandler = function (ev: KeyboardEvent) {
      eventHandler(ev);
    };

    document.addEventListener("keydown", this.eventHandler);
  },
  unmounted() {
    document.removeEventListener("keydown", this.eventHandler);
  },
  methods: {
    barcodeReaderEventHandler(event: KeyboardEvent) {
      if (event.key === "Backspace") {
        this.$emit("onBackspace");
      } else if (event.key === "Enter") {
        this.$emit("onEnter");
      } else if (event.key === "Escape") {
        this.$emit("onEscape");
      }

      if (event.key.length > 1) {
        return;
      }

      this.buff += event.key;

      if (!this.isReading) {
        this.isReading = true;
        setTimeout(() => {
          if (this.buff) {
            if (this.buff.length > 3) {
              this.$emit("onBarcodeScan", this.buff);
            } else {
              this.$emit("onMiscellaneousInput", this.buff);
            }
            this.buff = "";
          }
          this.isReading = false;
        }, 20);
      }
    },
  },
});
</script>