From 690a21cc19e29fd0853fced44a0e7a25530dfb25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Svebor=20Sori=C4=87?=
 <74537302+Sveb@users.noreply.github.com>
Date: Fri, 3 Oct 2025 15:27:09 +0200
Subject: [PATCH 1/4] Adjusts the way wp-seo fetches data - testing

---
 app/components/wp-seo.vue | 36 +++++++++++++++++++++++-------------
 app/layouts/default.vue   |  2 +-
 app/pages/shop.vue        | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 14 deletions(-)
 create mode 100644 app/pages/shop.vue

diff --git a/app/components/wp-seo.vue b/app/components/wp-seo.vue
index af8f96d..25de4f8 100644
--- a/app/components/wp-seo.vue
+++ b/app/components/wp-seo.vue
@@ -33,26 +33,36 @@ const props = defineProps({
     imageUrl: {
         type: String,
         default: ''
+    },
+    fetchData: {
+        type: Boolean,
+        default: true
     }
 })
 
 // Fetch data from WP
 const parsedPath = computed<string>(() => props.path || route.path || '')
+const data = ref({})
 
 // Fetch data from WP
-const { data, error } = await useWpFetch(`/post`, {
-    query: {
-        uri: parsedPath
-    },
-    pick: ['title', 'excerpt', 'content', 'featuredMedia'],
-    onResponseError() {
-        console.warn('<wp-seo> Fetch Error:', parsedPath.value)
-    }
-})
-
-// On error, set data to empty object
-if (error.value) {
-    data.value = {}
+if (props.fetchData) {
+    console.log('fetching data')
+    const { data: fetchedData, error } = await useWpFetch(`/post`, {
+        onResponse() {
+            data.value = fetchedData.value
+        },
+        query: {
+            uri: parsedPath
+        },
+        pick: ['title', 'excerpt', 'content', 'featuredMedia'],
+        onResponseError() {
+            console.warn('<wp-seo> Fetch Error:', parsedPath.value, error)
+        }
+    })
+    console.log('data', data.value)
+}
+else {
+    console.log('not fetching data')
 }
 
 // Computeds
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 64ec28a..7a4e2c1 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
     <main :class="classes">
-        <wp-seo />
+        <wp-seo :fetch-data="false" />
 
         <global-header>
             <slot name="breadcrumbs">
diff --git a/app/pages/shop.vue b/app/pages/shop.vue
new file mode 100644
index 0000000..6c0a832
--- /dev/null
+++ b/app/pages/shop.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="shop">
+        Shop page here
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+
+// Data
+
+// Computed
+
+// Methods
+
+// Watchers
+
+// Lifecycle Hooks
+</script>
+
+<style scoped>
+.shop {
+    /* Hover */
+    @media (--has-hover) {
+    }
+    /* Breakpoints */
+    @media (--gt-cinema) {
+    }
+    @media (--lt-tablet) {
+    }
+    @media (--lt-phone) {
+    }
+}
+</style>

From 2dab3220144e1191f574bfa1044bdd656c639c3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Svebor=20Sori=C4=87?=
 <74537302+Sveb@users.noreply.github.com>
Date: Fri, 3 Oct 2025 15:40:51 +0200
Subject: [PATCH 2/4] Update default.vue

---
 app/layouts/default.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 7a4e2c1..4fdb6c8 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
     <main :class="classes">
-        <wp-seo :fetch-data="false" />
+        <wp-seo :fetch-data="stopOnShopRoutes" />
 
         <global-header>
             <slot name="breadcrumbs">
@@ -15,5 +15,7 @@
 </template>
 
 <script setup lang="ts">
+const route = useRoute()
 const classes = computed(() => ['default-layout'])
+const stopOnShopRoutes = computed(() => route.path.startsWith('/shop'))
 </script>

From e6ae2190be0b1b64665e07e972a057d8491ee8ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Svebor=20Sori=C4=87?=
 <74537302+Sveb@users.noreply.github.com>
Date: Fri, 3 Oct 2025 15:44:43 +0200
Subject: [PATCH 3/4] Update default.vue

---
 app/layouts/default.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 4fdb6c8..010338a 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
     <main :class="classes">
-        <wp-seo :fetch-data="stopOnShopRoutes" />
+        <wp-seo :fetch-data="!shopRoute" />
 
         <global-header>
             <slot name="breadcrumbs">
@@ -17,5 +17,5 @@
 <script setup lang="ts">
 const route = useRoute()
 const classes = computed(() => ['default-layout'])
-const stopOnShopRoutes = computed(() => route.path.startsWith('/shop'))
+const shopRoute = computed(() => route.path.startsWith('/shop'))
 </script>

From 9909f859f06d15ba3ecd8d7e479952b10cf65b48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Svebor=20Sori=C4=87?=
 <74537302+Sveb@users.noreply.github.com>
Date: Fri, 3 Oct 2025 17:48:42 +0200
Subject: [PATCH 4/4] Adjusts the way WpSeo fetches data

- the composable useWpFetch wrapping the Vue Composable useFetch can't be used inside of a conditional or a function, always fetches data regardless.
- useFetch can be used only inside top level of script setup or another comaposable
---
 app/components/wp-seo.vue | 131 ++++++++++++++++++++++++++++----------
 app/layouts/default.vue   |   4 +-
 2 files changed, 100 insertions(+), 35 deletions(-)

diff --git a/app/components/wp-seo.vue b/app/components/wp-seo.vue
index 25de4f8..251ab4d 100644
--- a/app/components/wp-seo.vue
+++ b/app/components/wp-seo.vue
@@ -1,18 +1,36 @@
 <template>
     <div class="wp-seo">
-        <!-- Print content to page for SEO gain -->
         <h1
             v-if="parsedTitle"
-            v-html="parsedTitle"
-        />
+        >
+            {{ parsedTitle }}
+        </h1>
         <div
             v-if="parsedDescription"
-            v-html="parsedDescription"
-        />
+        >
+            {{ parsedDescription }}
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import keysToCamelCase from '~/utils/keysToCamelCase'
+
+interface WpSeoData {
+    title?: string
+    content?: string
+    featuredMedia?: {
+        src?: string
+    }
+}
+
+interface SiteSettings {
+    title?: string
+    description?: string
+    themeScreenshotUrl?: string
+    frontendUrl?: string
+}
+
 const siteStore = useSiteStore()
 const route = useRoute()
 
@@ -34,41 +52,73 @@ const props = defineProps({
         type: String,
         default: ''
     },
-    fetchData: {
+    fetchSeo: {
         type: Boolean,
         default: true
     }
 })
 
-// Fetch data from WP
 const parsedPath = computed<string>(() => props.path || route.path || '')
-const data = ref({})
-
-// Fetch data from WP
-if (props.fetchData) {
-    console.log('fetching data')
-    const { data: fetchedData, error } = await useWpFetch(`/post`, {
-        onResponse() {
-            data.value = fetchedData.value
-        },
-        query: {
-            uri: parsedPath
-        },
-        pick: ['title', 'excerpt', 'content', 'featuredMedia'],
-        onResponseError() {
-            console.warn('<wp-seo> Fetch Error:', parsedPath.value, error)
+
+// Use useAsyncData for SEO data - must run server-side
+const { data: wpData } = useAsyncData(
+    // Dynamic key based on path for proper caching
+    () => `seo-${parsedPath.value}`,
+    async () => {
+        if (!props.fetchSeo) {
+            return {} as WpSeoData
         }
-    })
-    console.log('data', data.value)
-}
-else {
-    console.log('not fetching data')
-}
+
+        const baseURL = useRuntimeConfig().public.wordpressApiUrl
+        const { enabled } = usePreviewMode()
+
+        const response = await $fetch(`/post`, {
+            baseURL,
+            query: {
+                uri: parsedPath.value
+            },
+            credentials: enabled.value ? 'include' : undefined,
+            server: !enabled.value
+        })
+
+        const transformedData = keysToCamelCase(response || {}) as WpSeoData
+        return transformedData
+    },
+
+    {
+        // Run on server side for SEO
+        server: true,
+        default: () => ({} as WpSeoData)
+    }
+)
 
 // Computeds
-const parsedTitle = computed<string>(() => props.title || data.value?.title || siteStore.settings?.title || undefined)
-const parsedDescription = computed<string>(() => props.description || data.value?.excerpt || data.value?.content || siteStore.settings.description || undefined)
-const parsedImage = computed<string>(() => props.imageUrl || data.value?.featuredMedia?.src || siteStore.settings?.themeScreenshotUrl || undefined)
+const parsedTitle = computed<string | undefined>(() =>
+    props.title
+    || wpData.value?.title
+    || (siteStore.settings as SiteSettings)?.title
+    || undefined
+)
+
+const parsedDescription = computed<string | undefined>(() =>
+    props.description
+    || wpData.value?.content
+    || (siteStore.settings as SiteSettings)?.description
+    || undefined
+)
+
+const parsedImage = computed<string | undefined>(() =>
+    props.imageUrl
+    || wpData.value?.featuredMedia?.src
+    || (siteStore.settings as SiteSettings)?.themeScreenshotUrl
+    || undefined
+)
+
+// Get site URL from store
+const siteUrl = computed(() => {
+    const settings = siteStore.settings as SiteSettings
+    return settings?.frontendUrl || ''
+})
 
 // Set meta tags
 useSeoMeta({
@@ -76,8 +126,25 @@ useSeoMeta({
     ogTitle: () => parsedTitle.value,
     description: () => parsedDescription.value,
     ogDescription: () => parsedDescription.value,
-    ogImage: () => parsedImage.value
+    ogImage: () => parsedImage.value,
+    ogType: () => 'website',
+    ogUrl: () => `${siteUrl.value}${route.path}`,
+    twitterCard: () => 'summary_large_image',
+    twitterTitle: () => parsedTitle.value,
+    twitterDescription: () => parsedDescription.value,
+    twitterImage: () => parsedImage.value,
+    robots: () => 'index, follow'
 })
+
+// Set canonical URL
+useHead(() => ({
+    link: [
+        {
+            rel: 'canonical',
+            href: `${siteUrl.value}${route.path}`
+        }
+    ]
+}))
 </script>
 
 <style scoped>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 010338a..64ec28a 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
     <main :class="classes">
-        <wp-seo :fetch-data="!shopRoute" />
+        <wp-seo />
 
         <global-header>
             <slot name="breadcrumbs">
@@ -15,7 +15,5 @@
 </template>
 
 <script setup lang="ts">
-const route = useRoute()
 const classes = computed(() => ['default-layout'])
-const shopRoute = computed(() => route.path.startsWith('/shop'))
 </script>