OG Images for Nuxt
OG images for Nuxt 3 — use useSeoMeta or useHead
OGMagic works with Nuxt 3's built-in SEO composables. Add dynamic Open Graph images using useSeoMeta or useHead — no plugins needed.
Quick Start
Add OGMagic to your Nuxt project — no packages to install, no API keys to configure.
<!-- pages/index.vue -->
<script setup>
useSeoMeta({
ogImage: 'https://ogmagic.dev/api/og?template=gradient-mesh&title=My+Site&domain=mysite.com',
ogImageWidth: 1200,
ogImageHeight: 630,
twitterCard: 'summary_large_image',
});
</script>Dynamic OG Images
Generate unique OG images per page using route data:
<!-- pages/blog/[slug].vue -->
<script setup>
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
const ogUrl = computed(() => {
const url = new URL('https://ogmagic.dev/api/og');
url.searchParams.set('template', 'gradient-mesh');
url.searchParams.set('title', post.value?.title || '');
url.searchParams.set('description', post.value?.excerpt || '');
url.searchParams.set('domain', 'mysite.com');
return url.toString();
});
useSeoMeta({
ogImage: ogUrl,
ogImageWidth: 1200,
ogImageHeight: 630,
twitterCard: 'summary_large_image',
});
</script>💡 Works with Nuxt 3's useSeoMeta, useHead, and Nuxt Content module. No additional plugins required.
Why use OGMagic with Nuxt?
No build step
Images are generated on-demand via URL. No build plugins, no CI/CD changes.
55+ templates
Professional designs out of the box. Customize with query parameters.
No API key needed
Free tier works instantly — just use the URL. No signup, no config.
Every platform
Optimized 1200×630 images that look great on Twitter/X, Facebook, LinkedIn, Discord, and Slack.
Ready to add OG images to your Nuxt app?
Start with 50 free API calls/month. No signup needed.