Enhance Barcode Input and File Input Components with Client-Only Wrapper

- Updated `nuxt.config.ts` to include `@zxing/library` in the transpile list, ensuring compatibility with the new barcode scanning functionality.
- Modified `BarcodeInput.vue` and `FileInput.vue` components to wrap the `CameraUpload` component in a `<ClientOnly>` tag, preventing server-side rendering issues and improving the user experience during barcode scanning.

These changes aim to enhance the functionality of the barcode scanning feature while ensuring proper rendering in client-side environments.

client/components/forms/BarcodeInput.vue

@@ -8,12 +8,14 @@
       v-if="isScanning"
       class="relative w-full"
     >
+      <ClientOnly>
       <CameraUpload
         :is-barcode-mode="true"
         :decoders="decoders"
         @stop-webcam="stopScanning"
         @barcode-detected="handleBarcodeDetected"
       />
+      </ClientOnly>
     </div>
 
     <div

client/components/forms/FileInput.vue

@@ -10,12 +10,14 @@
         theme.fileInput.minHeight
       ]"
     >
-      <camera-upload
+      <ClientOnly>
+      <CameraUpload
         v-if="cameraUpload"
         :theme="theme"
         @upload-image="cameraFileUpload"
         @stop-webcam="isInWebcam=false"
       />
+      </ClientOnly>
     </div>
     <div
       v-else

client/nuxt.config.ts

@@ -22,7 +22,7 @@ export default defineNuxtConfig({
   ],
 
   build: {
-      transpile: ["vue-notion", "query-builder-vue-3", "vue-signature-pad"],
+      transpile: ["vue-notion", "query-builder-vue-3", "vue-signature-pad", "@zxing/library"],
   },
 
   i18n: {