Nuxt I18n · Nuxt OG Image · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

**OG Image v6** is here! Looking for an older version? [View v5 docs](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction).

[User Guides](https://nuxtseo.com/docs/og-image/getting-started/introduction)

[API](https://nuxtseo.com/docs/og-image/api/define-og-image)

[Releases](https://nuxtseo.com/docs/og-image/releases/v6)

OG Image

- [Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

Search…```k`` /`

v6 (latest)

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

- [Introduction](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Installation](https://nuxtseo.com/docs/og-image/getting-started/installation)
- [Troubleshooting](https://nuxtseo.com/docs/og-image/getting-started/troubleshooting)
- [Tutorial: Your first OG Image](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image)

### Core Concepts

- [Zero Runtime](https://nuxtseo.com/docs/og-image/guides/zero-runtime)
- [WhatsApp & Multiple Images](https://nuxtseo.com/docs/og-image/guides/whatsapp)
- [Performance](https://nuxtseo.com/docs/og-image/guides/performance)
- [CLI](https://nuxtseo.com/docs/og-image/guides/cli)
- [Security](https://nuxtseo.com/docs/og-image/guides/security)
- [Cloudflare](https://nuxtseo.com/docs/og-image/guides/cloudflare)
- [Route Rules](https://nuxtseo.com/docs/og-image/guides/route-rules)
- [Caching Images](https://nuxtseo.com/docs/og-image/guides/cache)
- [JPEGs](https://nuxtseo.com/docs/og-image/guides/jpegs)
- [Custom Fonts](https://nuxtseo.com/docs/og-image/guides/custom-fonts)
- [Non-English Locales](https://nuxtseo.com/docs/og-image/guides/non-english-locales)
- [Emojis](https://nuxtseo.com/docs/og-image/guides/emojis)
- [Icons and Images](https://nuxtseo.com/docs/og-image/guides/icons-and-images)
- [Styling](https://nuxtseo.com/docs/og-image/guides/styling)
- [Community Templates](https://nuxtseo.com/docs/og-image/guides/community-templates)
- [Error pages](https://nuxtseo.com/docs/og-image/guides/error-pages)

### Overview

- [Overview](https://nuxtseo.com/docs/og-image/renderers)
- [Takumi Renderer](https://nuxtseo.com/docs/og-image/renderers/takumi)
- [Satori Renderer](https://nuxtseo.com/docs/og-image/renderers/satori)
- [Browser Renderer](https://nuxtseo.com/docs/og-image/renderers/browser)

### Integrations

- [Nuxt Content](https://nuxtseo.com/docs/og-image/integrations/content)
- [Nuxt Color Mode](https://nuxtseo.com/docs/og-image/integrations/color-mode)
- [Nuxt I18n](https://nuxtseo.com/docs/og-image/integrations/i18n)

Integrations

# Nuxt I18n

[Copy for LLMs](https://nuxtseo.com/docs/og-image/integrations/i18n.md)

## [Introduction](#introduction)

OG Image components render as [Nuxt Islands](https://nuxt.com/docs/api/components/nuxt-island) (server components), which means `useI18n()` composables don't have automatic access to locale context or lazy-loaded messages.

This guide covers two patterns for creating localized OG images with `@nuxtjs/i18n`.

## [Pattern 1: Props-based (Recommended)](#pattern-1-props-based-recommended)

The simplest approach is to resolve translations at the page level and pass them as props to your OG image component.

pages/index.vue

```
<script setup lang="ts">
const { t } = useI18n()

// Pass already-translated strings as props
defineOgImage('MyOgImage', {
  title: t('og.title'),
  description: t('og.description'),
})
</script>
```

Your OG image component receives the translated strings directly:

components/OgImage/MyOgImage.vue

```
<script setup lang="ts">
defineProps<{
  title: string
  description: string
}>()
</script>

<template>
  <div class="w-full h-full flex flex-col justify-center p-12 bg-white">
    <h1 class="text-6xl font-bold">
      {{ title }}
    </h1>
    <p class="text-2xl text-gray-600">
      {{ description }}
    </p>
  </div>
</template>
```

This pattern is recommended because it's simple, works reliably, and keeps your OG image components reusable.

## [Pattern 2: Using useI18n with loadLocaleMessages](#pattern-2-using-usei18n-with-loadlocalemessages)

If you need to use `useI18n()` directly inside your OG image component (for example, to access many translation keys), you can pass the locale as a prop and use `loadLocaleMessages()` to load the messages.

pages/index.vue

```
<script setup lang="ts">
const { locale } = useI18n()

// Pass locale as a prop
defineOgImage('MyOgImage', {
  locale: locale.value,
})
</script>
```

In your OG image component, load the messages for the requested locale:

components/OgImage/MyOgImage.vue

```
<script setup lang="ts">
const props = defineProps<{
  locale?: string
}>()

const { t, locale, loadLocaleMessages } = useI18n()

// Load messages for the requested locale, then set it as active
if (props.locale) {
  await loadLocaleMessages(props.locale)
  locale.value = props.locale
}
</script>

<template>
  <div class="w-full h-full flex flex-col justify-center p-12 bg-white">
    <h1 class="text-6xl font-bold">
      {{ t('og.title') }}
    </h1>
    <p class="text-2xl text-gray-600">
      {{ t('og.description') }}
    </p>
  </div>
</template>
```

`@nuxtjs/i18n` provides the `loadLocaleMessages()` function. It asynchronously loads the messages for a specific locale, which is necessary because OG image components render in an isolated server context.

## [Why Direct useI18n Doesn't Work](#why-direct-usei18n-doesnt-work)

When you use `useI18n()` in a regular page component, the i18n module:

1. Detects the locale from the URL path (e.g., `/es/about`), cookies, or headers
2. Loads the messages for that locale
3. Provides them to the composable

OG image components render as Nuxt Islands via an internal request like `/__nuxt_island/MyOgImage_abc123.json`. This request:

- Doesn't have the locale prefix in the URL
- Doesn't have the user's cookies (when fetched by social platforms)
- Doesn't have locale messages pre-loaded

This is why you need to either pass translated strings as props (Pattern 1) or explicitly load the messages (Pattern 2).

## [Related Links](#related-links)

- [GitHub Issue #222](https://github.com/nuxt-modules/og-image/issues/222) - Original discussion about i18n support
- [nuxt-modules/i18n Discussion #3242](https://github.com/nuxt-modules/i18n/discussions/3242) - Discussion about translations in Nuxt Islands
- [@nuxtjs/i18n loadLocaleMessages](https://i18n.nuxtjs.org/docs/api/vue-i18n#loadlocalemessages) - API documentation

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/4.integrations/3.i18n.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/integrations/i18n.md)

Did this page help you?

[Nuxt Color Mode How to use the Nuxt OG Image module with Nuxt Color Mode.](https://nuxtseo.com/docs/og-image/integrations/color-mode) [Nitro Hooks Hook into the Nuxt OG Image runtime.](https://nuxtseo.com/docs/og-image/nitro-api/nitro-hooks)

On this page

- [Introduction](#introduction)
- [Pattern 1: Props-based (Recommended)](#pattern-1-props-based-recommended)
- [Pattern 2: Using useI18n with loadLocaleMessages](#pattern-2-using-usei18n-with-loadlocalemessages)
- [Why Direct useI18n Doesn't Work](#why-direct-usei18n-doesnt-work)
- [Related Links](#related-links)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Home")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Research Pro](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer Pro](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings Pro](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)