diff --git a/.vscode/settings.json b/.vscode/settings.json
index 19154c297..d65d79e3c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -22,13 +22,13 @@
 		"editor.formatOnSave": true,
 	},
 	"rust-analyzer.rustfmt.extraArgs": [
-		"--config", //                           Remove when rustfmt
-		"match_block_trailing_comma=true", //        2.0 is released
-		"--config", //                           Remove when `control_brace_style` becomes stable
-		"control_brace_style=ClosingNextLine" //     https://github.com/rust-lang/rustfmt/issues/3377
+		"--config",
+		"match_block_trailing_comma=true", // Remove when rustfmt2.0 is released https://github.com/rust-lang/rustfmt/issues/3380
+		"--config",
+		"control_brace_style=ClosingNextLine" // Remove when `control_brace_style` becomes stable https://github.com/rust-lang/rustfmt/issues/3377
 	],
 	"rust-analyzer.diagnostics.disabled": [
-		"missing-unsafe" //                      Remove when rust-analyzer bug fixes unsafe code on WASM JavaScript https://github.com/rust-analyzer/rust-analyzer/issues/5412
+		"missing-unsafe" // Remove when rust-analyzer bug fixes unsafe code on WASM JavaScript https://github.com/rust-analyzer/rust-analyzer/issues/5412
 	],
 	"vetur.format.options.useTabs": true,
 	"eslint.format.enable": true,
diff --git a/.vscode/vuecomp.code-snippets b/.vscode/vuecomp.code-snippets
new file mode 100644
index 000000000..0eb1fd698
--- /dev/null
+++ b/.vscode/vuecomp.code-snippets
@@ -0,0 +1,35 @@
+{
+	// Place your Graphite workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	"Vue Component Template": {
+		"prefix": "vuecomp",
+		"body": [
+			"<template>",
+			"\t<${1:div}>",
+			"\t\t$0",
+			"\t</${1:div}>",
+			"</template>",
+			"",
+			"<style lang=\"scss\">",
+			"",
+			"</style>",
+			"",
+			"<script lang=\"ts\">",
+			"import { defineComponent } from \"vue\";",
+			"",
+			"export default defineComponent({",
+			"\tcomponents: {",
+			"\t},",
+			"\tprops: {",
+			"\t},",
+			"});",
+			"</script>",
+			"",
+		],
+		"description": "Template for a new Vue component file"
+	}
+}
\ No newline at end of file
diff --git a/web-frontend/src/App.vue b/web-frontend/src/App.vue
index 10416d486..1152f82ad 100644
--- a/web-frontend/src/App.vue
+++ b/web-frontend/src/App.vue
@@ -2,18 +2,6 @@
 	<MainWindow />
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import MainWindow from "./components/window/MainWindow.vue";
-
-export default defineComponent({
-	name: "App",
-	components: {
-		MainWindow,
-	},
-});
-</script>
-
 <style lang="scss">
 html, body, #app {
 	margin: 0;
@@ -26,3 +14,12 @@ html, body, #app {
 	user-select: none;
 }
 </style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import MainWindow from "./components/window/MainWindow.vue";
