diff --git a/package.json b/package.json
index 876f159f5c..8c51b61026 100644
--- a/package.json
+++ b/package.json
@@ -32,13 +32,13 @@
     "@capacitor/android": "^6.0.0",
     "@capacitor/core": "^6.0.0",
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "@panter/vue-i18next": "^0.15.2",
-    "@vitejs/plugin-vue2": "^2.3.1",
+    "@vitejs/plugin-vue": "^5.1.4",
     "crypto-es": "^2.1.0",
     "d3": "^7.9.0",
     "djv": "^2.1.4",
     "dompurify": "^2.5.5",
     "i18next": "^19.9.2",
+    "i18next-vue": "^5.0.0",
     "i18next-xhr-backend": "^3.2.2",
     "inflection": "^1.13.4",
     "jbox": "^1.3.3",
@@ -57,8 +57,9 @@
     "short-unique-id": "^4.4.4",
     "switchery-latest": "^0.8.2",
     "three": "~0.97.0",
+    "tiny-emitter": "^2.1.0",
     "vite-plugin-pwa": "^0.17.5",
-    "vue": "^2.7.16"
+    "vue": "^3.5.12"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
@@ -67,6 +68,7 @@
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
     "@storybook/vue": "^6.5.16",
+    "@vue/compiler-sfc": "^3.5.12",
     "babel-loader": "^8.3.0",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^7.20.0",
diff --git a/src/components/betaflight-logo/BetaflightLogo.vue b/src/components/betaflight-logo/BetaflightLogo.vue
index 54e2cca497..55ba542659 100644
--- a/src/components/betaflight-logo/BetaflightLogo.vue
+++ b/src/components/betaflight-logo/BetaflightLogo.vue
@@ -1,3 +1,26 @@
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  configuratorVersion: {
+    type: String,
+    required: true,
+  },
+  firmwareVersion: {
+    type: String,
+    default: '',
+  },
+  firmwareId: {
+    type: String,
+    default: '',
+  },
+  hardwareId: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
 <template>
   <div class="logo">
     <div class="logo_text">
@@ -15,29 +38,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    configuratorVersion: {
-      type: String,
-      required: true,
-    },
-    firmwareVersion: {
-      type: String,
-      default: '',
-    },
-    firmwareId: {
-      type: String,
-      default: '',
-    },
-    hardwareId: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
-
 <style>
 .logo {
   height: 70px;
@@ -116,3 +116,9 @@ export default {
   }
 }
 </style>
+
+export default {
+  components: {
+    BetaflightLogo
+  }
+}
diff --git a/src/components/data-flash/DataFlash.vue b/src/components/data-flash/DataFlash.vue
index cc5ee76148..c6cc90f847 100644
--- a/src/components/data-flash/DataFlash.vue
+++ b/src/components/data-flash/DataFlash.vue
@@ -24,42 +24,44 @@
     </div>
   </div>
 </template>
+
 <script>
