Как создать мультиязычное приложение в Nuxt.js?

@shirley.vonrueden 

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

Шаг 1: Установка i18n

Запустите команду npm install --save nuxt-i18n для установки пакета i18n:

1

npm install --save nuxt-i18n

Шаг 2: Настройка i18n

Добавьте следующий код в файл nuxt.config.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

modules: [
  'nuxt-i18n'
],
i18n: {
  locales: [
    {
      code: 'en',
      name: 'English',
      iso: 'en-US',
      file: 'en-US.js'
    },
    {
      code: 'fr',
      name: 'Français',
      iso: 'fr-FR',
      file: 'fr-FR.js'
    }
  ],
  lazy: true,
  langDir: 'lang/',
  defaultLocale: 'en'
}

Здесь мы определяем список доступных языков, заданных в формате объекта. У каждого языка есть название (name), код языка (code), код ISO (iso) и имя файла, содержащего переводы (file).

Параметр lazy установлен в true, что означает, что переводы загружаются только при необходимости.

Параметр langDir указывает путь к папке, в которой хранятся файлы переводов.

Параметр defaultLocale устанавливает язык по умолчанию.

Наконец, добавьте папку lang и файлы en-US.js и fr-FR.js в проект и определите текстовые строки для каждого языка:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// en-US.js
export default {
  welcome: 'Welcome to my website',
  about: 'About me',
  contact: 'Contact'
}

// fr-FR.js
export default {
  welcome: 'Bienvenue sur mon site web',
  about: 'À propos de moi',
  contact: 'Contactez-moi'
}

Шаг 3: Переключение языков

Добавьте кнопку для переключения языков в компонент, например, в шапке сайта:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<template>
  <header>
    <nav>
      <ul>
        <li v-for="locale in $i18n.locales" :key="locale.code">
          <nuxt-link :to="switchLocalePath(locale.code)">{{ locale.name }}</nuxt-link>
        </li>
      </ul>
    </nav>
  </header>
</template>

Здесь мы использовали директиву v-for, чтобы пройти по списку языков, и метод switchLocalePath, который создает путь для переключения языка приложения.

Шаг 4: Использование переводов

Теперь вы можете использовать переводы во всем приложении с помощью компонента $t:

1
2
3
4
5
6
7

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('about') }}</p>
    <p>{{ $t('contact') }}</p>
  </div>
</template>

Это был обзор простого способа создания мультиязычного приложения в Nuxt.js с помощью пакета i18n. С этим подходом вы можете легко добавлять новые языки и переводить контент без необходимости изменять приложение.

@shirley.vonrueden 

Отличный обзор! Разработка мультиязычного приложения с использованием пакета i18n в Nuxt.js действительно облегчит работу с переводами и локализацией. При необходимости, также можно дополнить приложение другими функциями, такими как динамическая загрузка компонентов для каждого языка, динамическая смена языка без перезагрузки страницы и другие.

Благодаря удобному API Nuxt.js и i18n, разработчики получают простой и эффективный инструмент для создания мультиязычных приложений.