+
+export default defineComponent({
+	components: { MainWindow },
+});
+</script>
diff --git a/web-frontend/src/components/footer/FooterBar.vue b/web-frontend/src/components/footer/FooterBar.vue
index 656042ef1..c8db97844 100644
--- a/web-frontend/src/components/footer/FooterBar.vue
+++ b/web-frontend/src/components/footer/FooterBar.vue
@@ -48,7 +48,6 @@ import { defineComponent } from "vue";
 import InputHint from "./InputHint.vue";
 
 export default defineComponent({
-	name: "FooterBar",
 	components: {
 		InputHint,
 	},
diff --git a/web-frontend/src/components/footer/InputHint.vue b/web-frontend/src/components/footer/InputHint.vue
index cb957ad2c..54aeb82dc 100644
--- a/web-frontend/src/components/footer/InputHint.vue
+++ b/web-frontend/src/components/footer/InputHint.vue
@@ -70,7 +70,6 @@ export enum MouseInputInteraction {
 }
 
 export default defineComponent({
-	name: "InputHint",
 	props: {
 		inputKeys: { type: Array, default: () => [] },
 		inputMouse: { type: String },
diff --git a/web-frontend/src/components/header/FileMenu.vue b/web-frontend/src/components/header/FileMenu.vue
index aa3b88abf..d96db5671 100644
--- a/web-frontend/src/components/header/FileMenu.vue
+++ b/web-frontend/src/components/header/FileMenu.vue
@@ -50,7 +50,5 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({
-	name: "FileMenu",
-});
+export default defineComponent({});
 </script>
diff --git a/web-frontend/src/components/header/HeaderBar.vue b/web-frontend/src/components/header/HeaderBar.vue
index 92bf06d87..2b7a04d33 100644
--- a/web-frontend/src/components/header/HeaderBar.vue
+++ b/web-frontend/src/components/header/HeaderBar.vue
@@ -36,7 +36,6 @@ import WindowTitle from "./WindowTitle.vue";
 import WindowButtons from "./WindowButtons.vue";
 
 export default defineComponent({
-	name: "HeaderBar",
 	components: {
 		FileMenu,
 		WindowTitle,
diff --git a/web-frontend/src/components/header/WindowButtons.vue b/web-frontend/src/components/header/WindowButtons.vue
index 5908f68f2..b226b7b20 100644
--- a/web-frontend/src/components/header/WindowButtons.vue
+++ b/web-frontend/src/components/header/WindowButtons.vue
@@ -49,7 +49,6 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-	name: "WindowButtons",
 	props: {
 		maximized: { type: Boolean, default: false },
 	},
diff --git a/web-frontend/src/components/header/WindowTitle.vue b/web-frontend/src/components/header/WindowTitle.vue
index 1f1069fd0..f75bc075e 100644
--- a/web-frontend/src/components/header/WindowTitle.vue
+++ b/web-frontend/src/components/header/WindowTitle.vue
@@ -16,7 +16,5 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({
-	name: "WindowTitle",
-});
+export default defineComponent({});
 </script>
diff --git a/web-frontend/src/components/layout/LayoutCol.vue b/web-frontend/src/components/layout/LayoutCol.vue
index 1881c58d1..6d8dd731f 100644
--- a/web-frontend/src/components/layout/LayoutCol.vue
+++ b/web-frontend/src/components/layout/LayoutCol.vue
@@ -15,7 +15,5 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({
-	name: "LayoutCol",
-});
+export default defineComponent({});
 </script>
diff --git a/web-frontend/src/components/layout/LayoutRow.vue b/web-frontend/src/components/layout/LayoutRow.vue
index d0742b6b6..b05243e9d 100644
--- a/web-frontend/src/components/layout/LayoutRow.vue
+++ b/web-frontend/src/components/layout/LayoutRow.vue
@@ -15,7 +15,5 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({
-	name: "LayoutRow",
-});
+export default defineComponent({});
 </script>
diff --git a/web-frontend/src/components/panel-system/DockablePanel.vue b/web-frontend/src/components/panel-system/DockablePanel.vue
index 10bc2ba61..9216f2133 100644
--- a/web-frontend/src/components/panel-system/DockablePanel.vue
+++ b/web-frontend/src/components/panel-system/DockablePanel.vue
@@ -134,7 +134,6 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-	name: "DockablePanel",
 	props: {
 		tabConstantWidths: { type: Boolean, default: false },
 		tabCloseButtons: { type: Boolean, default: false },
diff --git a/web-frontend/src/components/panel-system/PanelArea.vue b/web-frontend/src/components/panel-system/PanelArea.vue
index bdecf4d78..cd77cb721 100644
--- a/web-frontend/src/components/panel-system/PanelArea.vue
+++ b/web-frontend/src/components/panel-system/PanelArea.vue
@@ -45,7 +45,6 @@ import LayoutCol from "../layout/LayoutCol.vue";
 import DockablePanel from "./DockablePanel.vue";
 
 export default defineComponent({
-	name: "PanelArea",
 	components: {
 		LayoutRow,
 		LayoutCol,
diff --git a/web-frontend/src/components/window/MainWindow.vue b/web-frontend/src/components/window/MainWindow.vue
index 41c896717..760b2fca3 100644
--- a/web-frontend/src/components/window/MainWindow.vue
+++ b/web-frontend/src/components/window/MainWindow.vue
@@ -42,7 +42,6 @@ import PanelArea from "../panel-system/PanelArea.vue";
 import FooterBar from "../footer/FooterBar.vue";
 
 export default defineComponent({
-	name: "MainWindow",
 	components: {
 		LayoutRow,
 		LayoutCol,