-export default {
-    props: {
-        fcTotalSize: { type: Number, default: 100000 },
-        fcUsedSize: { type: Number, default: 82000 },
+import { defineComponent } from 'vue';
+export default defineComponent({
+  props: {
+    fcTotalSize: { type: Number, default: 100000 },
+    fcUsedSize: { type: Number, default: 82000 },
+  },
+  computed: {
+    supportDataflash() {
+      if (this.fcTotalSize > 0) return true;
+      else return false;
+    },
+    freeSpace() {
+      if (!this.supportDataflash) return;
+      const bytes = this.fcTotalSize - this.fcUsedSize;
+      if (this.fcUsedSize >= this.fcTotalSize) {
+        return '0B';
+      }
+      if (bytes < 1024) {
+        return `${bytes}B`;
+      }
+      const kilobytes = bytes / 1024;
+      if (kilobytes < 1024) {
+        return `${Math.round(kilobytes)}kB`;
+      }
+      const megabytes = kilobytes / 1024;
+      return `${megabytes.toFixed(1)}MB`;
     },
-    computed: {
-        supportDataflash() {
-            if (this.fcTotalSize > 0) return true;
-            else return false;
-        },
-        freeSpace() {
-            if (!this.supportDataflash) return;
-            const bytes = this.fcTotalSize - this.fcUsedSize;
-            if (this.fcUsedSize >= this.fcTotalSize) {
-                return "0B";
-            }
-            if (bytes < 1024) {
-                return `${bytes}B`;
-            }
-            const kilobytes = bytes / 1024;
-            if (kilobytes < 1024) {
-                return `${Math.round(kilobytes)}kB`;
-            }
-            const megabytes = kilobytes / 1024;
-            return `${megabytes.toFixed(1)}MB`;
-        },
-        indicatorWidth() {
-            if (!this.supportDataflash) return;
-            return `${Math.min(
-                (this.fcUsedSize / this.fcTotalSize) * 100,
-                100,
-            )}%`;
-        },
+    indicatorWidth() {
+        if (!this.supportDataflash) return;
+        return `${Math.min(
+          (this.fcUsedSize / this.fcTotalSize) * 100,
+          100,
+        )}%`;
     },
-};
+  },
+});
 </script>
 
 <style scoped>
diff --git a/src/components/eventBus.js b/src/components/eventBus.js
index 4b7292718a..4c6c5e568d 100644
--- a/src/components/eventBus.js
+++ b/src/components/eventBus.js
@@ -1,2 +1,8 @@
-import Vue from "vue";
-export const EventBus = new Vue();
+import emitter from 'tiny-emitter/instance';
+
+export const EventBus = {
+  $on: (...args) => emitter.on(...args),
+  $once: (...args) => emitter.once(...args),
+  $off: (...args) => emitter.off(...args),
+  $emit: (...args) => emitter.emit(...args),
+};
diff --git a/src/components/init.js b/src/components/init.js
index fb4a3678c3..d56c212730 100644
--- a/src/components/init.js
+++ b/src/components/init.js
@@ -5,8 +5,8 @@
 import '../js/localization.js';
 import '../js/injected_methods';
 import i18next from 'i18next';
-import Vue from "vue";
-import vueI18n from "./vueI18n.js";
+import { createApp } from "vue";
+import I18NextVue from "i18next-vue";
 import BatteryLegend from "./quad-status/BatteryLegend.vue";
 import BetaflightLogo from "./betaflight-logo/BetaflightLogo.vue";
 import StatusBar from "./status-bar/StatusBar.vue";
@@ -31,29 +31,28 @@ const betaflightModel = {
 };
 
 i18next.on('initialized', function() {
-
     console.log("i18n initialized, starting Vue framework");
 
+    const app = createApp({
+        data() { return betaflightModel; },
+    });
+
+    app
+    .use(I18NextVue, { i18next })
+    .component('BetaflightLogo', BetaflightLogo)
+    .component('BatteryLegend', BatteryLegend)
+    .component('StatusBar', StatusBar)
+    .component('BatteryIcon', BatteryIcon)
+    .component('PortPicker', PortPicker)
+    .mount('#main-wrapper');
+
     if (process.env.NODE_ENV === 'development') {
         console.log("Development mode enabled, installing Vue tools");
-        Vue.config.devtools = true;
+        // Vue.config.devtools = true;
+        app.config.performance = true;
     }
-
-    const app = new Vue({
-        i18n: vueI18n,
-        el: '#main-wrapper',
-        components: {
-            BatteryLegend,
-            BetaflightLogo,
-            StatusBar,
-            BatteryIcon,
-            PortPicker,
-        },
-        data: betaflightModel,
-    });
 });
 
-
 // Not strictly necessary here, but if needed
 // it's always possible to modify this model in
 // jquery land to trigger updates in vue
diff --git a/src/components/port-picker/FirmwareVirtualOption.vue b/src/components/port-picker/FirmwareVirtualOption.vue
index 47d0983e74..5a846a5413 100644
--- a/src/components/port-picker/FirmwareVirtualOption.vue
+++ b/src/components/port-picker/FirmwareVirtualOption.vue
@@ -22,24 +22,26 @@
 </template>
 
 <script>
-export default {
-    props: {
-        isVirtual: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    data() {
-        return {
-            firmwareVersions: [
-                { value: "1.46.0", label: "MSP: 1.46 | Firmware: 4.5.*" },
-                { value: "1.45.0", label: "MSP: 1.45 | Firmware: 4.4.*" },
-                { value: "1.44.0", label: "MSP: 1.44 | Firmware: 4.3.*" },
-                { value: "1.43.0", label: "MSP: 1.43 | Firmware: 4.2.*" },
-                { value: "1.42.0", label: "MSP: 1.42 | Firmware: 4.1.*" },
-                { value: "1.41.0", label: "MSP: 1.41 | Firmware: 4.0.*" },
-            ],
-        };
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    isVirtual: {
+      type: Boolean,
+      default: true,
     },
-};
+  },
+  data() {
+    return {
+      firmwareVersions: [
+        { value: '1.46.0', label: 'MSP: 1.46 | Firmware: 4.5.*' },
+        { value: '1.45.0', label: 'MSP: 1.45 | Firmware: 4.4.*' },
+        { value: '1.44.0', label: 'MSP: 1.44 | Firmware: 4.3.*' },
+        { value: '1.43.0', label: 'MSP: 1.43 | Firmware: 4.2.*' },
+        { value: '1.42.0', label: 'MSP: 1.42 | Firmware: 4.1.*' },
+        { value: '1.41.0', label: 'MSP: 1.41 | Firmware: 4.0.*' },
+      ],
+    };
+  },
+});
 </script>
diff --git a/src/components/port-picker/PortOverrideOption.vue b/src/components/port-picker/PortOverrideOption.vue
index 7480e4ac40..b93d69a0a1 100644
--- a/src/components/port-picker/PortOverrideOption.vue
+++ b/src/components/port-picker/PortOverrideOption.vue
@@ -11,13 +11,16 @@
         type="text"
         :value="value"
         @change="inputValueChanged($event)"
-      ></label>
+      >
+    </label>
   </div>
 </template>
 
 <script>
 import { set as setConfig } from "../../js/ConfigStorage";
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   props: {
     value: {
       type: String,
@@ -34,7 +37,7 @@ export default {
       this.$emit('input', event.target.value);
     },
   },
-};
+});
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
index 5a57c36377..45757bcad7 100644
--- a/src/components/port-picker/PortPicker.vue
+++ b/src/components/port-picker/PortPicker.vue
@@ -1,91 +1,99 @@
 <template>
   <div class="web-port-picker">
     <PortOverrideOption
