Vue i18n что это

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

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

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

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

Nuxt i18n

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

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

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

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

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

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

А вот если речь идет уже о словах или фразах, которые имеют какой-то контекст к проекту, которые часто встречаются в компонентах, то их желательно хранить как 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 =

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

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

export const ru =

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

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 тег . А на разных языках я имею разный шаблон перевода. Для этого можно использовать интерполяцию в i18n:

export const ru = < date_range: 'с до ' > export const kk = < date_range: 'бастап дейін' > export const en = < date_range: 'from to ' > 

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

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

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

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

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

# Локализация на основе компонентов

В основном данные для локализации (например, locale , messages , и т.д.) задаются опциями конструктора экземпляра VueI18n и устанавливаются через свойство i18n в корневой экземпляр Vue.

Поэтому можно глобально выполнять переводы, используя методы $t или $tc в корневом экземпляре Vue и любом из компонентов в нём. Но также возможно указывать данные для локализации в каждом компоненте в отдельности, что может быть удобнее благодаря компонентно-ориентированному дизайну.

Пример локализации на основе компонентов:

// Установка локализации в корневой экземпляр Vue const i18n = new VueI18n( locale: 'ru', messages:  en:  message:  hello: 'hello world', greeting: 'good morning' > >, ru:  message:  hello: 'привет мир', greeting: 'доброе утро' > > > >) // Определение компонента const Component1 =  template: ` 
Component1 locale messages: >
 
Fallback global locale messages: >
 `, i18n:  // опция `i18n`, определение данных локализации для компонента messages:  en:  message:  hello: 'hello component1' > >, ru:  message:  hello: 'привет component1' > > > > > new Vue( i18n, components:  Component1 > >).$mount('#app') 

div id="app"> p>>p> component1>component1> div> 

div id="app"> p>привет мирp> div class="container"> p>Component1 locale messages: привет component1p> p>Fallback global locale messages: доброе утроp> div> div> 

Если компонент не имеет собственного сообщения для локализации, то в качестве запасного выхода он обратится к глобальным данным для локализации. Компонент использует локаль, установленную в корневом экземпляре (в примере выше установлена: locale: ‘ru’ ).

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

[vue-i18n] Value of key 'message.greeting' is not a string! [vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale. 

Чтобы скрыть эти предупреждения (оставив те, что предупреждают о полном отсутствии перевода для данного ключа) установите опцию silentFallbackWarn: true при инициализации экземпляра VueI18n .

Если необходимо осуществлять перевод, основываясь на локали компонента, то это можно сделать с помощью опции sync: false и locale в настройках i18n .

# Общие сообщения локализации для компонентов

Иногда может потребоваться импортировать сообщения локализации в определённых компонентах, чтобы не обращаться к глобальным сообщениям локализации (например, общие сообщения для определённых функций компонентов).

Для этого можно использовать опцию sharedMessages в свойстве i18n компонента.

Пример использования общих сообщений локализации:

export default  en:  buttons:  save: 'Save' // . > >, ru:  buttons:  save: 'Сохранить' // . > > > 

import commonMessage from './locales/common' // импорт общих сообщений локализации export default  name: 'ServiceModal', template: ` 
Это хороший сервис
 
 
> 
 

. div> a href="#" target="_blank" rel="noopener noreferrer"> img src="./assets/example.jpg" :alt="parent.$t('message.hello')" /> a> div> .