1

В Laravel есть пакет локализации, который работает так (PHP):

echo __('I love programming.');

А как сделать то же самое, но для компонентов, построенных на VueJS? Использую стандартное коробочное решение - Laravel MIX.

Хочу примерно так:

<template>
    <div class="alert alert-danger alert-dismissible">
        <button type="button" class="close" aria-hidden="true" title="{% RELOAD %}" @click="$emit('reload')"><i class="fas fa-sync"></i></button>
        <h5 v-if="title"><i class="icon fas fa-ban"></i> {{ title }}</h5>
        {{ message }}
    </div>
</template>

<script>
    export default {
        props: ["title", "message"]
    }
</script>

Тут в {% RELOAD %} я поместил текст для замены, который должен подтянуться из файлов локализации.

UPD {{ title }} и {{ message }} берутся из атрибутов, это не надо переводить.

4
  • Вы хотите, чтобы значение title брался из аттрибута title?
    – Dmytro
    25 мар 2020 в 8:35
  • @Дмытрык, нет title уже берется из атрибута и с этим все в порядке. Я про {% RELOAD %} - это должно брался из языкового файла. Желательно, тем же способом, что работает Laravel движок, например за 'messages.welcome' он пойдет в resourses/lang/ru/messages.php для PHP. Это должно делаться на этапе билдежки, либо подтягиваться через какую-то зависимость. Я решение на коленке сам могу придумать, я хочу узнать есть ли "правильный" способ. 25 мар 2020 в 8:42
  • а, ну это чисто php-ная задача. Я тут пас
    – Dmytro
    25 мар 2020 в 9:00
  • @Дмытрык, возможно что и нет решения на PHP. Просто в Laravel довольно много "магии", а ту документацию что я видел, и уроки что я смотерел - такого там не было. Может быть, нужно добавить node-пакет PHP, который полазит по этому каталогу, соберет данные и сконвертит их в JSON, который уже можно подрубить как зависимость к собственному VueJS компоненту. Если не получу ответ, наверное так и буду делать. А вдруг есть "правильное" решение, все уже придумано за меня? Или хотя бы есть какой-то бест практис. 25 мар 2020 в 11:45

2 ответа 2

2

Нашел ответ на medium.com

Передача JSON объекта с переводом в браузер

В файл routes/web.php добавить:

// Localization
Route::get('/js/lang.js', function () {
    $strings = Cache::rememberForever('lang.js', function () {
        $lang = config('app.locale');

        $files   = glob(resource_path('lang/' . $lang . '/*.php'));
        $strings = [];

        foreach ($files as $file) {
            $name           = basename($file, '.php');
            $strings[$name] = require $file;
        }

        return $strings;
    });

    header('Content-Type: text/javascript');
    echo('window.i18n = ' . json_encode($strings) . ';');
    exit();
})->name('assets.lang');

Таким образом, в зависимости от языковой настройки, будут выбраны все нужные файлы и сформирован JSON объект. Он будет доступен через роут js/lang.js.

Затем в шаблон страницы нужно подключить этот скрипт:

<script src="/js/lang.js"></script>

Таким образом, стало возможно получить переводы:

console.log(i18n.auth.email);

или через хелпер:

// script.js
const _ = import('lodash');
window.trans = (string) => _.get(window.i18n, string);

VueJS

Теперь нужно импортировать во VueJS новый метод:

// App.vue
const _ = import('lodash');
Vue.prototype.trans = string => _.get(window.i18n, string);

В результате, в шаблонах (.vue файлы) мы теперь можем использовать тот же синтаксис, что и в Blade!

// LoginForm.vue
<template>
    <label for="email">{{ trans('auth.email') }}</label>
</template>
1
  • Не хотел работать на продакшн сервере. роут js/lang.js отказывался понимать. роут js/lang понимает. перевод доступен в скриптах: i18n.jsMessages.{minLength} пока не пойму, почему роут с .js не определяется. 6 окт 2020 в 11:26
1

Создайте таблицу с переводами (файл с переводами), поместите в Store, и далее фильтр на необходимое для перевода (глобально фильтр определите в admin.js):

Vue.filter('trans', function (value) {
    for (var key in store.state.russian) {
        if (value === key) {
            value = store.state.russian[key]
        }
    }
    return value
})

Store:

export  default {
        state:{
            russian: {
                "menu": "Меню"
            }
        }
    }

{{ menu | trans() }} // получим Меню

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.