From 234e063d2eae4ac7ab2de626ef4c6482f6e8a684 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Sun, 30 Mar 2025 15:23:22 +0200
Subject: [PATCH] feat(components): Register Generic component globally

---
 .jsconfig.json                               |  8 ++++++++
 eslint.config.js                             |  2 +-
 src/components/SearchInput.vue               |  2 +-
 src/components/Service.vue                   | 17 ++++++++++-------
 src/components/services/AdGuardHome.vue      |  4 ----
 src/components/services/CopyToClipboard.vue  |  4 ----
 src/components/services/Docuseal.vue         |  4 ----
 src/components/services/Emby.vue             |  4 ----
 src/components/services/FreshRSS.vue         |  4 ----
 src/components/services/Gitea.vue            |  4 ----
 src/components/services/Glances.vue          |  4 ----
 src/components/services/Gotify.vue           |  4 ----
 src/components/services/Healthchecks.vue     |  4 ----
 src/components/services/HomeAssistant.vue    |  4 ----
 src/components/services/Immich.vue           |  4 ----
 src/components/services/Jellystat.vue        |  4 ----
 src/components/services/Lidarr.vue           |  4 ----
 src/components/services/Mealie.vue           |  4 ----
 src/components/services/Medusa.vue           |  4 ----
 src/components/services/Mylar.vue            |  4 ----
 src/components/services/Nextcloud.vue        |  4 ----
 src/components/services/OctoPrint.vue        |  4 ----
 src/components/services/Olivetin.vue         |  4 ----
 src/components/services/OpenHAB.vue          |  4 ----
 src/components/services/PaperlessNG.vue      |  4 ----
 src/components/services/PeaNUT.vue           |  4 ----
 src/components/services/PiAlert.vue          |  4 ----
 src/components/services/PiHole.vue           |  4 ----
 src/components/services/Ping.vue             |  4 ----
 src/components/services/Portainer.vue        |  4 ----
 src/components/services/Prometheus.vue       |  4 ----
 src/components/services/Prowlarr.vue         |  4 ----
 src/components/services/Proxmox.vue          |  4 ----
 src/components/services/Radarr.vue           |  4 ----
 src/components/services/Readarr.vue          |  4 ----
 src/components/services/Rtorrent.vue         |  3 ---
 src/components/services/SABnzbd.vue          |  4 ----
 src/components/services/Scrutiny.vue         |  4 ----
 src/components/services/Sonarr.vue           |  4 ----
 src/components/services/SpeedtestTracker.vue |  4 ----
 src/components/services/Tautulli.vue         |  4 ----
 src/components/services/Tdarr.vue            |  4 ----
 src/components/services/ThemeChooser.vue     |  5 -----
 src/components/services/Traefik.vue          |  4 ----
 src/components/services/UptimeKuma.vue       |  4 ----
 src/components/services/WUD.vue              |  4 ----
 src/components/services/Wallabag.vue         |  4 ----
 src/components/services/qBittorrent.vue      |  2 --
 src/main.js                                  |  9 ++++++---
 49 files changed, 26 insertions(+), 186 deletions(-)
 create mode 100644 .jsconfig.json

