OgImage (Custom)

The Custom component (in OgImage folder) provides a custom Open Graph image template for social media sharing.

Usage

This component is used by Nuxt OG Image module. Configure in nuxt.config.ts:

Copyexport default defineNuxtConfig({
  ogImage: {
    component: 'OgImage/Custom',
  },
})

Features

• Custom design with borders and decorations
• Vue logo indicator
• Responsive typography
• Text balance for better wrapping
• Geist font family

Props

Styling

• Black background with white text
• Dashed border decorations
• Vue logo in bottom-right
• Responsive font sizes based on title length
• Centered content layout

Customization

Edit app/components/OgImage/Custom.vue to customize:

• Colors and backgrounds
• Layout and spacing
• Typography
• Logo or branding elements