diff --git a/assets/js/app.js b/assets/js/app.js
index 85658ae7..587eff60 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -21,12 +21,16 @@ import "phoenix_html"
 import { Socket } from "phoenix"
 import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
-import "./barcode-scanner"
+import BarcodeScannerHook from "./barcode-scanner"
+
+let Hooks = {}
+Hooks.BarcodeScanner = BarcodeScannerHook;
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
-  params: { _csrf_token: csrfToken }
+  params: { _csrf_token: csrfToken },
+  hooks: { Hooks }
 })
 
 // Show progress bar on live navigation and form submits
diff --git a/assets/js/barcode-scanner.js b/assets/js/barcode-scanner.js
index 86d72628..1bc674a3 100644
--- a/assets/js/barcode-scanner.js
+++ b/assets/js/barcode-scanner.js
@@ -1,6 +1,6 @@
 import { BarcodeDetector } from "barcode-detector/ponyfill";
 
-const run = async function () {
+const barcodeTest = async function () {
   // check supported formats
   const supportedFormats = await BarcodeDetector.getSupportedFormats();
   console.log(supportedFormats);
@@ -17,4 +17,8 @@ const run = async function () {
   barcodeDetector.detect(imageFile).then(console.log);
 }
 
-run();
+export default {
+  mounted() {
+    console.log(this.el);
+  }
+}