diff --git a/.jsconfig.json b/.jsconfig.json
new file mode 100644
index 0000000..7c82acb
--- /dev/null
+++ b/.jsconfig.json
@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+      "paths": {
+        "@/*": ["./src/*"]
+      }
+    },
+    "exclude": ["node_modules", "dist"]
+  }
\ No newline at end of file
diff --git a/eslint.config.js b/eslint.config.js
index 7d5f195..24f9a96 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -18,6 +18,6 @@ export default [
     },
   },
   {
-    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+    ignores: ["**/dist/**", "**/dist-ssr/**", "**/coverage/**"],
   },
 ];
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
index 22e540e..1b9e30c 100644
--- a/src/components/SearchInput.vue
+++ b/src/components/SearchInput.vue
@@ -64,7 +64,7 @@ export default {
       });
     },
     hasFocus: function () {
-      return document.activeElement == this.$refs.search
+      return document.activeElement == this.$refs.search;
     },
     setSearchURL: function (value) {
       const url = new URL(window.location);
diff --git a/src/components/Service.vue b/src/components/Service.vue
index ac378ec..405bf10 100644
--- a/src/components/Service.vue
+++ b/src/components/Service.vue
@@ -1,10 +1,12 @@
 <template>
-  <component :is="component" :item="item" :proxy="proxy"></component>
+  <Generic v-if="isGeneric" :item="item"></Generic>
+  <component :is="component" v-else :item="item" :proxy="proxy"></component>
 </template>
 
 <script>
 import { defineAsyncComponent } from "vue";
-import Generic from "./services/Generic.vue";
+
+const defaultService = "Generic";
 
 export default {
   name: "Service",
@@ -13,12 +15,13 @@ export default {
     proxy: Object,
   },
   computed: {
+    isGeneric() {
+      return defaultService === (this.item.type || defaultService);
+    },
     component() {
-      const type = this.item.type || "Generic";
-      if (type === "Generic") {
-        return Generic;
-      }
-      return defineAsyncComponent(() => import(`./services/${type}.vue`));
+      return defineAsyncComponent(
+        () => import(`./services/${this.item.type}.vue`),
+      );
     },
   },
 };
diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index f215cdc..91d5b42 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "AdGuardHome",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/CopyToClipboard.vue b/src/components/services/CopyToClipboard.vue
index a7d6d2f..40453a9 100644
--- a/src/components/services/CopyToClipboard.vue
+++ b/src/components/services/CopyToClipboard.vue
@@ -15,13 +15,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "CopyToClipboard",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Docuseal.vue b/src/components/services/Docuseal.vue
index ad858a7..11cca14 100644
--- a/src/components/services/Docuseal.vue
+++ b/src/components/services/Docuseal.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Docuseal",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Emby.vue b/src/components/services/Emby.vue
index b4c97c7..5aa5f0d 100644
--- a/src/components/services/Emby.vue
+++ b/src/components/services/Emby.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Emby",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/FreshRSS.vue b/src/components/services/FreshRSS.vue
index e8265fa..89a9129 100644
--- a/src/components/services/FreshRSS.vue
+++ b/src/components/services/FreshRSS.vue
@@ -25,13 +25,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "FreshRSS",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Gitea.vue b/src/components/services/Gitea.vue
index e5eeb51..81768f8 100644
--- a/src/components/services/Gitea.vue
+++ b/src/components/services/Gitea.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Gitea",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Glances.vue b/src/components/services/Glances.vue
index 92eaf10..0630d88 100644
--- a/src/components/services/Glances.vue
+++ b/src/components/services/Glances.vue
@@ -17,13 +17,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Glances",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Gotify.vue b/src/components/services/Gotify.vue
index 161d648..46d9292 100644
--- a/src/components/services/Gotify.vue
+++ b/src/components/services/Gotify.vue
@@ -19,13 +19,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Gotify",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Healthchecks.vue b/src/components/services/Healthchecks.vue
index cf307ec..8827a4e 100644
--- a/src/components/services/Healthchecks.vue
+++ b/src/components/services/Healthchecks.vue
@@ -18,13 +18,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Healthchecks",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/HomeAssistant.vue b/src/components/services/HomeAssistant.vue
index 62f02a3..6bedbff 100644
--- a/src/components/services/HomeAssistant.vue
+++ b/src/components/services/HomeAssistant.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "HomeAssistant",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Immich.vue b/src/components/services/Immich.vue
index fcf06c7..1967588 100644
--- a/src/components/services/Immich.vue
+++ b/src/components/services/Immich.vue
@@ -27,13 +27,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Immich",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Jellystat.vue b/src/components/services/Jellystat.vue
index 9cdef54..adcd43d 100644
--- a/src/components/services/Jellystat.vue
+++ b/src/components/services/Jellystat.vue
@@ -20,13 +20,9 @@
 </template>
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Jellyfin",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Lidarr.vue b/src/components/services/Lidarr.vue
index ef74b90..970d238 100644
--- a/src/components/services/Lidarr.vue
+++ b/src/components/services/Lidarr.vue
@@ -27,13 +27,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Lidarr",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Mealie.vue b/src/components/services/Mealie.vue
index 8b1e212..c9206c8 100644
--- a/src/components/services/Mealie.vue
+++ b/src/components/services/Mealie.vue
@@ -19,13 +19,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Mealie",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Medusa.vue b/src/components/services/Medusa.vue
index 3a6ff51..4067eb9 100644
--- a/src/components/services/Medusa.vue
+++ b/src/components/services/Medusa.vue
@@ -33,13 +33,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Medusa",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Mylar.vue b/src/components/services/Mylar.vue
index fdc2e2f..8250417 100644
--- a/src/components/services/Mylar.vue
+++ b/src/components/services/Mylar.vue
@@ -22,13 +22,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Mylar",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Nextcloud.vue b/src/components/services/Nextcloud.vue
index ac732f5..1f574d7 100644
--- a/src/components/services/Nextcloud.vue
+++ b/src/components/services/Nextcloud.vue
@@ -16,13 +16,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Nextcloud",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/OctoPrint.vue b/src/components/services/OctoPrint.vue
index 61efb2a..626288a 100644
--- a/src/components/services/OctoPrint.vue
+++ b/src/components/services/OctoPrint.vue
@@ -51,13 +51,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "OctoPrint",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Olivetin.vue b/src/components/services/Olivetin.vue
index f0a022b..86aa60c 100644
--- a/src/components/services/Olivetin.vue
+++ b/src/components/services/Olivetin.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Olivetin",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/OpenHAB.vue b/src/components/services/OpenHAB.vue
index 34eab89..a7e2b54 100644
--- a/src/components/services/OpenHAB.vue
+++ b/src/components/services/OpenHAB.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "OpenHAB",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/PaperlessNG.vue b/src/components/services/PaperlessNG.vue
index 662ee82..216f57b 100644
--- a/src/components/services/PaperlessNG.vue
+++ b/src/components/services/PaperlessNG.vue
@@ -16,13 +16,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Paperless",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/PeaNUT.vue b/src/components/services/PeaNUT.vue
index 6b7103e..806dbac 100644
--- a/src/components/services/PeaNUT.vue
+++ b/src/components/services/PeaNUT.vue
@@ -19,13 +19,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "PeaNUT",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/PiAlert.vue b/src/components/services/PiAlert.vue
index 7b4a336..63bfebc 100644
--- a/src/components/services/PiAlert.vue
+++ b/src/components/services/PiAlert.vue
@@ -27,13 +27,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "PiAlert",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue
index 178acc0..a192ea0 100644
--- a/src/components/services/PiHole.vue
+++ b/src/components/services/PiHole.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "PiHole",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue
index 6a8bc58..88b03c7 100644
--- a/src/components/services/Ping.vue
+++ b/src/components/services/Ping.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Ping",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Portainer.vue b/src/components/services/Portainer.vue
index 6393b4e..f7c8634 100644
--- a/src/components/services/Portainer.vue
+++ b/src/components/services/Portainer.vue
@@ -22,13 +22,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Portainer",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Prometheus.vue b/src/components/services/Prometheus.vue
index 823d1c8..fa019dd 100644
--- a/src/components/services/Prometheus.vue
+++ b/src/components/services/Prometheus.vue
@@ -19,7 +19,6 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 const AlertsStatus = Object.freeze({
   firing: "firing",
@@ -29,9 +28,6 @@ const AlertsStatus = Object.freeze({
 
 export default {
   name: "Prometheus",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Prowlarr.vue b/src/components/services/Prowlarr.vue
index cde6f78..95890da 100644
--- a/src/components/services/Prowlarr.vue
+++ b/src/components/services/Prowlarr.vue
@@ -22,13 +22,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Prowlarr",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Proxmox.vue b/src/components/services/Proxmox.vue
index edd094e..975b045 100644
--- a/src/components/services/Proxmox.vue
+++ b/src/components/services/Proxmox.vue
@@ -76,13 +76,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Proxmox",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Radarr.vue b/src/components/services/Radarr.vue
index e308037..77a3af9 100644
--- a/src/components/services/Radarr.vue
+++ b/src/components/services/Radarr.vue
@@ -27,16 +27,12 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 const V3_API = "/api/v3";
 const LEGACY_API = "/api";
 
 export default {
   name: "Radarr",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Readarr.vue b/src/components/services/Readarr.vue
index e0776ef..52d38d4 100644
--- a/src/components/services/Readarr.vue
+++ b/src/components/services/Readarr.vue
@@ -27,15 +27,11 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 const API = "/api/v1";
 
 export default {
   name: "Readarr",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Rtorrent.vue b/src/components/services/Rtorrent.vue
index 397861e..7830a68 100644
--- a/src/components/services/Rtorrent.vue
+++ b/src/components/services/Rtorrent.vue
@@ -23,8 +23,6 @@
 </template>
 
 <script>
-import Generic from "./Generic.vue";
-
 // Units to add to download and upload rates.
 const units = ["B", "kiB", "MiB", "GiB"];
 
@@ -48,7 +46,6 @@ const displayRate = (rate) => {
 
 export default {
   name: "RTorrent",
-  components: { Generic },
   props: { item: Object },
   // Properties for download, upload, torrent count and errors.
   data: () => ({ dl: null, ul: null, count: null, error: null }),
diff --git a/src/components/services/SABnzbd.vue b/src/components/services/SABnzbd.vue
index 24d8b28..164cb39 100644
--- a/src/components/services/SABnzbd.vue
+++ b/src/components/services/SABnzbd.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "SABnzbd",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Scrutiny.vue b/src/components/services/Scrutiny.vue
index dca7810..17721ca 100644
--- a/src/components/services/Scrutiny.vue
+++ b/src/components/services/Scrutiny.vue
@@ -24,13 +24,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Scrutiny",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Sonarr.vue b/src/components/services/Sonarr.vue
index ac4885d..3a610d5 100644
--- a/src/components/services/Sonarr.vue
+++ b/src/components/services/Sonarr.vue
@@ -28,16 +28,12 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 const V3_API = "/api/v3";
 const LEGACY_API = "/api";
 
 export default {
   name: "Sonarr",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/SpeedtestTracker.vue b/src/components/services/SpeedtestTracker.vue
index 9de9582..6e4c5a6 100644
--- a/src/components/services/SpeedtestTracker.vue
+++ b/src/components/services/SpeedtestTracker.vue
@@ -15,13 +15,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "SpeedtestTracker",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Tautulli.vue b/src/components/services/Tautulli.vue
index 66ee5f4..77e781d 100644
--- a/src/components/services/Tautulli.vue
+++ b/src/components/services/Tautulli.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Tautulli",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Tdarr.vue b/src/components/services/Tdarr.vue
index b9fb2d2..bc5c892 100644
--- a/src/components/services/Tdarr.vue
+++ b/src/components/services/Tdarr.vue
@@ -28,13 +28,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Tdarr",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/ThemeChooser.vue b/src/components/services/ThemeChooser.vue
index 76a7f7d..3eb3cf6 100644
--- a/src/components/services/ThemeChooser.vue
+++ b/src/components/services/ThemeChooser.vue
@@ -20,16 +20,11 @@
 </template>
 
 <script>
-import Generic from "./Generic.vue";
-
 let currentTheme;
 const app = document.getElementById("app");
 
 export default {
   name: "ThemeChooser",
-  components: {
-    Generic,
-  },
   props: {
     item: Object,
   },
diff --git a/src/components/services/Traefik.vue b/src/components/services/Traefik.vue
index c043813..9d26bad 100644
--- a/src/components/services/Traefik.vue
+++ b/src/components/services/Traefik.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Traefik",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/UptimeKuma.vue b/src/components/services/UptimeKuma.vue
index 91cc084..626f3ed 100644
--- a/src/components/services/UptimeKuma.vue
+++ b/src/components/services/UptimeKuma.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "UptimeKuma",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/WUD.vue b/src/components/services/WUD.vue
index 359da2f..4cf010b 100644
--- a/src/components/services/WUD.vue
+++ b/src/components/services/WUD.vue
@@ -22,13 +22,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "WUD",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/Wallabag.vue b/src/components/services/Wallabag.vue
index 1c2b3c4..eff6d26 100644
--- a/src/components/services/Wallabag.vue
+++ b/src/components/services/Wallabag.vue
@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Wallabag",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,
diff --git a/src/components/services/qBittorrent.vue b/src/components/services/qBittorrent.vue
index f8e4fe2..829e850 100644
--- a/src/components/services/qBittorrent.vue
+++ b/src/components/services/qBittorrent.vue
@@ -28,7 +28,6 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 const units = ["B", "KB", "MB", "GB"];
 
 // Take the rate in bytes and keep dividing it by 1k until the lowest
@@ -50,7 +49,6 @@ const displayRate = (rate) => {
 
 export default {
   name: "QBittorrent",
-  components: { Generic },
   mixins: [service],
   props: { item: Object },
   data: () => ({ dl: null, ul: null, count: null, error: null }),
diff --git a/src/main.js b/src/main.js
index 54308ad..591435c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,9 +3,12 @@ import { createApp, h } from "vue";
 import App from "./App.vue";
 
 const app = createApp(App);
+import Generic from "./components/services/Generic.vue";
 
-app.component("DynamicStyle", (_props, context) => {
-  return h("style", {}, context.slots);
-});
+app
+  .component("Generic", Generic)
+  .component("DynamicStyle", (_props, context) => {
+    return h("style", {}, context.slots);
+  });
 
 app.mount("#app-mount");