How should I support localization for my project with Laravel with Vue using Inertia?

Question

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

Answer 1

Here is how you can do localization in this case:

1. inside the app/Providers/AppServiceProvider.php add

'locale' => function () {
     return app()->getLocale();
            }

2. 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';

3. In the same component, where you imported the trans, you can use it like this:

{{ trans('My Profile')}}

4. In the component where you change your language (you probably have a change language dropdown), add this:

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",
}

6. add a route for your language change event"

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.