From 8ced9f8b7579a19582ae7f18d032d86d677802fc Mon Sep 17 00:00:00 2001
From: Antonio Anaya <antonio.anaya@kny5.work>
Date: Tue, 20 Jan 2026 18:58:38 -0600
Subject: [PATCH] ui_migration feat(deps): Modified src/ main.js for vue3
 compatibility

---
 webapp/src/App.vue |  8 +++-----
 webapp/src/main.js | 22 +++++++++++++---------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 91a61659..920c0017 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -1,4 +1,4 @@
-<template>
+<template :key="shortcut.shortcut">
   <div id="app" class="uk-height-1-1 uk-margin-remove uk-padding-remove" :class="handleTheme">
     <!-- this stops the app loading until setConnected is committed in the store, this means
      other components will not load until we have Thing Descriptions. -->
@@ -10,7 +10,6 @@
         <button class="uk-modal-close-default" type="button" uk-close></button>
         <div
           v-for="shortcut in keyboardManual"
-          :key="shortcut.shortcut"
           class="uk-margin-small"
           uk-grid
         >
@@ -26,10 +25,9 @@
 // Import components
 import appContent from "./components/appContent.vue";
 import loadingContent from "./components/loadingContent.vue";
+import MouseTrap from "mousetrap";
 
-var Mousetrap = require("mousetrap");
-
-Mousetrap.prototype.stopCallback = function (e, element) {
+MouseTrap.prototype.stopCallback = function (e, element) {
   // if the element has the class "mousetrap" then no need to stop
   if ((" " + element.className + " ").indexOf(" mousetrap ") > -1) {
     return false;
diff --git a/webapp/src/main.js b/webapp/src/main.js
index 2eef77b7..b71491cb 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -1,4 +1,4 @@
-import Vue from "vue";
+import { createApp } from 'vue';
 import App from "./App.vue";
 import store from "./store";
 import UIkit from "uikit";
@@ -21,15 +21,19 @@ UIkit.mixin(
   "accordion",
 );
 
+// Create Vue app
+const app = createApp(App);
+
 // Use visibility observer
-Vue.use(VueObserveVisibility);
+app.use(VueObserveVisibility);
 
-Vue.config.productionTip = false;
+// Disable production tip for Vue
+app.config.productionTip = false;
 
-Vue.mixin(queryMixin);
-Vue.mixin(modalMixin);
+// Use global mixins
+app.mixin(queryMixin);
+app.mixin(modalMixin);
 
-new Vue({
-  store,
-  render: (h) => h(App),
-}).$mount("#app");
+// Use Vuex store
+app.use(store);
+app.mount("#app");