Nuxt I18n

I18n Defaults

When using the defaults configuration, the module will automatically integrate with Nuxt I18n.

It will read your configuration, adding unique WebSite entities for each locale and connecting them with translationOfWork and workTranslation properties.

The WebSite node's name and description are read from your Site Config and resolved per request during SSR based on the current locale.

As an example, the following would be generated when visiting the default en route when your site supports both ja and zh.

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://nuxtseo.com/en#website",
      "@type": "WebSite",
      "description": "The quickest and easiest way to build Schema.org graphs for Nuxt.",
      "inLanguage": "en-US",
      "name": "nuxt-schema-org",
      "publisher": {
        "@id": "https://nuxtseo.com/#identity"
      },
      "url": "https://nuxtseo.com/en",
      "workTranslation": [
        {
          "@id": "https://nuxtseo.com/en#website"
        },
        {
          "@id": "https://nuxtseo.com/ja#website"
        },
        {
          "@id": "https://nuxtseo.com/zh#website"
        }
      ]
    },
    {
      "@id": "https://nuxtseo.com/en#webpage",
      "@type": "WebPage",
      "about": {
        "@id": "https://nuxtseo.com/#identity"
      },
      "description": "The quickest and easiest way to build Schema.org graphs for Nuxt.",
      "isPartOf": {
        "@id": "https://nuxtseo.com/en#website"
      },
      "name": "Welcome",
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://nuxtseo.com/en"
          ]
        }
      ],
      "url": "https://nuxtseo.com/en"
    },
    {
      "@id": "https://nuxtseo.com/#identity",
      "@type": "Organization",
      "name": "nuxt-schema-org",
      "url": "https://nuxtseo.com"
    }
  ]
}

Per-Locale Site Name and Description

The WebSite node's name and description are sourced from Site Config. The Nuxt Site Config i18n plugin integrates with @nuxtjs/i18n by reading translation keys under nuxtSiteConfig. It calls i18n.t("nuxtSiteConfig.name") and i18n.t("nuxtSiteConfig.description") reactively, pushing the translated values into the site config stack.

To provide per-locale values, add the nuxtSiteConfig keys to your locale files:

export default {
  nuxtSiteConfig: {
    name: 'My Site',
    description: 'My site description in English',
  },
}

export default {
  nuxtSiteConfig: {
    name: '私のサイト',
    description: '日本語のサイト説明',
  },
}

During SSR, the WebSite node's name and description will reflect the current locale for each request. For client-side locale switching to update the JSON-LD, enable schemaOrg.reactive: true in your nuxt.config.ts.

Per-Locale Identity with useSchemaOrg

The identity configured in nuxt.config.ts is static and shared across all locales. If you need locale-specific identity data (e.g., a translated organization description), use useSchemaOrg with defineOrganization in your app.vue:

<script lang="ts" setup>
import { useI18n } from '#i18n'
import { defineOrganization, useSchemaOrg } from '#imports'

const { t } = useI18n()

useSchemaOrg([
  defineOrganization({
    name: () => t('organization.name'),
    description: () => t('organization.description'),
    logo: '/logo.png',
  }),
])
</script>

{
  "organization": {
    "name": "My Company",
    "description": "We build great software solutions"
  }
}

{
  "organization": {
    "name": "私の会社",
    "description": "優れたソフトウェアソリューションを構築しています"
  }
}

Since useSchemaOrg merges with existing nodes, the defineOrganization call will update the identity node that was set up through your config. The getter functions (e.g., () => t('...')) are recomputed on each server render and on subsequent client-side navigations. By default, useSchemaOrg() only runs during SSR. To enable client-side reactivity (e.g., updating JSON-LD when the locale changes without a navigation), set schemaOrg.reactive: true in your nuxt.config.ts.