Automatic OG Images for Nuxt 3 Apps

Add dynamic OG image generation to your Nuxt 3 app with useHead and composables.

Get Started

Nuxt 3 Native

Leverages composables and composables-based patterns for seamless integration.

Auto Import

No imports needed — useHead and useRoute work automatically in your components.

Edge Compatible

Works on Vercel Edge and other edge environments with zero configuration.

Example Integration

// pages/blog/[slug].vue
<script setup lang="ts">
const route = useRoute();
const config = useRuntimeConfig();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);

const ogUrl = computed(() =>
  `https://imagoapi.com/api/og/generate?title=${encodeURIComponent(post.value?.title ?? '')}&template=modern&api_key=${config.imagoApiKey}`
);

useHead({
  meta: [
    { property: 'og:image', content: ogUrl },
    { name: 'twitter:image', content: ogUrl },
  ]
});
</script>

Generate Perfect OG Images Today

Join thousands of developers using Imago API for dynamic social cards.

Start Free Trial