From ba772add5416f6457c601ab0448e80c4dc73a42a Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 16 May 2024 09:03:34 -0700
Subject: [PATCH] refactor: instantiation of web components

---
 web/app.vue                 | 4 ++--
 web/pages/index.vue         | 5 +++--
 web/pages/webComponents.vue | 5 ++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/app.vue b/web/app.vue
index 5b3692452..04de9cdc3 100644
--- a/web/app.vue
+++ b/web/app.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 const nuxtApp = useNuxtApp();
+const { registerEntry } = useCustomElements();
 onBeforeMount(() => {
-  // @ts-expect-error - becuase customElements is not a type in nuxtApp and is not provided by the nuxt plugin
-  nuxtApp.$customElements.registerEntry('UnraidComponents');
+  registerEntry('UnraidComponents');
 });
 </script>
 
diff --git a/web/pages/index.vue b/web/pages/index.vue
index e3db871da..52ecee8c2 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -5,9 +5,10 @@ import type { SendPayloads } from '~/store/callback';
 import { serverState } from '~/_data/serverState';
 
 const nuxtApp = useNuxtApp();
+
+const { registerEntry } = useCustomElements();
 onBeforeMount(() => {
-  // @ts-expect-error - customElements doesn't provide types
-  nuxtApp.$customElements.registerEntry('UnraidComponents');
+  registerEntry('UnraidComponents');
 });
 
 const valueToMakeCallback = ref<SendPayloads | undefined>();
diff --git a/web/pages/webComponents.vue b/web/pages/webComponents.vue
index 36d11cbdd..b537d5b7e 100644
--- a/web/pages/webComponents.vue
+++ b/web/pages/webComponents.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { serverState } from '~/_data/serverState';
 
-const nuxtApp = useNuxtApp();
+const { registerEntry } = useCustomElements();
 onBeforeMount(() => {
-  // @ts-expect-error - customElements not providing types here
-  nuxtApp.$customElements.registerEntry('UnraidComponents');
+  registerEntry('UnraidComponents');
 });
 </script>