i18n

Add i18n Configuration

First, you need to add the i18n configuration to your Nuxt.js project. Open your nuxt.config.ts file and add the following configuration:

export default defineNuxtConfig({
  // Other nuxt configurations ...
  i18n: {
    defaultLocale: 'en',
    locales: [
      {
        code: 'en',
        name: 'English',
        language: 'en-US',
      },
      {
        code: 'xx', // language 2 letters code (e.g. 'fr')
        name: 'Xxxxx', // language name (e.g. 'Français')
        language: 'xx-XX', // language ISO code (e.g. 'fr-FR')
      },
    ],
  },
});

Organize Your Content Files

To support multiple languages, you need to organize your content files in a specific directory structure. Follow this file tree structure:

• The content directory contains your default language content files.
• The xx directory inside content contains the translations of your content files,xx being the language code (e.g., fr/index.md for French).

Create i18n/i18n.config.ts

Next, create a new file named i18n/i18n.config.ts. This file will contain the configuration for your i18n messages to translate. Add the following code to the file:

import { defineI18nConfig } from '@nuxtjs/i18n';

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      // Add here all english strings defined in app.config.ts e.g. titles in header.nav or toc.title
      // Default UI strings are already translated out of the box

      shiki: 'shiki', // for example: site title
    },
    xx: {
      // Add here all translation

      shiki: '式', // for example: site title
    },
  },
}));

UI Translation

The UI locale will follow the selected language in the language switcher. UI translations are provided out-of-the-box for the following languages:

• en (English)
• fr (Français)
• zh-CN (简体中文)
• zh-TW (繁體中文)
• km (ភាសាខ្មែរ)
• ja (日本語)
• km (ភាសាខ្មែរ)
• ru (Русский)
• ko (한국어)
• hi (हिन्दी)
• bn (বাংলা)

Or if you want to add your own translations, you can do so by following the structure in the i18n/i18n.config.ts file. Just add the translations for the keys you want to translate in the respective language object.