Как изменить язык в i18n в Nuxt приложении?

Переключение языка в Nuxt.js приложении можно реализовать с помощью библиотеки i18n. Вот подробный шаг за шагом руководство по настройке и использованию i18n в Nuxt.js:

1. Установка пакета
Первым шагом вам нужно установить i18n пакет с помощью вашего пакетного менеджера. В терминале выполните следующую команду:

npm install --save nuxt-i18n

или, если вы используете Yarn:

yarn add nuxt-i18n

2. Настройка модуля
После установки пакета вы можете настроить модуль i18n в nuxt.config.js. Добавьте следующий код в раздел modules:

  modules: [
    'nuxt-i18n',
  ],
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US', file: 'en.json' },
      { code: 'fr', iso: 'fr-FR', file: 'fr.json' },
    ],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
    },
    lazy: true,
    langDir: 'locales/',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      alwaysRedirect: true,
      fallbackLocale: 'en',
    },
  },

3. Создание файлов перевода
Создайте папку locales в корневой директории вашего проекта и внутри нее создайте файлы перевода для каждого языка. Например, en.json для английского и fr.json для французского. В каждом файле укажите переводы для всех используемых фраз на соответствующем языке. Например:

// en.json
{
  "hello": "Hello",
  "goodbye": "Goodbye"
}

// fr.json
{
  "hello": "Bonjour",
  "goodbye": "Au revoir"
}

4. Использование переводов в вашем приложении
Теперь вы можете использовать переводы в своем приложении. В шаблонах или компонентах вы можете использовать следующий синтаксис:

<template>
  <div>
    <p>{{ $t('hello') }}</p>
  </div>
</template>

или

<template>
  <div>
    <p>{{ $t('goodbye') }}</p>
  </div>
</template>

В зависимости от установленного языка приложение будет отображать соответствующий перевод.

5. Переключение языка
Для переключения языка вы можете использовать метод $i18n.setLocale в вашем приложении. Например, для переключения на французский язык:

methods: {
  switchToFrench() {
    this.$i18n.setLocale('fr');
  },
}

Надеюсь, это подробное руководство поможет вам изменить язык в i18n в Nuxt.js приложении.