OG Image

Customizing the dynamic OG Image.

shadcn-docs-nuxt utilizes the nuxt-og-image module to generate dynamic OG Images.

The dynamic OG Image is used in all pages except the index page. The index page uses a static OG Image defined in the ogImage field instead.

Using Built-in Templates

To use a template, set the name of the OG Image component in the ogImageComponent.

app.config.ts 
export default defineAppConfig({
  shadcnDocs: {
    site: {
      ogImageComponent: 'ShadcnDocs',
    },
  },
});

Out of the box, a shadcn-docs-nuxt template and multiple community templates are available.

Component NamePreview
ShadcnDocsShadcn Docs OG Image Preview
NuxtNuxt OG Image Preview
Nuxt SEONuxtSEO OG Image Preview

Using Custom Templates

To use a custom template, create a template by following the guide in the Nuxt SEO Docs. Then set the component name of your template in ogImageComponent.

components/OgImage/BlogPost.vue
app.config.ts
<template>
  <div class="flex size-full items-start justify-start border-[12px] border-solid border-blue-500 bg-gray-50">
    <div class="flex h-full items-start justify-start">
      <div class="flex size-full flex-col justify-between">
        <h1 class="p-20 text-left text-[80px] font-black">
          {{ title }}
        </h1>
        <p class="mb-0 px-20 pb-10 text-2xl font-bold">
          mycoolsite.com
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  title?: string;
}>(), {
  title: 'title',
});
</script>
Nuxt Content
Configuring the Nuxt Content module.
Overriding
Replacing shadcn-docs-nuxt components with custom vue components.