Перевод Laravel в VueJS

В этой статье я хочу представить вам пакет, который поможет вам использовать функции перевода Laravel в VueJs.

Имя пакета — Laravel Vue Translation, который можно установить через composer.

Начало работы:

установить пакет через композитор

composer require tohidplus/laravel-vue-translation

Если версия Laravel 5.6+, вам не нужно регистрировать поставщика услуг.

В файле config/app.php добавьте поставщика услуг:

'providers' => [
   //
   Tohidplus\Translation\TranslationServiceProvider::class,
   //
 ];

Опубликуйте ресурсы пакета, выполнив команду:

php artisan vendor:publish --provider="Tohidplus\Translation\TranslationServiceProvider"

Это добавит файл Translation.js в каталог resources/js/VueTranslation.

Запустите ремесленную команду:

php artisan VueTranslation:generate

Это скомпилирует все файлы перевода из каталога resources/lang в файл resources/js/VueTranslation/translations.json.

Откройте файл resources/js/app.js и добавьте помощник перевода и добавьте метод перевода к объекту окна(если вы хотите получить доступ к методу из любого места за пределами компонентов Vue) или Vue (если вы хотите получить доступ к методу из компонентов Vue)

window.Vue = require('vue');
// If you want to add to window object
window.tranlate=require('./VueTranslation/Translation').default.translate;

// If you want to use it in your vue components
Vue.prototype.translate=require('./VueTranslation/Translation').default.translate;

Скомпилируйте ресурсы, выполнив команду:

npm run development
// or watch or production

Как переключать языки?

Это позволит получить текущий язык из атрибута документа lang.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
    
    </body>
</html>

Как пользоваться?

Представьте, что это структура каталога resources/lang.

|--en
   |--auth.php
   |--pagination.php
   |--passwords.php
   |--validation.php
   |--messages.php
|--fr
   |--auth.php
   |--pagination.php
   |--passwords.php
   |--validation.php
   |--messages.php

И файл messages.php выглядит примерно так:

return [
    'foo'=>[
        'bar'=>'Some message'
    ]
];

Вы можете получить значение, вызвав метод translate:

translate('messages.foo.bar');

Пример в компоненте Vue:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        {{translate('messages.foo.bar')}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
      
    }
</script>

Заменить атрибуты

Не рекомендуется использовать этот пакет для отображения ошибок проверки, но если вы хотите, вы можете заменить :attribute, :size и т. д., передав второй аргумент как объект.

translate('validation.required',{
    attribute:translate('validation.attributes.title')
});

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

Перевод Laravel в VueJS