changes

app/components/imports/BarcodeScanner.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { Html5Qrcode } from "html5-qrcode";
+
+const emit = defineEmits(["scanned"]);
+let scanner;
+
+onMounted(async () => {
+  scanner = new Html5Qrcode("scanner-region");
+  await scanner.start(
+    { facingMode: "environment" }, // or 'user' for front cam
+    { fps: 10, qrbox: 450 },
+    (decodedText) => {
+      console.log("scanned", decodedText);
+      emit("scanned", decodedText);
+      scanner.stop(); // stop after first scan
+    },
+    (errorMsg) => {
+      console.log("errorMsg", errorMsg);
+    }, // ignore per-frame scan failures
+  );
+});
+
+onBeforeUnmount(() => {
+  scanner?.stop().catch(() => {});
+});
+</script>
+
+<template>
+  <div id="scanner-region"></div>
+</template>

app/components/imports/Imports.vue

@@ -1,8 +1,16 @@
 <script setup>
+import BarcodeScanner from "~/components/imports/BarcodeScanner.vue";
 import Products from "~/components/imports/Products.vue";
+
+function onScanned(code) {
+  console.log("code", code);
+}
 </script>
 <template>
   <div class="fixed-grid has-12-cols">
+    <!-- <ClientOnly>
+      <BarcodeScanner @scanned="onScanned" />
+    </ClientOnly> -->
     <div class="grid">
       <div class="cell is-col-span-12">
         <Products />