-      v-if="value.selectedPort === 'manual'"
-      :value="value.portOverride"
-      @input="updateValue('portOverride', $event)"
+      v-if="modelValue.selectedPort === 'manual'"
+      :model-value="modelValue.portOverride"
+      @update:modelValue="updateValue('portOverride', $event)"
     />
     <FirmwareVirtualOption
-      v-if="value.selectedPort === 'virtual' && !isConnected"
-      :value="value.virtualMspVersion"
-      @input="updateValue('virtualMspVersion', $event)"
+      v-if="modelValue.selectedPort === 'virtual' && !isConnected"
+      :model-value="modelValue.virtualMspVersion"
+      @update:modelValue="updateValue('virtualMspVersion', $event)"
     />
     <PortsInput
-      :value="value"
+      :model-value="modelValue.selectedPort"
       :connected-bluetooth-devices="connectedBluetoothDevices"
       :connected-serial-devices="connectedSerialDevices"
       :connected-usb-devices="connectedUsbDevices"
       :disabled="disabled"
       :show-virtual-option="showVirtualOption"
       :show-manual-option="showManualOption"
-      @input="updateValue(null, $event)"
+      @update:modelValue="updateValue(null, $event)"
     />
   </div>
 </template>
 
 <script>
-import PortOverrideOption from "./PortOverrideOption.vue";
-import FirmwareVirtualOption from "./FirmwareVirtualOption.vue";
-import PortsInput from "./PortsInput.vue";
-import CONFIGURATOR from "../../js/data_storage";
+import { defineComponent } from 'vue';
+import PortOverrideOption from './PortOverrideOption.vue';
+import FirmwareVirtualOption from './FirmwareVirtualOption.vue';
+import PortsInput from './PortsInput.vue';
+import CONFIGURATOR from '../../js/data_storage';
 
