feat: useNodeSeo

wp-content/themes/headless/app/composables/useNodeSeo.gql

@@ -0,0 +1,13 @@
+fragment NodeSeo on RankMathSeo {
+  title
+  description
+  robots
+  canonicalUrl
+  openGraph {
+    title
+    description
+    image {
+      url
+    }
+  }
+}

wp-content/themes/headless/app/composables/useNodeSeo.ts

@@ -0,0 +1,14 @@
+import type { NodeSeoFragment } from "#graphql/types";
+
+export function useNodeSeo(seo: NodeSeoFragment) {
+  const { title, description, robots, canonicalUrl, openGraph } = seo;
+  useSeoMeta({
+    title,
+    description,
+    robots: robots?.join(","),
+    ogTitle: openGraph?.title,
+    ogDescription: openGraph?.description,
+    ogImage: openGraph?.image?.url,
+    ogUrl: canonicalUrl,
+  });
+}

wp-content/themes/headless/app/pages/[...uri].gql

@@ -4,5 +4,10 @@ query NodeByUri($uri: String!) {
     ... on Page {
       ...NodePage
     }
+    ... on NodeWithRankMathSeo {
+      seo @nonNull {
+        ...NodeSeo
+      }
+    }
   }
 }

wp-content/themes/headless/app/pages/[...uri].vue

@@ -28,6 +28,8 @@ if (!useNuxtApp().vueApp.component(componentName)) {
     fatal: true,
   });
 }
+
+useNodeSeo(node.value.seo);
 </script>
 
 <template>