diff --git a/web-frontend/src/App.vue b/web-frontend/src/App.vue
index 3244fdbd36..6e9f036282 100644
--- a/web-frontend/src/App.vue
+++ b/web-frontend/src/App.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 import MainWindow from "./components/window/MainWindow.vue";
 
-@Options({
+export default defineComponent({
+	name: "App",
 	components: {
 		MainWindow,
 	},
-})
-export default class App extends Vue {}
+});
 </script>
 
 <style lang="scss">
diff --git a/web-frontend/src/components/footer/FooterBar.vue b/web-frontend/src/components/footer/FooterBar.vue
index da1a63488c..656042ef17 100644
--- a/web-frontend/src/components/footer/FooterBar.vue
+++ b/web-frontend/src/components/footer/FooterBar.vue
@@ -44,18 +44,14 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
-import LayoutRow from "../layout/LayoutRow.vue";
-import LayoutCol from "../layout/LayoutCol.vue";
+import { defineComponent } from "vue";
 import InputHint from "./InputHint.vue";
 
-@Options({
+export default defineComponent({
+	name: "FooterBar",
 	components: {
-		LayoutRow,
-		LayoutCol,
 		InputHint,
 	},
-	props: {},
-})
-export default class FooterBar extends Vue {}
+});
+
 </script>
