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

Mortgage

You will have to provide the lang files at a public place, because as you are aware, laravel transaltes everything server side. The library you mentioned seems a bit old, what about this one: github.com/xiCO2k/laravel-vue-i18n – Bryology

@Bryology Thanks for the suggestion for the new Library. I tried it but have not found any method or way to change the Locale. Also, this is not getting the locale of Laravel. When I manually change the hardcoded locale in the app.blade.php file's lang attribute in the html tag then it shows translated values. I just need a way to change the locale via Vue Template. – Mortgage

You can pass the locale of your backend to your frontend. – Bryology

@Bryology Thanks I have done it already. It's working perfect now. – Mortgage

you did not post your solution yet :) – Pliocene

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.

Saxen

Thanks for your solution. I have solved it already. I have found a more efficient way and will post my answer soon after testing on the production level. – Mortgage

I am glad you found a solution. – Saxen

@AbhishekKumar, what is the more efficient way you were talking about? – Busra

Answer 2

Old post but you can use https://www.npmjs.com/package/vite-plugin-laravel-i18next which supports pluralization, nested translations, interpolation and other laravel localization features. PS. I'm the maintainer.

Altman