Настройка локализации Laravel + Inertia + Vue

Для настройки локализации нужно немного потрудиться. Первое что я сделаю скачаю файлы переводов. Переходим по адресу. Примеры всех созданных файлов можно будет забрать в конце материала

	https://laravel-lang.github.io/lang/installation/composer.html
	
	// выбираем пакет для вашей версии и запускаем команду 
	// у меня Laravel 8
	
	composer require laravel-lang/lang:~8.0

	// После установки пакета по путям можно забрать нужные вам файлы языков перевода и перекинуть их корень\resources\lang 
	корень/vendor/laravel-lang/lang/json
	корень/vendor/laravel-lang/lang/src

Добавляем код для передачи данных в представление

	// Правки в файле Providers/AppServiceProvider.php
	
	Inertia::share([
	// ...
	'locale' => function () {
		return app()->getLocale();
	},
	'language' => function () {
		return translations(
			resource_path('lang/'. app()->getLocale() .'.json')
			);
		},
		// ...
	]);

Добавляем файл со вспомогательной функцией

Эта функция возвращает файл перевода JSON, используемый в указанной выше языковой переменной.

	// Путь к файлу app/helpers.php - этот файл необходимо создать
	
	function translations($json)
	{
		if(!file_exists($json)) {
			return [];
		}
		return json_decode(file_get_contents($json), true);
	}

// composer.json находится в корне
Затем нам нужно добавить созданный файл в autoload. Для этого отредактируйте composer.json добавив следующие строки

	"autoload": {
		// ...
		"files": [
			"app/helpers.php"
		]
	},

После добавления запустите следующую команду терминала в корне вашего приложения Laravel.

	composer dump-autoload

Компонент переключатель языков

Следующим шагом будет создание компонента Vue, чтобы пользователь мог переключать свои языковые предпочтения. Компонент будет простым с отображением ссылок по типу RU, EN

	// Путь к файлу resources/js/Shared/LanguageSelector.vue файл необходимо создать
	
	<template>
		<div class="ml-4">
			<inertia-link :href="route('language', ['ru'])">            
				ru
			</inertia-link>

			<inertia-link :href="route('language', ['en'])">            
				en
			</inertia-link>
		</div>
	</template>

	<script>
		export default {
			computed: {
				selectable_locale() {
					if (this.$page.props.locale == "ru") {
						return "en";
					}
					return "ru";
				},
			},
		};
	</script>

Настройка путей для переключения языка

На предыдущем шаге есть inertia ссылка на маршрут «/language». Этому маршруту мы передаем код желаемого языка, а затем устанавливаем его в сессию, как показано ниже.

	// Редактируем роуты routes/web.php
	
	Route::get('language/{language}', function ($language) {
		Session()->put('locale', $language);
		
		return redirect()->back();
	})->name('language');

Создаем middleware

После того, как мы добавили код языка в сессию, нам нужно добавить middleware для проверки этого значения при каждом запросе страницы и убедиться, что мы передаем правильную переменную в представление (view).

	//Пишем команду для создания middleware
	php artisan make:middleware SetLocale
	
	// Путь к файлу Http/Middleware/SetLocale.php добавляем код в handle
	namespace App\Http\Middleware;
	
	use Closure;
	
	class SetLocale
	{
		public function handle($request, Closure $next)
		{
			app()->setLocale(config('app.locale'));
			if(session()->has('locale')) {
				app()->setLocale(session('locale'));
			}
			
			return $next($request);
		}
	}

Регистрируем middleware

Убедитесь, что он зарегистрирован после того, как мы инициализировали Laravel Сессии т.е. наша строка должна находится ниже StartSession::class.

	// Путь к файлу Http/Kernel.php
	
	protected $middlewareGroups = [
		'web' => [
			// ...
			\Illuminate\Session\Middleware\StartSession::class,
			\App\Http\Middleware\SetLocale::class,
			// ...
		],
	];

Регистрируем mixin для переводов во Vue

С помощью этого кода мы будем транслировать наши файлы переводов(ru.json, en.json) в javascript. Откуда после будем брать значения ключей.

	// необходимо подключить mixin(require("./base")) в app.js
	
	createApp({
		render: () =>
		h(InertiaApp, {
			initialPage: JSON.parse(el.dataset.page),
			resolveComponent: (name) => require(`./Pages/${name}`).default,
		}),
	})
	.mixin({ methods: { route } })            
	.mixin(require("./base")) // вот так я его подключаю
	.use(InertiaPlugin)	
	.mount(el);

Создаем сам файл base.js

	// Путь к файлу resources/js/base.js файл необходимо создать
	
	module.exports = {
		methods: {
			/**
			* Translate the given key.
			*/
			__(key, replace = {}) {
				var translation = this.$page.props.language[key]
                ? this.$page.props.language[key]
                : key;
				
				Object.keys(replace).forEach(function (key) {
					translation = translation.replace(':' + key, replace[key])
				});
				
				return translation
			},
			
			/** 
			* Translate the given key with basic pluralization. 
			*/
			__n(key, number, replace = {}) { 
				var options = key.split('|');   
				
				key = options[1]; 
				if(number == 1) { 
					key = options[0]; 
				}   
				
				return tt(key, replace); 
			},
		},
	}

Пример использования написанного функционала

Добавляем следующий код в ваш Vue компонент

	// 30 Days это ключ перевода 
	// __() - Данная конструкция используется для ключей
	
	{{ __("30 Days") }}

Примеры всех файлов скачать