-export default {
+export default defineComponent({
   components: {
     PortOverrideOption,
     FirmwareVirtualOption,
     PortsInput,
   },
+
   props: {
-      value: {
-        type: Object,
-        default: () => ({
-          selectedPort: "noselection",
-          selectedBaud: 115200,
-          portOverride: "/dev/rfcomm0",
-          virtualMspVersion: "1.46.0",
-          autoConnect: true,
-        }),
-      },
-      connectedBluetoothDevices: {
-        type: Array,
-        default: () => [],
-      },
-      connectedSerialDevices: {
-        type: Array,
-        default: () => [],
-      },
-      connectedUsbDevices: {
-        type: Array,
-        default: () => [],
-      },
-      showVirtualOption: {
-        type: Boolean,
-        default: true,
-      },
-      showManualOption: {
-        type: Boolean,
-        default: true,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
+    modelValue: {
+      type: Object,
+      default: () => ({
+        selectedPort: 'noselection',
+        selectedBaud: 115200,
+        portOverride: '/dev/rfcomm0',
+        virtualMspVersion: '1.46.0',
+        autoConnect: true,
+      }),
+    },
+    connectedBluetoothDevices: {
+      type: Array,
+      default: () => [],
+    },
+    connectedSerialDevices: {
+      type: Array,
+      default: () => [],
+    },
+    connectedUsbDevices: {
+      type: Array,
+      default: () => [],
+    },
+    showVirtualOption: {
+      type: Boolean,
+      default: true,
+    },
+    showManualOption: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
+
+  emits: [
+    'update:modelValue',
+  ],
+
   computed: {
     isConnected() {
       return CONFIGURATOR.connectionValid;
     },
   },
+
   methods: {
     updateValue(key, value) {
       if (key != null) {
-        this.$emit("input", { ...this.value, [key]: value });
+        this.$emit('update:modelValue', { ...this.modelValue, [key]: value });
       } else {
-        this.$emit("input", { ...this.value, ...value});
+        this.$emit('update:modelValue', { ...this.modelValue, ...value});
       }
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index 876bef8011..21103412b5 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -5,11 +5,11 @@
     <div class="dropdown dropdown-dark">
       <select
         id="port"
-        :key="value.selectedPort"
-        :value="value.selectedPort"
-        class="dropdown-select"
+        :key="modelValue.selectedPort"
+        :model-value="modelValue.selectedPort"
         :title="$t('firmwareFlasherManualPort')"
         :disabled="disabled"
+        class="dropdown-select"
         @change="onChangePort"
       >
         <option
@@ -62,13 +62,13 @@
     <div id="auto-connect-and-baud">
       <div
         id="auto-connect-switch"
-        :title="value.autoConnect ? $t('autoConnectEnabled') : $t('autoConnectDisabled')"
+        :title="modelValue.autoConnect ? $t('autoConnectEnabled') : $t('autoConnectDisabled')"
       >
         <input
           id="auto-connect"
           class="auto_connect togglesmall"
           type="checkbox"
-          :checked="value.autoConnect"
+          :checked="modelValue.autoConnect"
           @change="onChangeAutoConnect"
         >
         <span class="auto_connect">
@@ -76,17 +76,17 @@
         </span>
       </div>
       <div
-        v-if="value.selectedPort !== 'virtual' && value.selectedPort !== 'noselection'"
+        v-if="modelValue.selectedPort !== 'virtual' && modelValue.selectedPort !== 'noselection'"
         id="baudselect"
       >
         <div class="dropdown dropdown-dark">
           <select
             id="baud"
-            :value="value.selectedBauds"
             class="dropdown-select"
+            :model-value="modelValue.selectedBauds"
             :title="$t('firmwareFlasherBaudRate')"
             :disabled="disabled"
-            @input="updateValue('selectedBauds', $event.target.value)"
+            @update:modelValue="updateValue('selectedBauds', $event.target.value)"
           >
             <option
               v-for="baudRate in baudRates"
@@ -103,12 +103,13 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import { set as setConfig } from '../../js/ConfigStorage';
 import { EventBus } from '../eventBus';
 
-export default {
+export default defineComponent({
   props: {
-    value: {
+    modelValue: {
       type: Object,
       default: () => ({
         selectedPort: 'noselection',
@@ -141,29 +142,38 @@ export default {
       default: true,
     },
   },
+
+  emits: [
+    'update:modelValue',
+    'ports-input:request-permission',
+    'ports-input:request-permission-bluetooth',
+    'ports-input:change',
+  ],
+
   data() {
-      return {
-          showVirtual: false,
-          baudRates: [
-              { value: "1000000", label: "1000000" },
-              { value: "500000", label: "500000" },
-              { value: "250000", label: "250000" },
-              { value: "115200", label: "115200" },
-              { value: "57600", label: "57600" },
-              { value: "38400", label: "38400" },
-              { value: "28800", label: "28800" },
-              { value: "19200", label: "19200" },
-              { value: "14400", label: "14400" },
-              { value: "9600", label: "9600" },
-              { value: "4800", label: "4800" },
-              { value: "2400", label: "2400" },
-              { value: "1200", label: "1200" },
-          ],
-      };
+    return {
+      showVirtual: false,
+      baudRates: [
+        { value: '1000000', label: '1000000' },
+        { value: '500000', label: '500000' },
+        { value: '250000', label: '250000' },
+        { value: '115200', label: '115200' },
+        { value: '57600', label: '57600' },
+        { value: '38400', label: '38400' },
+        { value: '28800', label: '28800' },
+        { value: '19200', label: '19200' },
+        { value: '14400', label: '14400' },
+        { value: '9600', label: '9600' },
+        { value: '4800', label: '4800' },
+        { value: '2400', label: '2400' },
+        { value: '1200', label: '1200' },
+      ],
+    };
   },
+
   methods: {
     updateValue(key, value) {
-      this.$emit('input', { ...this.value, [key]: value });
+      this.$emit('update:modelValue', { ...this.modelValue, [key]: value });
     },
     onChangePort(event) {
       if (event.target.value === 'requestpermission') {
@@ -181,6 +191,6 @@ export default {
       return event;
     },
   },
-};
+});
 
 </script>
diff --git a/src/components/quad-status/BatteryIcon.vue b/src/components/quad-status/BatteryIcon.vue
index 65f190f045..ef2f5b06d4 100644
--- a/src/components/quad-status/BatteryIcon.vue
+++ b/src/components/quad-status/BatteryIcon.vue
@@ -11,8 +11,14 @@
 </template>
 <script>
 const NO_BATTERY_VOLTAGE_MAXIMUM = 1.8;
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   props: {
+    batteryState: {
+      type: String,
+      default: '',
+    },
     voltage: {
       type: Number,
       default: 0,
@@ -30,6 +36,7 @@ export default {
       default: 1,
     },
   },
+
   computed: {
     nbCells() {
       let nbCells = Math.floor(this.voltage / this.vbatmaxcellvoltage) + 1;
@@ -73,7 +80,7 @@ export default {
         : ((this.voltage - this.min) / (this.max - this.min)) * 100;
     },
   },
-};
+});
 </script>
 
 <style>
diff --git a/src/components/quad-status/BatteryLegend.vue b/src/components/quad-status/BatteryLegend.vue
index 8fc9b25b53..2ab59e6bdd 100644
--- a/src/components/quad-status/BatteryLegend.vue
+++ b/src/components/quad-status/BatteryLegend.vue
@@ -5,7 +5,9 @@
 </template>
 <script>
 const NO_BATTERY_VOLTAGE_MAXIMUM = 1.8;
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   props: {
     voltage: {
       type: Number,
@@ -22,11 +24,11 @@ export default {
       if (this.voltage === 0) {
         nbCells = 1;
       }
-      const cellsText = this.voltage > NO_BATTERY_VOLTAGE_MAXIMUM ? `${nbCells}S` : "USB";
+      const cellsText = this.voltage > NO_BATTERY_VOLTAGE_MAXIMUM ? `${nbCells}S` : 'USB';
       return `${this.voltage.toFixed(2)}V (${cellsText})`;
     },
   },
-};
+});
 </script>
 
 <style>
diff --git a/src/components/quad-status/BottomStatusIcons.vue b/src/components/quad-status/BottomStatusIcons.vue
index 1ca600f859..1f532a59d9 100644
--- a/src/components/quad-status/BottomStatusIcons.vue
+++ b/src/components/quad-status/BottomStatusIcons.vue
@@ -19,34 +19,29 @@
 </template>
 
 <script>
-import { bit_check } from "../../js/bit";
+import { defineComponent } from 'vue';
+import { bit_check } from '../../js/bit';
 
-export default {
-    props: {
-        lastReceivedTimestamp: { type: Number, default: 0 },
-        mode: { type: Number, default: 0 },
-        auxConfig: { type: Array, default: null },
-    },
-    computed: {
-        setActiveArmed() {
-            return (
-                this.auxConfig?.length &&
-                this.auxConfig?.includes("ARM") &&
-                bit_check(this.mode, this.auxConfig?.indexOf("ARM"))
-            );
-        },
-        setFailsafeActive() {
-            return (
-                this.auxConfig?.length &&
-                this.auxConfig?.includes("FAILSAFE") &&
-                bit_check(this.mode, this.auxConfig?.indexOf("FAILSAFE"))
-            );
-        },
-        setActiveLink() {
-            return (performance.now() - this.lastReceivedTimestamp < 300);
-        },
-    },
-};
+export default defineComponent({
+  props: {
+      lastReceivedTimestamp: { type: Number, default: 0 },
+      mode: { type: Number, default: 0 },
+      auxConfig: { type: Array, default: null },
+  },
+  computed: {
+      setActiveArmed() {
+          return (this.auxConfig?.length &&
+          this.auxConfig?.includes('ARM') && bit_check(this.mode, this.auxConfig?.indexOf('ARM')));
+      },
+      setFailsafeActive() {
+          return (this.auxConfig?.length &&
+          this.auxConfig?.includes('FAILSAFE') && bit_check(this.mode, this.auxConfig?.indexOf('FAILSAFE')));
+      },
+      setActiveLink() {
+          return (performance.now() - this.lastReceivedTimestamp < 300);
+      },
+  },
+});
 </script>
 
 <style scoped>
diff --git a/src/components/sensor-status/SensorStatus.vue b/src/components/sensor-status/SensorStatus.vue
index cbb41bbba2..999c05000a 100644
--- a/src/components/sensor-status/SensorStatus.vue
+++ b/src/components/sensor-status/SensorStatus.vue
@@ -85,62 +85,63 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import { bit_check } from "../../js/bit";
 
-export default {
-    props: {
-        sensorsDetected: {
-            type: Number,
-            default: 0,
-        },
-        gpsFixState: {
-            type: Number,
-            default: 0,
-        },
+export default defineComponent({
+  props: {
+    sensorsDetected: {
+      type: Number,
+      default: 0,
     },
-    computed: {
-        setAccActive() {
-            return this.haveSensor(this.sensorsDetected, "acc");
-        },
-        setGyroActive() {
-            return this.haveSensor(this.sensorsDetected, "gyro");
-        },
-        setBaroActive() {
-            return this.haveSensor(this.sensorsDetected, "baro");
-        },
-        setMagActive() {
-            return this.haveSensor(this.sensorsDetected, "mag");
-        },
-        setGpsActive() {
-            return this.haveSensor(this.sensorsDetected, "gps");
-        },
-        setGpsFixState() {
-            return this.gpsFixState !== 0;
-        },
-        setSonarActive() {
-            return this.haveSensor(this.sensorsDetected, "sonar");
-        },
+    gpsFixState: {
+      type: Number,
+      default: 0,
     },
-    methods: {
-        haveSensor(sensorsDetected, sensorCode) {
-            switch (sensorCode) {
-                case "acc":
-                    return bit_check(sensorsDetected, 0);
-                case "baro":
-                    return bit_check(sensorsDetected, 1);
-                case "mag":
-                    return bit_check(sensorsDetected, 2);
-                case "gps":
-                    return bit_check(sensorsDetected, 3);
-                case "sonar":
-                    return bit_check(sensorsDetected, 4);
-                case "gyro":
-                    return bit_check(sensorsDetected, 5);
-            }
-            return false;
-        },
+  },
+  computed: {
+    setAccActive() {
+      return this.haveSensor(this.sensorsDetected, 'acc');
     },
-};
+    setGyroActive() {
+      return this.haveSensor(this.sensorsDetected, 'gyro');
+    },
+    setBaroActive() {
+      return this.haveSensor(this.sensorsDetected, 'baro');
+    },
+    setMagActive() {
+      return this.haveSensor(this.sensorsDetected, 'mag');
+    },
+    setGpsActive() {
+      return this.haveSensor(this.sensorsDetected, 'gps');
+    },
+    setGpsFixState() {
+      return this.gpsFixState !== 0;
+    },
+    setSonarActive() {
+      return this.haveSensor(this.sensorsDetected, 'sonar');
+    },
+  },
+  methods: {
+    haveSensor(sensorsDetected, sensorCode) {
+      switch (sensorCode) {
+        case 'acc':
+          return bit_check(sensorsDetected, 0);
+        case 'baro':
+          return bit_check(sensorsDetected, 1);
+        case 'mag':
+          return bit_check(sensorsDetected, 2);
+        case 'gps':
+          return bit_check(sensorsDetected, 3);
+        case 'sonar':
+          return bit_check(sensorsDetected, 4);
+        case 'gyro':
+          return bit_check(sensorsDetected, 5);
+      }
+      return false;
+    },
+  },
+});
 </script>
 
 <style scoped lang="less">
diff --git a/src/components/status-bar/PortUtilization.vue b/src/components/status-bar/PortUtilization.vue
index 7664ddd840..b863427aec 100644
--- a/src/components/status-bar/PortUtilization.vue
+++ b/src/components/status-bar/PortUtilization.vue
@@ -3,21 +3,22 @@
     <span class="message">{{ $t("statusbar_port_utilization") }}</span>
     <ReadingStat
       message="statusbar_usage_download"
-      :value="usageDown"
+      :model-value="usageDown"
       unit="%"
     />
     <ReadingStat
       message="statusbar_usage_upload"
-      :value="usageUp"
+      :model-value="usageUp"
       unit="%"
     />
   </div>
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import ReadingStat from "./ReadingStat.vue";
 
-export default {
+export default defineComponent({
   components: {
     ReadingStat,
   },
@@ -31,5 +32,5 @@ export default {
       default: 0,
     },
   },
-};
+});
 </script>
diff --git a/src/components/status-bar/ReadingStat.vue b/src/components/status-bar/ReadingStat.vue
index 936ddefc38..adced52dcc 100644
--- a/src/components/status-bar/ReadingStat.vue
+++ b/src/components/status-bar/ReadingStat.vue
@@ -1,7 +1,7 @@
 <template>
   <span>
     <span class="message">{{ $t(message) }}</span>
-    <span class="value">{{ value }}</span>
+    <span class="value">{{ modelValue }}</span>
     <span
       v-if="unit"
       class="unit"
@@ -12,13 +12,15 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   props: {
     message: {
       type: String,
       default: "",
     },
-    value: {
+    modelValue: {
       type: Number,
       default: 0,
     },
@@ -27,5 +29,5 @@ export default {
       default: "",
     },
   },
-};
+});
 </script>
diff --git a/src/components/status-bar/StatusBar.vue b/src/components/status-bar/StatusBar.vue
index 7b58dea24d..40a73d4f96 100644
--- a/src/components/status-bar/StatusBar.vue
+++ b/src/components/status-bar/StatusBar.vue
@@ -6,19 +6,19 @@
     />
     <ReadingStat
       message="statusbar_packet_error"
-      :value="packetError"
+      :model-value="packetError"
     />
     <ReadingStat
       message="statusbar_i2c_error"
-      :value="i2cError"
+      :model-value="i2cError"
     />
     <ReadingStat
       message="statusbar_cycle_time"
-      :value="cycleTime"
+      :model-value="cycleTime"
     />
     <ReadingStat
       message="statusbar_cpu_load"
-      :value="cpuLoad"
+      :model-value="cpuLoad"
       unit="%"
     />
     <StatusBarVersion
@@ -31,11 +31,12 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import StatusBarVersion from "./StatusBarVersion.vue";
 import ReadingStat from "./ReadingStat.vue";
 import PortUtilization from "./PortUtilization.vue";
 
-export default {
+export default defineComponent({
   components: {
     PortUtilization,
     ReadingStat,
@@ -84,7 +85,7 @@ export default {
       default: "",
     },
   },
-};
+});
 </script>
 
 <style lang="less">
diff --git a/src/components/status-bar/StatusBarVersion.vue b/src/components/status-bar/StatusBarVersion.vue
index 9bdb0a1c84..a003ddb5ad 100644
--- a/src/components/status-bar/StatusBarVersion.vue
+++ b/src/components/status-bar/StatusBarVersion.vue
@@ -12,7 +12,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   props: {
     configuratorVersion: {
       type: String,
@@ -31,7 +33,7 @@ export default {
       default: "",
     },
   },
-};
+});
 </script>
 
 <style>
diff --git a/src/components/vueI18n.js b/src/components/vueI18n.js
deleted file mode 100644
index fa4174bbc1..0000000000
--- a/src/components/vueI18n.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Vue from "vue";
-import VueI18Next from "@panter/vue-i18next";
-import i18next from 'i18next';
-
-Vue.use(VueI18Next);
-
-const vueI18n = new VueI18Next(i18next);
-
-export default vueI18n;
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 3bec35ad21..46594b3527 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -236,6 +236,11 @@ PortHandler.selectActivePort = function(suggestedDevice) {
     this.portPicker.selectedPort = selectedPort || DEFAULT_PORT;
 
     console.log(`[PORTHANDLER] automatically selected device is '${this.portPicker.selectedPort}'`);
+
+    // hack to update Vue component
+    const p = document.getElementById('port');
+    p.value = this.portPicker.selectedPort;
+
     return selectedPort;
 };
 
diff --git a/vite.config.js b/vite.config.js
index 2e517faafa..f3f3c17364 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,15 +1,15 @@
 /// <reference types="vitest" />
 import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue2";
+import vue from "@vitejs/plugin-vue";
 import path from "node:path";
 import { readFileSync } from "node:fs";
 import copy from "rollup-plugin-copy";
-import pkg from './package.json';
-import * as child from 'child_process';
+import pkg from "./package.json";
+import * as child from "child_process";
 import { VitePWA } from "vite-plugin-pwa";
-import { resolve } from 'path';
+import { resolve } from "path";
 
-const commitHash = child.execSync('git rev-parse --short HEAD').toString();
+const commitHash = child.execSync("git rev-parse --short HEAD").toString();
 
 function serveFileFromDirectory(directory) {
     return (req, res, next) => {
@@ -53,15 +53,15 @@ function serveLocalesPlugin() {
 
 export default defineConfig({
     define: {
-        '__APP_VERSION__': JSON.stringify(pkg.version),
-        '__APP_PRODUCTNAME__': JSON.stringify(pkg.productName),
-        '__APP_REVISION__': JSON.stringify(commitHash),
+        __APP_VERSION__: JSON.stringify(pkg.version),
+        __APP_PRODUCTNAME__: JSON.stringify(pkg.productName),
+        __APP_REVISION__: JSON.stringify(commitHash),
     },
     build: {
         rollupOptions: {
             input: {
-                main: resolve(__dirname, 'src/index.html'),
-                receiver_msp: resolve(__dirname, 'src/receiver_msp/receiver_msp.html'),
+                main: resolve(__dirname, "src/index.html"),
+                receiver_msp: resolve(__dirname, "src/receiver_msp/receiver_msp.html"),
             },
         },
     },
@@ -115,7 +115,7 @@ export default defineConfig({
     resolve: {
         alias: {
             "/src": path.resolve(process.cwd(), "src"),
-            "vue": path.resolve(__dirname, "node_modules/vue/dist/vue.esm.js"),
+            "vue": path.resolve(__dirname, "node_modules/vue/dist/vue.esm-bundler.js"),
         },
     },
     server: {
diff --git a/yarn.lock b/yarn.lock
index 0a9e3ba61a..50a4ecef13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -277,7 +277,7 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.23.5", "@babel/parser@^7.24.7", "@babel/parser@^7.25.3", "@babel/parser@^7.25.9", "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
+"@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.24.7", "@babel/parser@^7.25.3", "@babel/parser@^7.25.9", "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.9.tgz#8fcaa079ac7458facfddc5cd705cc8005e4d3817"
   integrity sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==
@@ -1652,13 +1652,6 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
-"@panter/vue-i18next@^0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@panter/vue-i18next/-/vue-i18next-0.15.2.tgz#814f6774237e444eb9b69156e9c507d41b7fbd32"
-  integrity sha512-7VX9GyxHJNEJKa2CRzC294Oz5EEbzVDZ1o3O/P8gL/PWBmcFOFsuivRbP/1a9ga2ihv/NBzoCWMCNIEEeCcONQ==
-  dependencies:
-    deepmerge "^2.0.0"
-
 "@petamoriken/float16@^3.4.7":
   version "3.8.7"
   resolved "https://registry.yarnpkg.com/@petamoriken/float16/-/float16-3.8.7.tgz#16073fb1b9867eaa5b254573484d09100700aaa4"
@@ -2770,10 +2763,10 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@vitejs/plugin-vue2@^2.3.1":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue2/-/plugin-vue2-2.3.1.tgz#53078d3d9d50d9863f1fbb1c1ef7791a5fcd4948"
-  integrity sha512-/ksaaz2SRLN11JQhLdEUhDzOn909WEk99q9t9w+N12GjQCljzv7GyvAbD/p20aBUjHkvpGOoQ+FCOkG+mjDF4A==
+"@vitejs/plugin-vue@^5.1.4":
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz#72b8b705cfce36b00b59af196195146e356500c4"
+  integrity sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==
 
 "@vue/compiler-core@3.5.12":
   version "3.5.12"
@@ -2794,18 +2787,7 @@
     "@vue/compiler-core" "3.5.12"
     "@vue/shared" "3.5.12"
 
-"@vue/compiler-sfc@2.7.16":
-  version "2.7.16"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz#ff81711a0fac9c68683d8bb00b63f857de77dc83"
-  integrity sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==
-  dependencies:
-    "@babel/parser" "^7.23.5"
-    postcss "^8.4.14"
-    source-map "^0.6.1"
-  optionalDependencies:
-    prettier "^1.18.2 || ^2.0.0"
-
-"@vue/compiler-sfc@^3.2.0":
+"@vue/compiler-sfc@3.5.12", "@vue/compiler-sfc@^3.2.0", "@vue/compiler-sfc@^3.5.12":
   version "3.5.12"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz#6688120d905fcf22f7e44d3cb90f8dabc4dd3cc8"
   integrity sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==
@@ -2844,6 +2826,39 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/reactivity@3.5.12":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.12.tgz#a2815d91842ed7b9e7e7936c851923caf6b6e603"
+  integrity sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==
+  dependencies:
+    "@vue/shared" "3.5.12"
+
+"@vue/runtime-core@3.5.12":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.12.tgz#849207f203d0fd82971f19574d30dbe7134c78c7"
+  integrity sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==
+  dependencies:
+    "@vue/reactivity" "3.5.12"
+    "@vue/shared" "3.5.12"
+
+"@vue/runtime-dom@3.5.12":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz#6d4de3df49a90a460b311b1100baa5e2d0d1c8c9"
+  integrity sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==
+  dependencies:
+    "@vue/reactivity" "3.5.12"
+    "@vue/runtime-core" "3.5.12"
+    "@vue/shared" "3.5.12"
+    csstype "^3.1.3"
+
+"@vue/server-renderer@3.5.12":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.12.tgz#79c6bc3860e4e4ef80d85653c5d03fd94b26574e"
+  integrity sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==
+  dependencies:
+    "@vue/compiler-ssr" "3.5.12"
+    "@vue/shared" "3.5.12"
+
 "@vue/shared@3.5.12":
   version "3.5.12"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.12.tgz#f9e45b7f63f2c3f40d84237b1194b7f67de192e3"
@@ -4782,7 +4797,7 @@ cssstyle@^3.0.0:
   dependencies:
     rrweb-cssom "^0.6.0"
 
-csstype@^3.1.0:
+csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
@@ -5132,11 +5147,6 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^2.0.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
-  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
-
 deepmerge@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
@@ -6974,6 +6984,11 @@ husky@^4.3.8:
     slash "^3.0.0"
     which-pm-runs "^1.0.0"
 
+i18next-vue@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/i18next-vue/-/i18next-vue-5.0.0.tgz#466bf834671a9a93525679f6203042ce5152cc41"
+  integrity sha512-8jlctdGSKws9fcFlGlFOQRKCQQdUTKSs4D9pbZ6iitpzHQzQSVTdeDPvrjxLomsTjLK65W+MUGW6cwavAMGo9w==
+
 i18next-xhr-backend@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/i18next-xhr-backend/-/i18next-xhr-backend-3.2.2.tgz#769124441461b085291f539d91864e3691199178"
@@ -9554,7 +9569,7 @@ postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.4.14, postcss@^8.4.27, postcss@^8.4.47:
+postcss@^8.4.27, postcss@^8.4.47:
   version "8.4.47"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
   integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
@@ -11393,6 +11408,11 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-emitter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tiny-invariant@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
@@ -12157,13 +12177,16 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.7.16:
-  version "2.7.16"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
-  integrity sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==
+vue@^3.5.12:
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.12.tgz#e08421c601b3617ea2c9ef0413afcc747130b36c"
+  integrity sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==
   dependencies:
-    "@vue/compiler-sfc" "2.7.16"
-    csstype "^3.1.0"
+    "@vue/compiler-dom" "3.5.12"
+    "@vue/compiler-sfc" "3.5.12"
+    "@vue/runtime-dom" "3.5.12"
+    "@vue/server-renderer" "3.5.12"
+    "@vue/shared" "3.5.12"
 
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"