Локализация компонентов VueJS в Laravel

Question

В 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 }} берутся из атрибутов, это не надо переводить.

Answer 1

Нашел ответ на 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>

Answer 2

Создайте таблицу с переводами (файл с переводами), поместите в 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() }} // получим Меню

БЛОГ НА HUSL

Локализация компонентов VueJS в Laravel

Ответы (2 шт):

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

VueJS