diff --git a/webapp/src/components/DtuAdminView.vue b/webapp/src/components/DtuAdminView.vue
index 69b291c..beef744 100644
--- a/webapp/src/components/DtuAdminView.vue
+++ b/webapp/src/components/DtuAdminView.vue
@@ -74,9 +74,10 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
-export default {
+export default defineComponent({
   components: {
     BootstrapAlert,
   },
@@ -133,5 +134,5 @@ export default {
         );
     },
   },
-};
+});
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/FirmwareUpgradeView.vue b/webapp/src/components/FirmwareUpgradeView.vue
index cee7c2c..bd0e8b0 100644
--- a/webapp/src/components/FirmwareUpgradeView.vue
+++ b/webapp/src/components/FirmwareUpgradeView.vue
@@ -80,9 +80,10 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import SparkMD5 from "spark-md5";
 
-export default {
+export default defineComponent({
   data() {
     return {
       loading: true,
@@ -179,5 +180,5 @@ export default {
   mounted() {
     this.loading = false;
   },
-};
+});
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/HomeView.vue b/webapp/src/components/HomeView.vue
index 96eb844..1cc6e3c 100644
--- a/webapp/src/components/HomeView.vue
+++ b/webapp/src/components/HomeView.vue
@@ -70,10 +70,11 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import InverterChannelInfo from "@/components/partials/InverterChannelInfo";
 import bootstrap from "bootstrap/dist/js/bootstrap.js";
 
-export default {
+export default defineComponent({
   components: {
     InverterChannelInfo,
   },
@@ -153,5 +154,5 @@ export default {
       this.isFirstFetchAfterConnect = true;
     },
   },
-};
+});
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/InverterAdminView.vue b/webapp/src/components/InverterAdminView.vue
index 5a59f54..84f5a8e 100644
--- a/webapp/src/components/InverterAdminView.vue
+++ b/webapp/src/components/InverterAdminView.vue
@@ -110,9 +110,10 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
-export default {
+export default defineComponent({
   components: {
     BootstrapAlert,
   },
@@ -245,5 +246,5 @@ export default {
       this.editInverterData.type = "";
     },
   },
-};
+});
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/MqttAdminView.vue b/webapp/src/components/MqttAdminView.vue
index 38b29ed..88abe8f 100644
--- a/webapp/src/components/MqttAdminView.vue
+++ b/webapp/src/components/MqttAdminView.vue
@@ -211,9 +211,10 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
-export default {
+export default defineComponent({
   components: {
     BootstrapAlert,
   },
@@ -260,5 +261,5 @@ export default {
         );
     },
   },
-};
+});
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/MqttInfoView.vue b/webapp/src/components/MqttInfoView.vue
index 515582d..8696bbd 100644
--- a/webapp/src/components/MqttInfoView.vue
+++ b/webapp/src/components/MqttInfoView.vue
@@ -90,7 +90,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   data() {
     return {
       mqttDataList: [],
@@ -106,5 +108,5 @@ export default {
         .then((data) => (this.mqttDataList = data));
     },
   },
-};
+});
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/NetworkAdminView.vue b/webapp/src/components/NetworkAdminView.vue
index c63f7ec..8915276 100644
--- a/webapp/src/components/NetworkAdminView.vue
+++ b/webapp/src/components/NetworkAdminView.vue
@@ -168,9 +168,10 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
-export default {
+export default defineComponent({
   components: {
     BootstrapAlert,
   },
@@ -217,5 +218,5 @@ export default {
         );
     },
   },
-};
+});
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/NetworkInfoView.vue b/webapp/src/components/NetworkInfoView.vue
index e3bf2a0..99a6030 100644
--- a/webapp/src/components/NetworkInfoView.vue
+++ b/webapp/src/components/NetworkInfoView.vue
@@ -15,17 +15,18 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import WifiStationInfo from "./partials/WifiStationInfo.vue";
 import WifiApInfo from "./partials/WifiApInfo.vue";
 import InterfaceStationInfo from "./partials/InterfaceStationInfo.vue";
 import InterfaceApInfo from "./partials/InterfaceApInfo.vue";
 
-export default {
+export default defineComponent({
   components: {
     WifiStationInfo,
     WifiApInfo,
     InterfaceStationInfo,
     InterfaceApInfo,
   },
-};
+});
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/NtpAdminView.vue b/webapp/src/components/NtpAdminView.vue
index 27de5c8..0edebd7 100644
--- a/webapp/src/components/NtpAdminView.vue
+++ b/webapp/src/components/NtpAdminView.vue
@@ -67,9 +67,10 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
-export default {
+export default defineComponent({
   components: {
     BootstrapAlert,
   },
@@ -138,5 +139,5 @@ export default {
         );
     },
   },
-};
+});
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/NtpInfoView.vue b/webapp/src/components/NtpInfoView.vue
index 49e714e..ee9d616 100644
--- a/webapp/src/components/NtpInfoView.vue
+++ b/webapp/src/components/NtpInfoView.vue
@@ -60,7 +60,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   data() {
     return {
       ntpDataList: [],
@@ -76,5 +78,5 @@ export default {
         .then((data) => (this.ntpDataList = data));
     },
   },
-};
+});
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/SystemInfoView.vue b/webapp/src/components/SystemInfoView.vue
index ea7ef64..d9a499b 100644
--- a/webapp/src/components/SystemInfoView.vue
+++ b/webapp/src/components/SystemInfoView.vue
@@ -13,15 +13,16 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import HardwareInfo from "@/components/partials/HardwareInfo.vue";
 import FirmwareInfo from "@/components/partials/FirmwareInfo.vue";
 import MemoryInfo from "@/components/partials/MemoryInfo.vue";
 
