Nuxt I18n

How to use the Nuxt Site Config module with Nuxt I18n.

Out of the box, the Site Config module will integrate directly with @nuxtjs/i18n v8.

Usage

By default, it will extract the following properties from the i18n module config.

  • url - The base URL, configured as baseUrl in the i18n module.
  • currentLocale - The current locale for the request. This will use the defaultLocale if no locale is set.

For example, consider the following config:

nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    baseUrl: 'https://example.com',
    defaultLocale: 'en',
    locales: [
      { code: 'en', language: 'en-US' },
      { code: 'fr', language: 'fr-FR' },
    ],
  },
})

The following site config will be inferred:

{
  "url": "https://example.com",
  "currentLocale": "en"
}

Additionally, it will detect if you have a nuxtSiteConfig translation object and use the following properties:

  • name - Name of the site
  • description - Description of the site

For example:

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

The following site config will be inferred for an English request:

{
  "url": "https://example.com",
  "currentLocale": "en",
  "name": "My Site",
  "description": "My site description"
}
Did this page help you?