I am intermediate in Laravel. I have some published projects in Laravel for my clients.
I started a Project with Laravel with Vue using Inertia. I used a starter kit of Laravel 10 with the breeze and vue. While I am setting up my project and configuring various things, I walked through the lang
directory which I published by artisan command by Laravel 10.
I am stuck at localization. I knew how to translate and localize things with Laravel only. Here is Laravel with vue is absolutely new to me.
I researched for implementing localization but I found 3 to 4 years old resources without proper implementations and a lot of hard work even lack of some translation features of laravel.
As I stated I used the starter kit and I publish the lang directory using the artisan command. I tried to change the failed
message of the auth.php
file located in lang/en/auth.php
. I checked it by entering the wrong credential and it's appeared my updated message in error. However now I created the hi
directory for the Indian HINDI language. I copied the auth.php
and translated all three messages for this file. I changed the default locale from config/app.php
and tested again with the wrong credentials. This time it does not show my HINDI translation. It is showing the same English translation again. Even again I tried to change the translation line in English and it showed the updated line.
I inspected those file components for locating the translation source and I realize that it just showed an error message by form
. I don't know why it not picking up my translation files when I changed the default locale.
I am looking for an easier and more efficient way for localization in Laravel with Vue and Inertia.
After a lot of research, I found this package https://github.com/rmariuzzo/Laravel-JS-Localization.
Please let me know if will it do the job in an efficient way or if there is something default in Laravel with Vue and Inertia that is hidden from my eyes.
Thanks
Abhishek Kumar
Here is how you can do localization in this case:
app/Providers/AppServiceProvider.php
add'locale' => function () {
return app()->getLocale();
}
Install the laravel-vue-i18n
package using npm i laravel-vue-i18n
and import it into the component where you need. for example: import { trans } from 'laravel-vue-i18n';
In the same component, where you imported the trans
, you can use it like this:
{{ trans('My Profile')}}
export default {
setup() {
methods: {
changeLang(lang) {
Inertia.get(route("language", lang));
location.reload();
},
},
5.add new en.json
or hindi.json
files for each language.
these file should contain all the strings you are using for translations. for example:
{
"My Profile": "some hindi text",
}
Route::get('language/{language}', function ($language) {
session()->put('locale', $language);
return;
})->name('language');
Now after clicking on change language dropdown, the defined string will be changed.
I have a running and working example, if you faced any problem.