component formatting and types

app.vue

@@ -3,24 +3,19 @@
 </template>
 
 <script setup lang="ts">
-import type SEOComponent from "./types/component/seoComponent";
-import type Global from "./types/single/global";
+import calculateTitle from "./composables/calculateTitle";
+import provideGlobal from "./composables/provideGlobal";
 
-const runtimeConfig = useRuntimeConfig();
-const appTitle = runtimeConfig.public.app.title;
+const { SEO } = await provideGlobal();
+const title = await calculateTitle();
 
-const { findOne, find } = useStrapi();
-const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
-
-const {
-  metaTitle, metaDescription, keywords,
-} = global.value?.data?.SEO ?? ({} as SEOComponent);
+const { metaDescription, keywords } = SEO ?? {};
 
 useHead({
-  title: metaTitle ?? appTitle,
+  title: title,
   meta: [
-    {name: "description", content: metaDescription},
-    {name: "keywords", content: keywords},
-  ]
+    { name: "description", content: metaDescription },
+    { name: "keywords", content: keywords },
+  ],
 });
 </script>