Как работать с 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