Перевод статьи на medium.com
В этой статье мы рассмотрим, как создать простой мультиязычный веб-сайт с использованием Nuxt.js и модуля nuxt-i18n.
👉🏻 Ссылка на модуль: https://nuxt-community.github.io/nuxt-i18n/
Установка nuxt-i18n
Прежде всего установим nuxt-i18n
|
1 |
$ npm i nuxt-i18n --save |
После установки настроим его так, как нам необходимо.
Настройки
Добавим модуль nuxt-i18n в наш файл nuxt.config.js
|
1 2 3 |
modules: [ ['nuxt-i18n', { ... }] ] |
и пропишем следующие настройки
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
modules: [ ['nuxt-i18n', { detectBrowserLanguage: { useCookie: true, cookieKey: 'i18n_redirected', alwaysRedirect: false, fallbackLocale: 'en' }, locales: [ { name: 'Italiano', code: 'it', iso: 'it-IT', file: 'it-IT.js' }, { name: 'English', code: 'en', iso: 'en-US', file: 'en-US.js' }, ], lazy: true, langDir: 'lang/', defaultLocale: 'it', }] ] |
В данном случае мы создали массив locales и задали два языка: итальянский и английский. Для каждого языка мы указали имя, код языка, iso и имя файла, который содержит наши переводы.
Мы также указали язык по умолчанию, указав параметр defaultLocale и имя папки, в которой находятся наши файлы переводов (langDir).
Теперь давайте перейдем к созданию этих файлов. В корне проекта создадим новую папку с именем lang. Внутри него создайте файл it-IT.js и файл en-US.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// it-IT.js с итальянским переводом export default { hello: 'Ciao a tutti', pages: { home: 'Pagina iniziale', contacts: 'Contatti' }, } // en-US.js с английским переводом export default { hello: 'Hello World', pages: { home: 'Home', contacts: 'Contacts' }, } |
Теперь мы можем использовать данные переводы в окружении нашего Nuxt.js приложения с помощью команды: $t('key')
Давайте добавим сообщение Hello world в наш файл index:
|
1 2 3 4 |
// index.js <template> <h1>{{ $t('hello') }}</h1> </template> |
Отлично!
Навигация по сайту
Теперь, когда мы определили языки, создадим файлы с переводами и узнаем, как добавить перевод на наши страницы и компоненты, давайте добавим на наш веб-сайт навигацию .
В простом nuxt.js приложении мы создаем навигационную ссылку следующим образом:
|
1 2 3 4 5 6 7 |
// Navigation.vue <template> <div> <h1>Site navigation</h1> <nuxt-link to="/about">About</nuxt-link> </div> </template> |
Использование модуля i18n очень похоже. Основное отличие состоит в том, что мы будем использовать метод localePath('page-name') для указания на страницу.
|
1 2 3 4 5 6 7 |
// Navigation.vue <template> <div> <h1>Site navigation</h1> <nuxt-link to="localePath('about')">About</nuxt-link> </div> </template> |
👉🏻 https://nuxt-community.github.io/nuxt-i18n/basic-usage.html#nuxt-link
Языковая навигация и переключение языков
Чтобы пользователь мог переключать язык, мы можем использовать два способа.
В первом способе мы отображаем все доступные языки:
|
1 2 3 4 5 6 7 8 |
// LangNavigation.vue <template> <div> <h1>Lang navigation</h1> <nuxt-link :to="switchLocalePath('it')">Italian</nuxt-link> <nuxt-link :to="switchLocalePath('en')">English</nuxt-link> </div> </template> |
Во втором мы создаем переключатель:
|
1 2 3 4 5 6 7 8 |
// LangSwitcher.vue <template> <nuxt-link v-for="locale in $i18n.locales" v-if="locale.code !== $i18n.locale" :key="locale.code" :to="switchLocalePath(locale.code)">{{ locale.name }}</nuxt-link> </template> |
URL переводов
До сих пор наша карта сайта была такой:
|
1 2 3 |
// LangSwitcher.vue - index.js = [it] mydomain.com - [en] mydomain.com/en/ - about.js = [it] mydomain.com/about - [en] mydomain.com/en/about |
Чтобы перевести наши URL страницы, мы должны указать путь к страницам.
Мы можем достичь этого двумя разными способами. Установка параметров внутри наших параметров конфигурации в файле nuxt.config.js или внутри каждой из наших страниц.
Если мы выберем первый метод внутри нашего конфигурационного файла, то нужно добавить:
|
1 2 3 4 5 6 7 8 9 10 |
// nuxt.config.js ['nuxt-i18n', { parsePages: false, // Disable acorn parsing pages: { about: { it: '/chi-siamo', // -> mydomain.com/chi-siamo en: '/about', // -> mydomain.com/en/about } } }] |
Во втором случае, на нашей странице-компоненте добавим:
|
1 2 3 4 5 6 7 8 9 10 11 |
// about.vue <script> export default { nuxtI18n: { paths: { it: '/chi-siamo', en: '/about' } }, } </script> |
При втором подходе проще установить мастер путь для подстраниц с использованием родительского компонента (parent component).
👉🏻 https://nuxtjs.org/guide/routing#nested-routes
Давайте предположим, что у нас следующая структура:
|
1 2 3 4 5 |
// структура проекта - index.vue - about/ -- history.vue -- team.vue |
Если мы добавим родительский компонент
|
1 2 3 4 5 6 |
// структура проекта - index.vue - about.vue - about/ -- history.vue -- team.vue |
внутри него мы можем определить путь и автоматически передать его всем подстраницам.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// about.vue <template> <nuxt-child /> </template> <script> export default { nuxtI18n: { paths: { it: '/chi-siamo', en: '/about' } }, } </script> |
Заключение
За несколько шагов мы создали простой многоязычный веб-сайт с Nuxt.js и nuxt-i18n.
Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий.
