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>