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

Но, может быть, вы хотите обращаться к своим пользователям на их родном языке. Если это так, вы хотите иметь определение языка и переключатель языка внутри своего веб-приложения.

Сегодня я покажу вам, как создать определение языка по URL-адресу и компоненту переключения языка с помощью Vue3, Vuex и нового API композиции.

План

Я хочу создать приложение с слагами типа https://www.website.com/de, https://www.website.com/en , https://www.website.com/ эс .

Теперь я хочу отобразить приветственное сообщение для пользователя на основе слага, который он посещает. Пользователи, посетившие /de, увидят сообщение на немецком языке, /en — сообщение на английском языке и /es — сообщение на испанском языке.

Я знаю, что определение языка и интернационализация могут быть достигнуты намного проще с помощью https://kazupon.github.io/vue-i18n/. Но в этом уроке мы будем работать только с слагами.

Предпосылки

Для этого проекта мы будем использовать Vite. Если вы не знакомы с Vite, вы можете проверить это здесь.

Создайте свой проект

Просто запустите yarn create vite или npm init vite@latest и выберите vue.

Кодирование

Прежде всего, мы собираемся удалить из App.vue все, что нам не нужно. К настоящему времени ваш файл App.vue должен выглядеть так:

Добавить Векс

Теперь мы собираемся добавить Vuex в наш проект. Vuex — это шаблон управления состоянием + библиотека для приложений Vue.js. Мы хотим установить активный язык глобально, чтобы он был доступен на каждой странице и компоненте. Если вы ничего не знаете о Vuex и особенно о Vuex4, вы можете прочитать все об этом здесь: https://next.vuex.vuejs.org/.

Чтобы добавить Vuex в ваш проект Vue3, просто запустите yarn add --dev vuex@next.

Затем создайте папку store и внутри этой папки создайте index.js со следующим кодом:

Как видите, сейчас мы устанавливаем английский как язык по умолчанию.

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

Внутри App.vueмы хотим использовать наш магазин. Напоминание: мы используем API композиции. Таким образом, каждая переменная, которую мы создаем внутри нашего тега ‹script›, автоматически становится доступной для нас в ‹template›.

Это дает нам activeLanguage из нашего магазина. Как видите, я объявил это как вычисляемое свойство. Это означает, что activeLanguage меняет свое значение всякий раз, когда хранилище обновляется.

И это то, что мы собираемся делать дальше. Нам нужны некоторые методы для обновления значения activeLanguage в хранилище (`index.js`).

Как видите, у нас есть одно действие, которое вызывает мутацию, которая затем обновляет значение activeLanguage. Когда это происходит, значение activeLanguage в App.vue также обновляется.

Внесение переводов

Далее мы создадим файл translations.json, в который мы сможем поместить наши строки перевода. Я думаю, что сейчас мы просто поприветствуем наших пользователей. Итак, это должно быть сделано на данный момент:

Строка greeting — это то, что мы хотим отображать для наших пользователей, когда они посещают наш веб-сайт.

Нам нужно импортировать наши переводы в App.vue, а затем создать метод, который возвращает нам правильный перевод. Вот как мы это делаем:

Мы импортировали TRANSLATIONS из translations.json, который является просто нашим объектом перевода. Этот объект имеет 3 языка: de, en и es в качестве ключей и каждый строку перевода приветствия в качестве значения.

Как видите, translateString() принимает в качестве аргумента строку, которую мы хотим преобразовать. Затем мы просто возвращаем строку, которую хотим перевести.

компонент переключения языка

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

Итак, давайте создадим компонент с именем LanguageSwitcher.vue в каталоге components. Вот как выглядит этот компонент:

Внутри нашего компонента у нас есть только массив с тремя языками, которые мы хотим отобразить, и метод для изменения activeLanguage . Этот метод отправляет действие в хранилище, где изменяется активный язык.

Наконец, нам просто нужно импортировать вновь созданный компонент в App.vue и поместить его в шаблон.

Вот как выглядит наш готовый App.vue:

готовое приложение

Надеюсь, вам было весело. Если у вас есть вопросы о том, что мы здесь делали, или вы просто хотите поздороваться, сделайте это в комментариях.

Дополнительно вы можете передать привет мне в Твиттере!

Весь код этого проекта вы можете найти здесь.