From 6e14bf1dd0d00d3824695e637d9b1f17d5b7b2ef Mon Sep 17 00:00:00 2001
From: Antonio Anaya <antonio.anaya@kny5.work>
Date: Thu, 22 Jan 2026 23:40:56 -0600
Subject: [PATCH] ui_migration fix(deps): --Preliminary-- Define reactivity,
 with markRaw function wrapper for components.

---
 webapp/src/App.vue                            |  8 +++--
 webapp/src/components/appContent.vue          | 30 ++++++++++---------
 .../labThingsComponents/actionButton.vue      |  8 +++--
 .../labThingsComponents/actionStatusModal.vue |  8 +++--
 .../labThingsComponents/inputFromSchema.vue   |  4 ++-
 .../labThingsComponents/propertyControl.vue   |  4 ++-
 .../serverSpecifiedActionButton.vue           |  4 ++-
 .../serverSpecifiedPropertyControl.vue        |  4 ++-
 webapp/src/components/loadingContent.vue      |  6 +++-
 .../cameraMainCalibrationStep.vue             |  6 ++--
 .../cameraCalibrationTask.vue                 |  7 +++--
 .../cameraStageMappingTask.vue                |  8 +++--
 .../csmSteps/focusStep.vue                    |  7 +++--
 .../csmSteps/runCsmStep.vue                   |  6 ++--
 .../singleStepTask.vue                        |  8 +++--
 .../stepTemplateWithStream.vue                |  4 ++-
 .../aboutComponents/statusPane.vue            |  6 +++-
 .../tabContentComponents/aboutContent.vue     |  6 ++--
 .../paneBackgroundDetect.vue                  |  6 ++--
 .../backgroundDetectContent.vue               |  6 ++--
 .../controlComponents/autofocusControl.vue    |  4 ++-
 .../controlComponents/paneControl.vue         |  8 +++--
 .../controlComponents/positionControl.vue     | 11 ++++---
 .../tabContentComponents/controlContent.vue   |  8 +++--
 .../tabContentComponents/loggingContent.vue   |  6 ++--
 .../openSeadragonViewer.vue                   |  2 +-
 .../scanListComponents/scanCard.vue           |  7 ++++-
 .../scanListComponents/scanViewer.vue         |  6 +++-
 .../tabContentComponents/scanListContent.vue  | 10 +++++--
 .../settingsComponents/CSMSettings.vue        |  6 ++--
 .../CSMCalibrationSettings.vue                |  6 ++--
 .../settingsComponents/cameraSettings.vue     |  8 +++--
 .../cameraCalibrationSettings.vue             |  4 ++-
 .../settingsComponents/displaySettings.vue    |  5 ++--
 .../settingsComponents/stageSettings.vue      |  4 ++-
 .../tabContentComponents/settingsContent.vue  | 23 +++++++-------
 .../tabContentComponents/slideScanContent.vue | 14 +++++----
 .../tabContentComponents/streamContent.vue    |  2 +-
 .../tabContentComponents/viewContent.vue      |  4 ++-
 webapp/src/main.js                            |  3 --
 40 files changed, 191 insertions(+), 96 deletions(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 920c0017..53e841c4 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -26,6 +26,8 @@
 import appContent from "./components/appContent.vue";
 import loadingContent from "./components/loadingContent.vue";
 import MouseTrap from "mousetrap";
+// vue3 migration
+import { markRaw } from "vue";
 
 MouseTrap.prototype.stopCallback = function (e, element) {
   // if the element has the class "mousetrap" then no need to stop
@@ -52,8 +54,8 @@ export default {
   name: "App",
 
   components: {
-    appContent,
-    loadingContent,
+    appContent: markRaw(appContent),
+    loadingContent: markRaw(loadingContent),
   },
 
   data: function () {
@@ -192,7 +194,7 @@ export default {
     });
   },
 
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     // Disconnect the theme observer
     if (this.themeObserver) {
       this.themeObserver.disconnect();
diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index 0d217ce6..877d3620 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -77,8 +77,8 @@
 
 <script>
 // Import generic components
-import tabIcon from "./genericComponents/tabIcon";
-import tabContent from "./genericComponents/tabContent";
+import tabIcon from "./genericComponents/tabIcon.vue";
+import tabContent from "./genericComponents/tabContent.vue";
 
 // Import new content components
 import aboutContent from "./tabContentComponents/aboutContent.vue";
@@ -90,6 +90,8 @@ import scanListContent from "./tabContentComponents/scanListContent.vue";
 import settingsContent from "./tabContentComponents/settingsContent.vue";
 import slideScanContent from "./tabContentComponents/slideScanContent.vue";
 import viewContent from "./tabContentComponents/viewContent.vue";
+// vue3 migration
+import { shallowRef, markRaw, ref } from 'vue'
 
 // Import modal components for device initialisation
 import calibrationWizard from "./modalComponents/calibrationWizard.vue";
@@ -99,9 +101,9 @@ export default {
   name: "AppContent",
 
   components: {
-    tabIcon,
-    tabContent,
-    calibrationWizard,
+    tabIcon: markRaw(tabIcon),
+    tabContent: markRaw(tabContent),
+    calibrationWizard: markRaw(calibrationWizard),
   },
   data: function () {
     return {
@@ -111,26 +113,26 @@ export default {
           id: "settings",
           title: "Settings",
           icon: "settings",
-          component: settingsContent,
+          component: markRaw(settingsContent),
           class: "uk-margin-auto-top",
         },
         {
           id: "logging",
           title: "Logging",
           icon: "assignment_late",
-          component: loggingContent,
+          component: markRaw(loggingContent),
         },
         {
           id: "about",
           title: "About",
           icon: "info",
-          component: aboutContent,
+          component: markRaw(aboutContent),
         },
         {
           id: "power",
           title: "Power",
           icon: "power_settings_new",
-          component: powerContent,
+          component: markRaw(powerContent),
         },
       ],
       coreTopTabs: [
@@ -138,21 +140,21 @@ export default {
           id: "view",
           title: "View",
           icon: "visibility",
-          component: viewContent,
+          component: markRaw(viewContent),
           requiredThings: [],
         },
         {
           id: "control",
           title: "Control",
           icon: "gamepad",
-          component: controlContent,
+          component: markRaw(controlContent),
           requiredThings: [],
         },
         {
           id: "background-detect",
           title: "Background Detect",
           icon: "background_replace",
-          component: backgroundDetectContent,
+          component: markRaw(backgroundDetectContent),
           // While stage isn't needed; automatic background detect has little function
           // for a manual microscope.
           requiredThings: ["stage"],
@@ -161,14 +163,14 @@ export default {
           id: "slide-scan",
           title: "Slide Scan",
           icon: "settings_overscan",
-          component: slideScanContent,
+          component: markRaw(slideScanContent),
           requiredThings: ["smart_scan"],
         },
         {
           id: "scan-list",
           title: "Scan List",
           icon: "photo_library",
-          component: scanListContent,
+          component: markRaw(scanListContent),
           requiredThings: ["smart_scan"],
         },
       ],
diff --git a/webapp/src/components/labThingsComponents/actionButton.vue b/webapp/src/components/labThingsComponents/actionButton.vue
index b8ec4969..10e78a38 100644
--- a/webapp/src/components/labThingsComponents/actionButton.vue
+++ b/webapp/src/components/labThingsComponents/actionButton.vue
@@ -28,10 +28,14 @@
 <script>
 import ActionProgressBar from "./actionProgressBar.vue";
 import ActionStatusModal from "./actionStatusModal.vue";
+import { markRaw } from "vue";
 
 export default {
   name: "ActionButton",
-  components: { ActionProgressBar, ActionStatusModal },
+  components: { 
+    ActionProgressBar: markRaw(ActionProgressBar),
+    ActionStatusModal: markRaw(ActionStatusModal)
+  },
 
   props: {
     action: {
@@ -161,7 +165,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.submitOnEvent) {
       this.$root.$off(this.submitOnEvent);
     }
diff --git a/webapp/src/components/labThingsComponents/actionStatusModal.vue b/webapp/src/components/labThingsComponents/actionStatusModal.vue
index e605305e..fa3769e5 100644
--- a/webapp/src/components/labThingsComponents/actionStatusModal.vue
+++ b/webapp/src/components/labThingsComponents/actionStatusModal.vue
@@ -28,11 +28,15 @@
 import UIkit from "uikit";
 import ActionProgressBar from "./actionProgressBar.vue";
 import ActionLogDisplay from "./actionLogDisplay.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "ActionStatusModal",
-  components: { ActionProgressBar, ActionLogDisplay },
-
+  components: { 
+    ActionProgressBar: markRaw(ActionProgressBar),
+    ActionLogDisplay: markRaw(ActionLogDisplay)
+  },
   props: {
     title: {
       type: String,
diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
index 212e0665..a8da55c4 100644
--- a/webapp/src/components/labThingsComponents/inputFromSchema.vue
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -100,12 +100,14 @@
 
 <script>
 import syncPropertyButton from "./syncPropertyButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "InputFromSchema",
 
   components: {
-    syncPropertyButton,
+    syncPropertyButton: markRaw(syncPropertyButton),
   },
 
   props: {
diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index e60b21b4..fd691ab0 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -13,12 +13,14 @@
 <script>
 import { formatValue } from "@/js_utils/formatter.mjs";
 import InputFromSchema from "./inputFromSchema.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "PropertyControl",
 
   components: {
-    InputFromSchema,
+    InputFromSchema: markRaw(InputFromSchema),
   },
 
   props: {
diff --git a/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue b/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
index a49d3a0a..d62a0e97 100644
--- a/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
+++ b/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
@@ -17,13 +17,15 @@
 
 <script>
 import ActionButton from "./actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "ServerSpecifiedActionButton",
 
   components: {
-    ActionButton,
+    ActionButton: markRaw(ActionButton),
   },
 
   props: {
diff --git a/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue b/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
index b9d003bb..bdefde74 100644
--- a/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
+++ b/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
@@ -11,13 +11,15 @@
 
 <script>
 import PropertyControl from "./propertyControl.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "ServerSpecifiedPropertyControl",
 
   components: {
-    PropertyControl,
+    PropertyControl: markRaw(PropertyControl),
   },
 
   props: {
diff --git a/webapp/src/components/loadingContent.vue b/webapp/src/components/loadingContent.vue
index 863ea4a4..e4a4fa71 100644
--- a/webapp/src/components/loadingContent.vue
+++ b/webapp/src/components/loadingContent.vue
@@ -14,12 +14,16 @@
 
 <script>
 import devTools from "./tabContentComponents/aboutComponents/devTools.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "LoadingContent",
 
-  components: { devTools },
+  components: { 
+    devTools: markRaw(devTools) 
+  },
 
   data: function () {
     return {};
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
index 0656597f..fa01187e 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
@@ -19,13 +19,15 @@
 <script>
 import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 import cameraCalibrationSettings from "../../../tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "CameraMainCalibrationStep",
 
   components: {
-    stepTemplateWithStream,
-    cameraCalibrationSettings,
+    stepTemplateWithStream: markRaw(stepTemplateWithStream),
+    cameraCalibrationSettings: markRaw(cameraCalibrationSettings),
   },
 
   computed: {
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
index 62026ab4..c4eb8f1a 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
@@ -14,10 +14,13 @@
 import calibrationWizardTask from "./calibrationWizardTask.vue";
 import camCalibrationExplanation from "./cameraCalibrationSteps/camCalibrationExplanation.vue";
 import cameraMainCalibrationStep from "./cameraCalibrationSteps/cameraMainCalibrationStep.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "CameraCalibrationTask",
-  components: { calibrationWizardTask },
+  components: { 
+    calibrationWizardTask: markRaw(calibrationWizardTask) },
   props: {
     // Standard calibrationWizardTask props below:
     first: Boolean,
@@ -30,7 +33,7 @@ export default {
 
   data: function () {
     return {
-      steps: [{ component: camCalibrationExplanation }, { component: cameraMainCalibrationStep }],
+      steps: [{ component: markRaw(camCalibrationExplanation) }, { component: markRaw(cameraMainCalibrationStep)}],
     };
   },
 };
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue
index a442a9b1..1db10f36 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue
@@ -15,10 +15,14 @@ import calibrationWizardTask from "./calibrationWizardTask.vue";
 import csmExplanation from "./csmSteps/csmExplanation.vue";
 import focusStep from "./csmSteps/focusStep.vue";
 import runCsmStep from "./csmSteps/runCsmStep.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "CameraCalibrationTask",
-  components: { calibrationWizardTask },
+  components: { 
+    calibrationWizardTask: markRaw(calibrationWizardTask) 
+  },
   props: {
     // Standard calibrationWizardTask props below:
     first: Boolean,
@@ -31,7 +35,7 @@ export default {
 
   data: function () {
     return {
-      steps: [{ component: csmExplanation }, { component: focusStep }, { component: runCsmStep }],
+      steps: [{ component: markRaw(csmExplanation) }, { component: markRaw(focusStep) }, { component: markRaw(runCsmStep) }],
     };
   },
 };
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
index c043034d..3d1853bb 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
@@ -30,12 +30,15 @@
 <script>
 import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 import ActionButton from "../../../labThingsComponents/actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
+
 export default {
   name: "CameraMainCalibrationStep",
 
   components: {
-    stepTemplateWithStream,
-    ActionButton,
+    stepTemplateWithStream: markRaw(stepTemplateWithStream),
+    ActionButton: markRaw(ActionButton),
   },
 };
 </script>
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
index 25dcdee0..b699e0fb 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
@@ -18,13 +18,15 @@
 <script>
 import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 import CSMCalibrationSettings from "../../../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "CameraMainCalibrationStep",
 
   components: {
-    stepTemplateWithStream,
-    CSMCalibrationSettings,
+    stepTemplateWithStream: markRaw(stepTemplateWithStream),
+    CSMCalibrationSettings: markRaw(CSMCalibrationSettings),
   },
 
   mounted() {
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
index 4dedb280..88dc26f9 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
@@ -24,10 +24,14 @@ supplied by the wizard.
 
 <script>
 import calibrationWizardTask from "./calibrationWizardTask.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "SingleStepTask",
-  components: { calibrationWizardTask },
+  components: { 
+    calibrationWizardTask: markRaw(calibrationWizardTask) 
+  },
   props: {
     // This must be sent
     stepComponent: {
@@ -54,7 +58,7 @@ export default {
 
   data: function () {
     return {
-      steps: [{ component: this.stepComponent, props: this.stepProps }],
+      steps: [{ component: markRaw(this.stepComponent), props: this.stepProps }],
     };
   },
 };
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue
index 4859e838..e319bfb2 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue
@@ -8,12 +8,14 @@
 
 <script>
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "StepTemplateWithStream",
 
   components: {
-    miniStreamDisplay,
+    miniStreamDisplay: markRaw(miniStreamDisplay),
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index 6b4e8c6f..67deceb7 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -57,10 +57,14 @@
 
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "StatusPane",
-  components: { ActionButton },
+  components: { 
+    ActionButton: markRaw(ActionButton) 
+  },
 
   data: function () {
     return {
diff --git a/webapp/src/components/tabContentComponents/aboutContent.vue b/webapp/src/components/tabContentComponents/aboutContent.vue
index 9d825dfc..a5e508e3 100644
--- a/webapp/src/components/tabContentComponents/aboutContent.vue
+++ b/webapp/src/components/tabContentComponents/aboutContent.vue
@@ -24,13 +24,15 @@
 <script>
 import devTools from "./aboutComponents/devTools.vue";
 import statusPane from "./aboutComponents/statusPane.vue";
+//vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "AboutContent",
 
   components: {
-    devTools,
-    statusPane,
+    devTools: markRaw(devTools),
+    statusPane: markRaw(statusPane),
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
index 814ff9db..2546ad87 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
@@ -47,11 +47,13 @@
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import ServerSpecifiedPropertyControl from "../../labThingsComponents/serverSpecifiedPropertyControl.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   components: {
-    ActionButton,
-    ServerSpecifiedPropertyControl,
+    ActionButton: markRaw(ActionButton),
+    ServerSpecifiedPropertyControl: markRaw(ServerSpecifiedPropertyControl),
   },
 
   data() {
diff --git a/webapp/src/components/tabContentComponents/backgroundDetectContent.vue b/webapp/src/components/tabContentComponents/backgroundDetectContent.vue
index 7af5b0be..408d268c 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectContent.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectContent.vue
@@ -13,13 +13,15 @@
 <script>
 import paneBackgroundDetect from "./backgroundDetectComponents/paneBackgroundDetect";
 import streamDisplay from "./streamContent.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "BackgroundDetectContent",
 
   components: {
-    paneBackgroundDetect,
-    streamDisplay,
+    paneBackgroundDetect: markRaw(paneBackgroundDetect),
+    streamDisplay: markRaw(streamDisplay),
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue b/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
index ef70d6c6..e22e6c35 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
@@ -18,12 +18,14 @@
 </template>
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "AutofocusControl",
 
   components: {
-    ActionButton,
+    ActionButton: markRaw(ActionButton),
   },
 
   data: function () {
diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index c3252679..92b4e24b 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
@@ -34,14 +34,16 @@ import axios from "axios";
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import positionControl from "./positionControl.vue";
 import autofocusControl from "./autofocusControl.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "PaneControl",
 
   components: {
-    ActionButton,
-    positionControl,
-    autofocusControl,
+    ActionButton: markRaw(ActionButton),
+    positionControl: markRaw(positionControl),
+    autofocusControl: markRaw(autofocusControl),
   },
 
   computed: {
diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index 705cf920..59e08f07 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -61,13 +61,16 @@ and zero position buttons. It also includes the d-pad.
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue";
 import stageControlButtons from "./stageControlButtons.vue";
+// vue3 migration
+import { markRaw } from "vue";
+
 export default {
   name: "PaneControl",
 
   components: {
-    ActionButton,
-    syncPropertyButton,
-    stageControlButtons,
+    ActionButton: markRaw(ActionButton),
+    syncPropertyButton: markRaw(syncPropertyButton),
+    stageControlButtons: markRaw(stageControlButtons),
   },
 
   data: function () {
@@ -105,7 +108,7 @@ export default {
     await this.updatePosition();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     // Remove global signal listener to perform a move action
     this.$root.$off("globalMoveEvent");
     this.$root.$off("globalMoveInImageCoordinatesEvent");
diff --git a/webapp/src/components/tabContentComponents/controlContent.vue b/webapp/src/components/tabContentComponents/controlContent.vue
index 11cc87c4..98b44a8e 100644
--- a/webapp/src/components/tabContentComponents/controlContent.vue
+++ b/webapp/src/components/tabContentComponents/controlContent.vue
@@ -11,15 +11,17 @@
 </template>
 
 <script>
-import paneControl from "./controlComponents/paneControl";
+import paneControl from "./controlComponents/paneControl.vue";
 import streamDisplay from "./streamContent.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "ControlContent",
 
   components: {
-    paneControl,
-    streamDisplay,
+    paneControl: markRaw(paneControl),
+    streamDisplay: markRaw(streamDisplay) ,
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/loggingContent.vue b/webapp/src/components/tabContentComponents/loggingContent.vue
index 56bb19c6..46abef0c 100644
--- a/webapp/src/components/tabContentComponents/loggingContent.vue
+++ b/webapp/src/components/tabContentComponents/loggingContent.vue
@@ -83,13 +83,15 @@
 import axios from "axios";
 import Paginate from "vuejs-paginate";
 import EndpointButton from "../labThingsComponents/endpointButton.vue";
+//vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "LoggingContent",
 
   components: {
-    Paginate,
-    EndpointButton,
+    Paginate: markRaw(Paginate),
+    EndpointButton: markRaw(EndpointButton),
   },
 
   data: function () {
diff --git a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
index 72cd1cea..4e410676 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
@@ -59,7 +59,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     // Remove global signal listener to perform a gallery refresh
     this.osdViewer.destroy();
   },
diff --git a/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue b/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
index 46316ffc..d0fd46ac 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
@@ -82,11 +82,16 @@
 import axios from "axios";
 import actionButton from "../../labThingsComponents/actionButton.vue";
 import EndpointButton from "../../labThingsComponents/endpointButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "ScanCard",
-  components: { actionButton, EndpointButton },
+  components: { 
+    actionButton: markRaw(actionButton), 
+    EndpointButton: markRaw(EndpointButton) 
+  },
 
   props: {
     scanData: {
diff --git a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
index 80e17bf3..b589c9fc 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
@@ -55,10 +55,14 @@
 <script>
 import UIkit from "uikit";
 import OpenSeadragonViewer from "./openSeadragonViewer.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "ScanViewerModal",
-  components: { OpenSeadragonViewer },
+  components: { 
+    OpenSeadragonViewer: markRaw(OpenSeadragonViewer) 
+  },
   props: {
     selectedScan: {
       type: Object,
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index 09f731c0..16c0567c 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -100,11 +100,17 @@ import axios from "axios";
 import actionButton from "../labThingsComponents/actionButton.vue";
 import scanCard from "./scanListComponents/scanCard.vue";
 import ScanViewerModal from "./scanListComponents/scanViewer.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "ScanListContent",
-  components: { actionButton, scanCard, ScanViewerModal },
+  components: { 
+    actionButton: markRaw(actionButton), 
+    scanCard: markRaw(scanCard), 
+    ScanViewerModal: markRaw(ScanViewerModal) 
+  },
 
   data: function () {
     return {
@@ -171,7 +177,7 @@ export default {
     );
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     // Remove global signal listener to perform a gallery refresh
     this.$root.$off("globalUpdateScans");
     // Then we call that function here to unwatch
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
index 3ef2c9fa..ca01dc8e 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
@@ -17,14 +17,16 @@
 <script>
 import CSMCalibrationSettings from "./CSMSettingsComponents/CSMCalibrationSettings.vue";
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CSMSettings",
 
   components: {
-    CSMCalibrationSettings,
-    miniStreamDisplay,
+    CSMCalibrationSettings: markRaw(CSMCalibrationSettings),
+    miniStreamDisplay: markRaw(miniStreamDisplay),
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index c3b38711..1366f3a5 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -57,14 +57,16 @@
 <script>
 import ActionButton from "@/components/labThingsComponents/actionButton.vue";
 import matrixDisplay from "@/components/ui/matrixDisplay.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CSMCalibrationSettings",
 
   components: {
-    ActionButton,
-    matrixDisplay,
+    ActionButton: markRaw(ActionButton),
+    matrixDisplay: markRaw(matrixDisplay),
   },
 
   props: {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index 85d01345..4ba6058c 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -25,15 +25,17 @@
 import cameraCalibrationSettings from "./cameraSettingsComponents/cameraCalibrationSettings.vue";
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
 import ServerSpecifiedPropertyControl from "../../labThingsComponents/serverSpecifiedPropertyControl.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CameraSettings",
 
   components: {
-    cameraCalibrationSettings,
-    miniStreamDisplay,
-    ServerSpecifiedPropertyControl,
+    cameraCalibrationSettings: markRaw(cameraCalibrationSettings),
+    miniStreamDisplay: markRaw(miniStreamDisplay),
+    ServerSpecifiedPropertyControl: markRaw(ServerSpecifiedPropertyControl),
   },
 
   data() {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
index 6c1dc5b7..017c2953 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
@@ -22,13 +22,15 @@
 
 <script>
 import ServerSpecifiedActionButton from "../../../labThingsComponents/serverSpecifiedActionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CameraCalibrationSettings",
 
   components: {
-    ServerSpecifiedActionButton,
+    ServerSpecifiedActionButton: markRaw(ServerSpecifiedActionButton),
   },
 
   props: {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
index 4a5476ba..6bfbc3a9 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
@@ -8,14 +8,15 @@
 <script>
 import appSettings from "./displaySetttingsComponents/appSettings.vue";
 import streamSettings from "./displaySetttingsComponents/streamSettings.vue";
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "DisplaySettings",
 
   components: {
-    streamSettings,
-    appSettings,
+    streamSettings: markRaw(streamSettings),
+    appSettings: markRaw(appSettings),
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
index ad5d8842..3350e5f1 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
@@ -29,12 +29,14 @@
 
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "StageSettings",
 
   components: {
-    ActionButton,
+    ActionButton: markRaw(ActionButton),
   },
 
   data: function () {
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index 681fadce..35377c99 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -65,17 +65,20 @@ import cameraSettings from "./settingsComponents/cameraSettings.vue";
 import CSMSettings from "./settingsComponents/CSMSettings.vue";
 import stageSettings from "./settingsComponents/stageSettings.vue";
 // Import generic components
-import tabIcon from "../genericComponents/tabIcon";
-import tabContent from "../genericComponents/tabContent";
+import tabIcon from "../genericComponents/tabIcon.vue";
+import tabContent from "../genericComponents/tabContent.vue";
+// vue3 migration
+import { markRaw } from "vue";
+
 
 // Export main app
 export default {
   name: "SettingsContent",
 
   components: {
-    tabIcon,
-    tabContent,
-    calibrationWizard,
+    tabIcon: markRaw(tabIcon),
+    tabContent: markRaw(tabContent),
+    calibrationWizard: markRaw(calibrationWizard),
   },
 
   data: function () {
@@ -87,14 +90,14 @@ export default {
           id: "display",
           title: "Display",
           requireConnection: false,
-          component: displaySettings,
+          component: markRaw(displaySettings),
           requiredThings: [],
         },
         {
           id: "stage-control",
           title: "Stage Control Preferences",
           requireConnection: false,
-          component: stageControlSettings,
+          component: markRaw(stageControlSettings),
           requiredThings: ["stage"],
         },
       ],
@@ -103,21 +106,21 @@ export default {
           id: "camera",
           title: "Camera",
           requireConnection: true,
-          component: cameraSettings,
+          component: markRaw(cameraSettings),
           requiredThings: [],
         },
         {
           id: "stage",
           title: "Stage",
           requireConnection: true,
-          component: stageSettings,
+          component: markRaw(stageSettings),
           requiredThings: ["stage"],
         },
         {
           id: "mapping",
           title: "Camera to Stage Mapping",
           requireConnection: true,
-          component: CSMSettings,
+          component: markRaw(CSMSettings),
           requiredThings: ["camera_stage_mapping"],
         },
       ],
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index 0fdf6e1f..67684d85 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -153,17 +153,19 @@ import actionLogDisplay from "../labThingsComponents/actionLogDisplay.vue";
 import actionProgressBar from "../labThingsComponents/actionProgressBar.vue";
 import MiniStreamDisplay from "../genericComponents/miniStreamDisplay.vue";
 import ActionButton from "../labThingsComponents/actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "SlideScanContent",
 
   components: {
-    streamDisplay,
-    propertyControl,
-    actionLogDisplay,
-    actionProgressBar,
-    MiniStreamDisplay,
-    ActionButton,
+    streamDisplay: markRaw(streamDisplay),
+    propertyControl: markRaw(propertyControl),
+    actionLogDisplay: markRaw(actionLogDisplay),
+    actionProgressBar: markRaw(actionProgressBar),
+    MiniStreamDisplay: markRaw(MiniStreamDisplay),
+    ActionButton: markRaw(ActionButton),
   },
 
   data() {
diff --git a/webapp/src/components/tabContentComponents/streamContent.vue b/webapp/src/components/tabContentComponents/streamContent.vue
index ee1686d5..7079df96 100644
--- a/webapp/src/components/tabContentComponents/streamContent.vue
+++ b/webapp/src/components/tabContentComponents/streamContent.vue
@@ -81,7 +81,7 @@ export default {
     // Do nothing: preview stream now runs all the time
   },
 
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     // Remove global signal listener to change the GPU preview state
     this.$root.$off("globalTogglePreview");
     // Remove global signal listener to flash the stream element
diff --git a/webapp/src/components/tabContentComponents/viewContent.vue b/webapp/src/components/tabContentComponents/viewContent.vue
index 567686f4..d4038b3a 100644
--- a/webapp/src/components/tabContentComponents/viewContent.vue
+++ b/webapp/src/components/tabContentComponents/viewContent.vue
@@ -9,12 +9,14 @@
 
 <script>
 import streamDisplay from "./streamContent.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "ViewContent",
 
   components: {
-    streamDisplay,
+    streamDisplay: markRaw(streamDisplay),
   },
 };
 </script>
diff --git a/webapp/src/main.js b/webapp/src/main.js
index b71491cb..1ef25231 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -27,9 +27,6 @@ const app = createApp(App);
 // Use visibility observer
 app.use(VueObserveVisibility);
 
-// Disable production tip for Vue
-app.config.productionTip = false;
-
 // Use global mixins
 app.mixin(queryMixin);
 app.mixin(modalMixin);