Простая мультиязычность (multi-language) для Vue on Laravel через разделение шаблона и кода Vue-компонента

В сфере искусственного интеллекта произошло заметное событие. Anrol 6 минут назад Простая мультиязычность (multi-language) для Vue on Laravel через разделение шаблона и кода Vue-компонента Средний 4 мин 85 Laravel * VueJS * Роадмэп Есть готовый сайт, написанный на Laravel + Vue. Руководство попросило сделать его мультиязычным. Зная, что для Laravel "есть все", я сходу без чтения документации назвал кратчайший срок.

Но когда зашел на страничку Vue I18n то понял, что ошибся. Мультиязычность Vue происходит на клиенте, файлы переводов по формату отличаются от файлов Blade. Другими словами, если брать все "из коробки", то переводы придется дублировать и держать в разных местах, js приложение раздуется от подключения плагина I18n и к тому же на клиента придется загружать словари переводов...

Технические детали

очевидно же, что надо делать переводы на сервере, то есть все хорошо, но без Vue I18n. ТЗ формулировалось так:Сохранить полезный контент страниц неизменным. Сохранить все url неизменными, поскольку они в индексе у поисковиковМинимум изменений кода.

Файлы переводов в одном месте. Важная деталь - изначально проект был написан на Vue 2 и весь код страницы формировался через Blade, то есть контент, заголовки, ключевые слова, списки и ссылки загружались в браузер сразу, поисковики (важен Яндекс) их видели и страницы ранжировались нормально. Vue 3 использует другой подход - весь html должен лежать в шаблоне основного приложения и отрисовываться уже на клиенте, сама страница после загрузки пустая..

КонтентВ свое время при переходе с Vue2 на Vue3 возникла дилема:Перенести контент в шаблон vue-приложения а на странице оставить пустой Оставить контент в шаблоне Blade но вместо компактной runtime библиотеки Vue загружать полный Vue с функционалом компиляции в браузере. Простой эксперимент показал, что полная версия Vue добавляет 50 Кб к версии runtime, что не является критичным, и к тому же кэшируется на клиенте. Был выбран второй вариант, чтобы сохранить контент страниц неизменным и не рисковать ранжированием в Яндексе.

Отраслевые последствия

Это обстоятельство оказалось решающим при выборе способа добавления мультиязычности: раз компиляция на клиенте уже есть, то будем на нее полагаться. С переводом основного контента страницы проблем не было, нативные переводы в Blade требуют только создания файлов с переводами для каждого языка в своем каталоге, и замены всех фрагментов со статическим текстом на вывод через функцию перевода {{_(‘common. MainPageH1’)}}На какой язык переводить laravel решает исходя из текущей локали запроса, то есть весь механизм под капотом.

Минимум вмешательства. В Vue-компонентах шаблон всегда идет вместе с кодом в одном файле . vue и подзадача формулировалась так: надо найти способ отделения шаблона от кода.

Тогда темплэйт (шаблон) будет формироваться, как и основной контент страницы, через Blade на сервере, а Vite будет компилировать код js из своего отдельного источника частично, оставляю привязку переменных к шаблону на клиенте. Сайт Vue ответа на вопрос, как это сделать, не дал.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.