Мультиязычность в приложении Vue 3 (i18n)

Подписаться 3 тыс.

Просмотров 9 тыс.

50% 1

В этом видео мы разберемся, как делать приложение на нескольких языках
Документация Vite: vitejs.dev/guide/
Конфигурация i18n: vue-i18n.intlify.dev/guide/
Telegram: t.me/front_everyday
Instagram: / frontend_everyday
VK: groups
Тренировка своих навыков: frontend-skills.com/

Опубликовано:

22 авг 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 48

@DenisBozhko-x7c 2 дня назад

Все четко и по существу. Благодарочка

@danilkrymlov 11 месяцев назад

ЕДИНСТВЕННЫЙ нужный и адекватный гайд Большое спасибо!

@vetero4eg Год назад

Огроменное спасибо!! Два часа ковырялась, тут за 10 минут вопрос решился по вашим видео, увидела, что упустила

@frontend-skills Год назад

Я рад, что видео помогло 🙃🙃🙃

@Dania-Rahub Год назад

Спасибо большое за данный видеоматериал. Очень полезно!

@frontend-skills Год назад

Спасибо что смотрите!

@tryit7233 Месяц назад

очень классное видео, все получилось! спасибо большое)

@aceracer5556 Год назад

Спасибо за обзор! Очень пригодилось, еще бы на TS тоже самое

@marynamazur3703 Год назад

Благодарю, очень полезно и понятно!

@user-kl6be1qp3g Год назад

Супер, жду custom select на vue

@dmitryskatov8216 Год назад

Спасибо большое!

@ndrey5966 11 месяцев назад

спасибо, выручил!

@Viktorres1 Год назад

Thank you so much!

@alimodz6253 Год назад

Thank you so much, It finally works with me

@frontend-skills Год назад

Thanks for watching video!

@kalyszhek5296 Год назад

Really cool! было бы очь хорошо если все это происходило через vuex + еще TS.

@hichembouallegue Год назад

thanks for the video it's helpful

@dmitryskatov8216 Год назад

Очень хочется роликов с TS + Vue =)

@frontend-skills Год назад

Пока не планируется :)

@shokhrookhr3850 Год назад

Вовремя) Хотелось бы ещё на nuxt js)

@frontend-skills Год назад

Nuxt будет попозже) 3 версия ещё совсем сырая, а по второй уже не так интересно)

@shokhrookhr3850 Год назад

@@frontend-skills Понятненько)

@anastasiak4202 6 месяцев назад

было бы очень интересно посмотреть ролик, как заменять messages на другой, в процессе получения нового словаря по API

@NeveraIs Год назад

Если будет возможность / желание - расскажите как locale можно хранить / изменять в vuex / pinia, думаю будет интересно.

@aweb_21 Год назад

Круто 👍 Остается предусмотреть защиту от дурака, на случай если пользователь начнет играться со значением в ключе lang локалсторж))))

@frontend-skills Год назад

Для этого есть fallbackLocale) английский будет подставлен, если нужного языка нет)

@aweb_21 Год назад

@@frontend-skills ааааааааааааааа, спасибо за пояснение, оперативное)

@vpadina426 5 месяцев назад

А как вставить смену языка в title страницы?

@AlaminIslam-hi8dl Год назад

Пожалуйста, брат, поделитесь этим репозиторием, это будет очень полезно для меня.

@livingston9750 2 месяца назад

А если нужно реализовать с роутингом? Чтобы было вроде site/ru/page и т.п

@frontend-skills 2 месяца назад

Здесь все будет зависит от архитектуры проекта. Но готовое решение в комментариях не накидаю

@MrHazard32 Год назад

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

@frontend-skills Год назад

Не согласен) 1. Зачем отдельный URL для того, что перевести интерфейс? Это совершенно с SEO не связано. 2. Если хотите SEO, то в целом в примере не хватает реализации SSR. Тут об этом речи даже нет. 3. Этот пункт вытекает из предыдущего. Если вы правильно настроите SSR, то контент вы в любом случае получаете с сервера, который поддерживает заголовки accept-language. И здесь без разницы, откуда вы берете язык и передаете на сервер - из URL или из cookie/local storage. Ну и в целом здесь показано то, как добавить поддержку мультиязычности и никто не мешает в текущую реализацию добавить разные URL. Для i18n так же без разницы, откуда вы подставляете язык

@islmederov9809 Год назад

блин братан что делать если у тебя глобальный проект там где будет 1000 строк как миимум и проктическии ты там все отрисоваваешь через массив в vueX ? и как переводить массив внутри vueX ? у меня дедлайн завтра в обед мне gg

@frontend-skills Год назад

stackoverflow.com/questions/69000971/how-to-use-i18n-in-the-vuex-store Ну как-то так)

@N__C__R Год назад

у меня обьект { t } не хочет работать и распознаваться, declare but never used(

@rasulkhujaganiev5082 Год назад

а зачем импортировать константу t внутри компонента логина, если всё равно не будете его использовать?

@frontend-skills Год назад

Да, это косяк. В этом смысла нет, так как мы юзаем global scope. Спасибо за замечание!

@deterkot 10 месяцев назад

на nuxt 3 будет работать?

@frontend-skills 10 месяцев назад

Один в один нет. Надо допиливать будет

@AlexRogan73 Год назад

Все замечательно, только жаль не показано lazy loading JSON файлов для языков, ты сам ведь обратил внимание , что переоводы бывают большими и если языков много, то зачем их грузить сразу все. Смотрел в документации, там чего-то накрутили с этим.

@frontend-skills Год назад

Отличная идея. Спасибо) попробую разобраться и записать видео, сам такое не делал)

@AlaminIslam-hi8dl Год назад

plz brother share this repository, It will be very helpful for me.

@user-cs7vo3zn1t Год назад

У меня ошибка в продаешене. Юзаю Vue cli

@frontend-skills Год назад

Какая ошибка?)

@user-cs7vo3zn1t Год назад

@@frontend-skills You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle

@frontend-skills Год назад

Возможно, поможет github.com/intlify/vue-i18n-next/issues/789