-export default {
+export default defineComponent({
   components: {
     HardwareInfo,
     FirmwareInfo,
     MemoryInfo,
   },
-};
+});
 </script>
diff --git a/webapp/src/components/partials/FirmwareInfo.vue b/webapp/src/components/partials/FirmwareInfo.vue
index 47d0af9..545a64f 100644
--- a/webapp/src/components/partials/FirmwareInfo.vue
+++ b/webapp/src/components/partials/FirmwareInfo.vue
@@ -47,7 +47,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   data() {
     return {
       systemDataList: [],
@@ -79,5 +81,5 @@ export default {
         .then((data) => (this.systemDataList = data));
     },
   },
-};
+});
 </script>
diff --git a/webapp/src/components/partials/FsInfo.vue b/webapp/src/components/partials/FsInfo.vue
index 53441cd..f8fef83 100644
--- a/webapp/src/components/partials/FsInfo.vue
+++ b/webapp/src/components/partials/FsInfo.vue
@@ -25,7 +25,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   props: {
     name: String,
     total: Number,
@@ -36,5 +38,5 @@ export default {
       return Math.round((this.used / this.total) * 100);
     },
   },
-};
+});
 </script>
diff --git a/webapp/src/components/partials/HardwareInfo.vue b/webapp/src/components/partials/HardwareInfo.vue
index bf4575a..165765a 100644
--- a/webapp/src/components/partials/HardwareInfo.vue
+++ b/webapp/src/components/partials/HardwareInfo.vue
@@ -31,7 +31,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   data() {
     return {
       systemDataList: [],
@@ -47,5 +49,5 @@ export default {
         .then((data) => (this.systemDataList = data));
     },
   },
-};
+});
 </script>
diff --git a/webapp/src/components/partials/InterfaceApInfo.vue b/webapp/src/components/partials/InterfaceApInfo.vue
index 5980222..7ffa85d 100644
--- a/webapp/src/components/partials/InterfaceApInfo.vue
+++ b/webapp/src/components/partials/InterfaceApInfo.vue
@@ -23,7 +23,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   data() {
     return {
       networkDataList: [],
@@ -39,5 +41,5 @@ export default {
         .then((data) => (this.networkDataList = data));
     },
   },
-};
+});
 </script>
diff --git a/webapp/src/components/partials/InterfaceStationInfo.vue b/webapp/src/components/partials/InterfaceStationInfo.vue
index 3f16426..f1c4fa3 100644
--- a/webapp/src/components/partials/InterfaceStationInfo.vue
+++ b/webapp/src/components/partials/InterfaceStationInfo.vue
@@ -39,7 +39,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   data() {
     return {
       networkDataList: [],
@@ -55,5 +57,5 @@ export default {
         .then((data) => (this.networkDataList = data));
     },
   },
-};
+});
 </script>
diff --git a/webapp/src/components/partials/InverterChannelInfo.vue b/webapp/src/components/partials/InverterChannelInfo.vue
index 3cb7870..1724bbd 100644
--- a/webapp/src/components/partials/InverterChannelInfo.vue
+++ b/webapp/src/components/partials/InverterChannelInfo.vue
@@ -25,7 +25,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   props: {
     channelData: Object,
     channelNumber: Number,
@@ -35,5 +37,5 @@ export default {
       return parseFloat(num).toFixed(2);
     },
   },
-};
+});
 </script>
diff --git a/webapp/src/components/partials/MemoryInfo.vue b/webapp/src/components/partials/MemoryInfo.vue
index dda20fb..cfbe218 100644
--- a/webapp/src/components/partials/MemoryInfo.vue
+++ b/webapp/src/components/partials/MemoryInfo.vue
@@ -25,9 +25,10 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import FsInfo from "@/components/partials/FsInfo.vue";
 
-export default {
+export default defineComponent({
   components: {
     FsInfo,
   },
@@ -46,5 +47,5 @@ export default {
         .then((data) => (this.systemDataList = data));
     },
   },
-};
+});
 </script>
diff --git a/webapp/src/components/partials/WifiApInfo.vue b/webapp/src/components/partials/WifiApInfo.vue
index b7af381..2af68ac 100644
--- a/webapp/src/components/partials/WifiApInfo.vue
+++ b/webapp/src/components/partials/WifiApInfo.vue
@@ -36,7 +36,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   data() {
     return {
       networkDataList: [],
@@ -52,5 +54,5 @@ export default {
         .then((data) => (this.networkDataList = data));
     },
   },
-};
+});
 </script>
diff --git a/webapp/src/components/partials/WifiStationInfo.vue b/webapp/src/components/partials/WifiStationInfo.vue
index f1f47c3..4b62e86 100644
--- a/webapp/src/components/partials/WifiStationInfo.vue
+++ b/webapp/src/components/partials/WifiStationInfo.vue
@@ -40,7 +40,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   data() {
     return {
       networkDataList: [],
@@ -69,5 +71,5 @@ export default {
       return quality;
     },
   },
-};
+});
 </script>