Как работать с i18n в Nuxt.js

Всем привет!

Сегодня хотел поделиться несколькими фишками в работе с i18n.

i18n – это фреймворк для интернализации веб-приложении. То есть, при помощи данного фреймворка мы легко можем реализовать мультиязычность в веб-приложениях.

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

Nuxt i18n

Среди сторонних модулей, также есть модуль nuxt/i18n, который под капотом работает на vue-i18n. Данный модуль легко настраивается в Nuxt.js приложениях, достаточно просто в nuxt.config.js добавить модуль и настроить опции наиболее подходяще под проект:

{
  ...
  
  modules: [
  	@nuxtjss/i18n',
  ],
  i18n: {
  	/* module options */
  },
  
  ...
}

Работа с переводами

После настройки модуля, можно уже работать непосредственно с переводами. Есть несколько способов работы с переводами. Вынести переводы в отдельные файлы, и хранить их там, хранить переводы непосредственно в nuxt.config.js (не рекомендуется), и хранить переводы в самих компонентах.

Как лучше хранить переводы

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

<i18n>
  {
    "ru": {
      "viewers": "зрителей"
      },
    "kk": {
      "viewers": "көрермендер"
      }
  }
</i18n>

<template>
  <p :class="['stream-views', stream-views--${variant}]">
    {{ count }}
    {{ $t('viewers') }}
  </p>
</template>

Подробнее о подобном подходе хранения переводов можно ознакомиться тут.

А вот если речь идет уже о словах или фразах, которые имеют какой-то контекст к проекту, которые часто встречаются в компонентах, то их желательно хранить как TypeScript или JSON файл в директорий src/i18n

export const ru = {
  common: {
  	all: 'все',
  },
  partners: 'Организаторы | Партнеры | Организаторы и партнеры',
  page_names: {
    home: 'Главная | На главную',
    contests: 'Конкурсы | Конкурс',
    events: 'Мероприятия | Мероприятие',
    faq: 'Вопросы и ответы',
    live_tournaments: 'Live турниры',
    rating: 'Рейтинг',
    shop: 'Магазин',
    streams: 'Стримы | Стрим',
    tournaments: 'Турниры | Турнир',
  },
  ...
}

Множественность в переводах

i18n позволяет хранить в одном ключе несколько вариации перевода, в том числе и множественности. К примеру, у нас есть слово “Конкурсы”, однако в некоторых местах у нас это же слово в единственном числе “Конкурс”. Хранить это в двух разных ключах неудобно и не эффективно. Поэтому для этого надо хранить данный ключ можно следующем образом:

export const ru = {
	contests: 'Конкурсы | Конкурс',
}

А уже в компонентах, чтоб использовать данный перевод надо обращаться к методу $tc вместо $t:

<template>
  <Heading>
  	{{ $tc('contests') }} // на выходе будет 'Конкурсы'
  </Heading>
</template>

<template>
	<Heading>
		{{ $tc('contests', 2) }} // на выходе будет 'Конкурс'
	</Heading>
</template>

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

export const ru = {
	partners: 'Организаторы | Партнеры | Организаторы и партнеры',
}

Переиспользование ключей переводов

i18n также позволяет переиспользовать существующие ключи переводов и объединять их вместе:

export const ru = {
  day: 'день',
  is_weekend: 'выходной',
  weekend: '@:day @:is_weekend', // 'выходной день'
}

Интерполяция переводов

Бывают ситуации, когда надо интерполировать переводы. К примеру, мне надо выводить подобные текста:

• с 24.02.2022 до 25.02.2022

• 24.02.2022 бастап 25.02.2022 дейін

• from 24.02.2022 to 25.02.22

Дату я получаю с сервера, и дата должна быть обернута в HTML тег <time></time>. А на разных языках я имею разный шаблон перевода. Для этого можно использовать интерполяцию в i18n:

export const ru = {
	date_range: 'с {from} до {to}'
}

export const kk = {
	date_range: '{from} бастап {to} дейін'
}

export const en = {
	date_range: 'from {from} to {to}'
}

В данном случае получается, что наши данные, которые мы хотим интерполировать мы прописываем в метках, как {from} / {to}.

В итоге, в нашем компоненте, в шаблоне мы это прописываем следующим образом:

<i18n
	path="date_range" // ключ перевода
	tag="p"
>
	<template #from>
		<time>{{ start_date }}</time>
	</template>
	<template #to>
		<time>{{ end_date }}</time>
	</template>
</i18n>

Подробнее об интерполяции можно почитать в документации здесь.

Очень сильно рекомендую вам ознакомиться и изучить документации модуля под Nuxt.js и самого Vue-i18n. Так как там описано много, и о многих утилитах в работе с этим инструментом:

• Документация nuxt/i18n

• Документация vue-i18n