Nuxt 3 Integration Guide

Nuxt 3 provides a built-in useSeoMeta composable that cleanly sets Open Graph and Twitter Card tags during server-side rendering (SSR) or static site generation (nuxi generate).

---

Page Implementation (pages/posts/[id].vue)

<script setup lang="ts">
const route = useRoute();

// Fetch article data or query CMS
const title = computed(() => `Article ${route.params.id}: Modern Architecture`);
const description =
  "Comprehensive insights on distributed edge systems and performance.";

const ogParams = computed(() => {
  return new URLSearchParams({
    title: title.value,
    description,
    theme: "dark",
    size: "landscape",
  }).toString();
});

const ogImageUrl = computed(
  () => `https://api.generativeog.in/v1/images/article.png?${ogParams.value}`
);

useSeoMeta({
  title: title.value,
  description,
  ogTitle: title.value,
  ogDescription: description,
  ogImage: ogImageUrl.value,
  ogImageWidth: 1200,
  ogImageHeight: 630,
  twitterCard: "summary_large_image",
  twitterTitle: title.value,
  twitterDescription: description,
  twitterImage: ogImageUrl.value,
});
</script>

<template>
  <main>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </main>
</template>

---

Key Benefits in Nuxt 3

• Full SSR Hydration: Tags are rendered into the initial HTML response before the client bundle executes, ensuring web crawlers see complete Open Graph metadata immediately.
• Zero Third-Party Plugins: Uses standard web primitives (URLSearchParams, useSeoMeta) without custom module dependencies.