The module uses nuxt-og-image to generate Open Graph images from a Vue component template ( IOgImage.satori ). The .satori suffix tells nuxt-og-image to use the satori renderer — a fast pure js based engine for converting Vue templates into images. The template is applied automatically to all routes via a global route rule – no per-page configuration required.

Every route automatically receives an OG image using the IOgImage.satori template. The module sets the following route rule internally:

// nuxt-og-image global defaults (set by the module internally)
{
  defaults: {
    width: 1200,
    height: 600,
    component: 'IOgImage.satori',
    props: {
      defaultPageName:        '<scseComponents.site.name>',
      defaultTheme:           '<primary color from vuetify theme>',
      defaultBackgroundImage: '<scseComponents.ogImage.background>', // when background is configured
      defaultLogo:            '<headerLogo>',                   // when headerLogo is configured
      iiasaLogo:              '/png/logo-white.png',             // IIASA footer logo (always set)
      staticImage:            '<ogImage.staticImage>',           // when staticImage is configured
    },
  },
}
              

Every page receives a default OG image via the module's global configuration. Call defineOgImage once in a page's <script setup> to customise or replace it for that specific route. This is a lightweight call that runs once at page setup (not during rendering). Pass only the props you want to change — the module's global defaults ( defaultPageName , defaultTheme , etc.) fill in the rest.

Basic pattern

<!-- src/pages/my-page.vue -->
<script setup lang="ts">
import { defineOgImage } from '#imports'

// Must be guarded — defineOgImage is a server-side only call
if (true) {
  defineOgImage('IOgImage.satori', {
    title: 'My Page Title',   // shown in the OG image; theme, logo, etc. come from module defaults
  })
}
</script>

<template>
  <!-- Your page content -->
</template>
              

Key points:

• Call defineOgImage once per page in <script setup> , always inside if (true)
• Pass the component name (e.g. 'IOgImage.satori' or your custom OG image component)
• Only include props you want to change — global defaults fill in the rest
• You can override the footer logo per page with the logo prop

Practical example: Article page

<!-- src/pages/blog/[slug].vue -->
<script setup lang="ts">
import { defineOgImage } from '#imports'

const route = useRoute()
const article = await fetchArticle(route.params.slug)

if (true) {
  defineOgImage('IOgImage.satori', {
    title: article.title,
    theme: '#e63946',   // override brand colour for this page only
    // logo and background come from module defaults
  })
}
</script>
              

Using a custom OG image component on a page:

<script setup lang="ts">
import { defineOgImage } from '#imports'

if (true) {
  defineOgImage('ScseApp.satori', {
    title: 'My Page Title',
    heroImage: '/images/custom-hero.jpg',
  })
}
</script>
              

If you already have a pre-rendered PNG (e.g. designer-produced), set staticImage to bypass the satori template entirely. The component will render only a single full-cover <img> — all other props (title, logo, background, etc.) are ignored.

Global default in nuxt.config.ts

The path is resolved to an absolute URL automatically (prefixed with the site base URL in production and http://localhost:3000 in dev).

// nuxt.config.ts
export default defineNuxtConfig({
  scseComponents: {
    ogImage: {
      staticImage: '/og/default.png',   // served from public/og/default.png
    },
  },
})
              

Override on a specific page

Pass staticImage via defineOgImage inside the server guard. It takes priority over the module-level default.

<script lang="ts" setup>
import { defineOgImage } from '#imports'

if (true) {
  defineOgImage('IOgImage.satori', {
    staticImage: 'https://scse-app.com/og/special-page.png',
  })
}
</script>
              

Deprecated: seoImage

The top-level scseComponents.seoImage option is deprecated . It maps to ogImage.staticImage automatically as a backwards-compatible fallback — prefer ogImage.staticImage for new projects.

// nuxt.config.ts — deprecated, use ogImage.staticImage instead
export default defineNuxtConfig({
  scseComponents: {
    seoImage: '/og/default.png',   // @deprecated — kept for backwards compatibility
  },
})

// Preferred equivalent:
export default defineNuxtConfig({
  scseComponents: {
    ogImage: {
      staticImage: '/og/default.png',
    },
  },
})
              

Suppress OG image generation for specific routes (e.g. login page, API routes) via routeRules in your app's nuxt.config.ts :

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/login': { ogImage: false },
    '/user/**': { ogImage: false },
  },
})