---
title: "Community Templates"
description: "Community templates that are included with the module, including NuxtSeo."
canonical_url: "https://nuxtseo.com/docs/og-image/guides/community-templates"
last_updated: "2026-05-09T19:34:58.898Z"
---

The module provides community templates for development and prototyping. **You must eject them before production builds.**

## Ejecting Templates

Community templates are only available in development mode. To use them in production, you must eject them to your project:

```bash
npx nuxt-og-image eject NuxtSeo
```

This copies the template to `components/OgImage/NuxtSeo.vue` (or `app/components/OgImage/` for Nuxt v4).

You can list all available templates:

```bash
npx nuxt-og-image list
```

Alternatively, use the **Eject** button in Nuxt DevTools under the OG Image Community tab.

<callout color="amber" icon="i-heroicons-exclamation-triangle">

**Production builds will fail** if you use a community template without ejecting it first.

</callout>

## NuxtSeo

<div className="px-10">

![NuxtSeo Template](/og-image/community-template.png)

</div>

The `NuxtSeo` template is the default one provided for you. It comes with a number of props
to let you customise it however you like.

Like all Community templates, it's recommended to copy+paste it into your project if you want to customise it. You can find
the source on [GitHub](https://github.com/nuxt-modules/og-image/tree/main/src/runtime/app/components/Templates/Community) (available as both `NuxtSeo.satori.vue` and `NuxtSeo.takumi.vue`).

## Props

### `title`

**Type:** `string`**Default:** `<title>`

The title of the page. This serves as the main heading.

### `description`

**Type:** `string`**Default:** `<meta name="description" />`

The description of the page. This serves as the subheading.

### `isPro`

**Type:** `boolean`**Default:** `false`

Changes the template to use a purple/violet color scheme instead of green. Useful for distinguishing Pro-tier content.

### `colorMode`

**Type:** `light` | `dark`**Default:** `light`

Changes from a light or dark background / text color. Integrates with `@nuxtjs/color-mode`, selecting your
default color mode.