_dpertsin_'s avatar

What is the best practice to build multi language setup with React Starter kit on Laravel?

Hey everyone,

I am working on a project and I initialized react starter kit. Laravel already has basic localization at resources/lang using PHP arrays and at the documentation it mentions of localization but I think it works only with blade.

For react do we use a library? I found this one: https://github.com/EugeneMeles/laravel-react-i18n , should I go for it or am I doing something wrong?

Also, I would love if someone found any article with detailed explanation for setting it up, with user language preference, browser preference etc.

I'd love to hear from someone who has done Laravel + React localization before. Any tips on structure, syncing, or automating translations would be really appreciated.

Thanks in advance!

1 like
3 replies
vincent15000's avatar

I have developed a multi language application with VueJS.

I have installed the vue-i18n package. So it seams that you have an equivalent for React.

Then I have created languages folder inside the js folder.

Inside the languages folder, I have several files with all translations.

For example.

// js/languages/dashboard.js
export default {
    en: {
        filter: 'Filter',
        filters: 'Filters',
        search: 'Search',
    },
    
    fr: {
        filter: 'Filtrer',
        filters: 'Filtres',
        search: 'Rechercher',
    },
}

I call these files via the index.js file.

// js/languages/index.js
import dashboard from './dashboard.js';

const languages = {
    en: {
        dashboard: dashboard.en,
		...
    },
    fr: {
        dashboard: dashboard.fr,
		...
    }
};

export default languages;

And I load the translations in the app.js file.

import { createI18n } from 'vue-i18n';
import languages from './languages';

let locale = localStorage.getItem('locale');

if (!locale) {
    localStorage.setItem('locale', 'fr');
    locale = 'fr';
}

const i18n = createI18n({
    locale: locale,
    fallbackLocale: 'fr',
    messages: languages,
});  

And I switch from one language to another via this simple component.

<template>
    <form>
        <select class="hidden sm:block outline-none appearence-none rounded px-2 py-1 text-yggdra-dark" id="language" v-model="$i18n.locale">
            <option value="en">{{ $t('language.english') }}</option>

            <option value="fr">{{ $t('language.french') }}</option>
        </select>

        <select class="sm:hidden outline-none appearence-none rounded px-2 py-1 text-yggdra-dark" id="language_short" v-model="$i18n.locale">
            <option value="en">{{ $t('language.english_short') }}</option>

            <option value="fr">{{ $t('language.french_short') }}</option>
        </select>
    </form>
</template>

<script setup>
</script>

You should be able to do something similar with React.

2 likes
_dpertsin_'s avatar

@vincent15000 Thank you for the reply. I started with the plugin explanation, and it is working fine. I hope that I will not regret it in the future. :)

But I think it will be fine.

1 like

Please or to participate in this conversation.