diff --git a/web-frontend/src/components/footer/InputHint.vue b/web-frontend/src/components/footer/InputHint.vue
index 01ac721eb5..cb957ad2c9 100644
--- a/web-frontend/src/components/footer/InputHint.vue
+++ b/web-frontend/src/components/footer/InputHint.vue
@@ -54,7 +54,7 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
 export enum MouseInputInteraction {
 	"None" = "None",
@@ -69,14 +69,14 @@ export enum MouseInputInteraction {
 	"MMBDrag" = "MMBDrag",
 }
 
-@Options({
-	components: {},
+export default defineComponent({
+	name: "InputHint",
 	props: {
-		inputKeys: { type: Array, default: [] },
+		inputKeys: { type: Array, default: () => [] },
 		inputMouse: { type: String },
 	},
 	computed: {
-		getMouseIconInnerSVG() {
+		getMouseIconInnerSVG(): string {
 			switch (this.inputMouse) {
 			case MouseInputInteraction.None: return `
 				<path style="fill:#888888;" d="M9,7c0,0.55-0.45,1-1,1l0,0C7.45,8,7,7.55,7,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
@@ -140,6 +140,5 @@ export enum MouseInputInteraction {
 			}
 		},
 	},
-})
-export default class InputHint extends Vue {}
+});
 </script>
diff --git a/web-frontend/src/components/header/FileMenu.vue b/web-frontend/src/components/header/FileMenu.vue
index 235fb667f1..aa3b88abf6 100644
--- a/web-frontend/src/components/header/FileMenu.vue
+++ b/web-frontend/src/components/header/FileMenu.vue
@@ -48,11 +48,9 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
-@Options({
-	components: {},
-	props: {},
-})
-export default class FileMenu extends Vue {}
+export default defineComponent({
+	name: "FileMenu",
+});
 </script>
diff --git a/web-frontend/src/components/header/HeaderBar.vue b/web-frontend/src/components/header/HeaderBar.vue
index 351d958da9..92bf06d87a 100644
--- a/web-frontend/src/components/header/HeaderBar.vue
+++ b/web-frontend/src/components/header/HeaderBar.vue
@@ -30,22 +30,17 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
-import LayoutRow from "../layout/LayoutRow.vue";
-import LayoutCol from "../layout/LayoutCol.vue";
+import { defineComponent } from "vue";
 import FileMenu from "./FileMenu.vue";
 import WindowTitle from "./WindowTitle.vue";
 import WindowButtons from "./WindowButtons.vue";
 
-@Options({
+export default defineComponent({
+	name: "HeaderBar",
 	components: {
-		LayoutRow,
-		LayoutCol,
 		FileMenu,
 		WindowTitle,
 		WindowButtons,
 	},
-	props: {},
-})
-export default class HeaderBar extends Vue {}
+});
 </script>
diff --git a/web-frontend/src/components/header/WindowButtons.vue b/web-frontend/src/components/header/WindowButtons.vue
index 237f5b835e..5908f68f27 100644
--- a/web-frontend/src/components/header/WindowButtons.vue
+++ b/web-frontend/src/components/header/WindowButtons.vue
@@ -46,13 +46,12 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
-@Options({
-	components: {},
+export default defineComponent({
+	name: "WindowButtons",
 	props: {
 		maximized: { type: Boolean, default: false },
 	},
-})
-export default class WindowButtons extends Vue {}
+});
 </script>
diff --git a/web-frontend/src/components/header/WindowTitle.vue b/web-frontend/src/components/header/WindowTitle.vue
index 18e867a88c..1f1069fd06 100644
--- a/web-frontend/src/components/header/WindowTitle.vue
+++ b/web-frontend/src/components/header/WindowTitle.vue
@@ -14,11 +14,9 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
-@Options({
-	components: {},
-	props: {},
-})
-export default class WindowTitle extends Vue {}
+export default defineComponent({
+	name: "WindowTitle",
+});
 </script>
diff --git a/web-frontend/src/components/layout/LayoutCol.vue b/web-frontend/src/components/layout/LayoutCol.vue
index fdb5712c41..1881c58d13 100644
--- a/web-frontend/src/components/layout/LayoutCol.vue
+++ b/web-frontend/src/components/layout/LayoutCol.vue
@@ -13,11 +13,9 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
-@Options({
-	components: {},
-	props: {},
-})
-export default class LayoutCol extends Vue {}
+export default defineComponent({
+	name: "LayoutCol",
+});
 </script>
diff --git a/web-frontend/src/components/layout/LayoutRow.vue b/web-frontend/src/components/layout/LayoutRow.vue
index 512dc61861..d0742b6b6e 100644
--- a/web-frontend/src/components/layout/LayoutRow.vue
+++ b/web-frontend/src/components/layout/LayoutRow.vue
@@ -13,11 +13,9 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
-@Options({
-	components: {},
-	props: {},
-})
-export default class LayoutRow extends Vue {}
+export default defineComponent({
+	name: "LayoutRow",
+});
 </script>
diff --git a/web-frontend/src/components/panel-system/DockablePanel.vue b/web-frontend/src/components/panel-system/DockablePanel.vue
index cbc1734807..10bc2ba615 100644
--- a/web-frontend/src/components/panel-system/DockablePanel.vue
+++ b/web-frontend/src/components/panel-system/DockablePanel.vue
@@ -131,16 +131,15 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
-@Options({
-	components: {},
+export default defineComponent({
+	name: "DockablePanel",
 	props: {
 		tabConstantWidths: { type: Boolean, default: false },
 		tabCloseButtons: { type: Boolean, default: false },
 		tabLabels: { type: Array, required: true },
 		tabActiveIndex: { type: Number, required: true },
 	},
-})
-export default class DockablePanel extends Vue {}
+});
 </script>
diff --git a/web-frontend/src/components/panel-system/PanelArea.vue b/web-frontend/src/components/panel-system/PanelArea.vue
index 55e4f42d1f..bdecf4d784 100644
--- a/web-frontend/src/components/panel-system/PanelArea.vue
+++ b/web-frontend/src/components/panel-system/PanelArea.vue
@@ -39,18 +39,17 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
 import DockablePanel from "./DockablePanel.vue";
 
-@Options({
+export default defineComponent({
+	name: "PanelArea",
 	components: {
 		LayoutRow,
 		LayoutCol,
 		DockablePanel,
 	},
-	props: {},
-})
-export default class PanelArea extends Vue {}
+});
 </script>
diff --git a/web-frontend/src/components/window/MainWindow.vue b/web-frontend/src/components/window/MainWindow.vue
index f57b4e42c0..41c8967173 100644
--- a/web-frontend/src/components/window/MainWindow.vue
+++ b/web-frontend/src/components/window/MainWindow.vue
@@ -34,14 +34,15 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
 import HeaderBar from "../header/HeaderBar.vue";
 import PanelArea from "../panel-system/PanelArea.vue";
 import FooterBar from "../footer/FooterBar.vue";
 
-@Options({
+export default defineComponent({
+	name: "MainWindow",
 	components: {
 		LayoutRow,
 		LayoutCol,
@@ -49,7 +50,5 @@ import FooterBar from "../footer/FooterBar.vue";
 		PanelArea,
 		FooterBar,
 	},
-	props: {},
-})
-export default class MainWindow extends Vue {}
+});
 </script>