Traduire Laravel Jetstream et Inertia avec vue-i18n / Matice
3 min read

Traduire Laravel Jetstream et Inertia avec vue-i18n / Matice

Comment traduire un nouveau projet créé avec Laravel Jetstream et InertiaJs ? Je vous explique les différentes possibilités !
Traduire Laravel Jetstream et Inertia avec vue-i18n / Matice

Pour traduire les différents contenus de Laravel et de Jetstream, le package laravel-lang/lang fournit des fichiers clef en main à copier / coller. Il nous reste seulement à gérer la traduction des fichiers Vue.

Pour cela, nous avons 2 possibilités :

  • baser notre traduction uniquement coté serveur. C'est le partie pris du package GENL/Matice.
  • Séparer les traductions front-end / back-end et utiliser le package vue-i18n

En fonction de votre équipe et de vos possibilités d'évolution, une solution ou l'autre est préférable. Matice s'utilise très simplement pour une équipe qui vient de Blade / Laravel parce qu'il reprend le fonctionnement des fonctions côté PHP. Par contre, le package est encore jeune et pour l'instant il ne gère pas encore le lazy loading de plusieurs langues : soit une seule langue est chargée, soit elles le sont toutes. À l'inverse, vue-i18n est la solution la plus utilisée pour traduire des projets Vue mais ne propose pas d'intégration particulière pour Laravel.

Utiliser GENL/Matice

On ajoute le package composer :

composer require genl/matice

On ajoute la directive @translations dans notre fichier app.blade.php avant le chargement de nos fichiers JS.

Coté JS, un package est également disponible pour ajouter les fonctions de traductions inspirées de Laravel :

npm install matice --save-dev

Ensuite, les fonctions et leurs paramètres sont détaillés dans le README du projet et sont similaires à Laravel.

GENL/matice
Use your Laravel translations in JavaScript. Contribute to GENL/matice development by creating an account on GitHub.

Utiliser Vue-i18n

Installation de Vue-i18n dans un projet Laravel Jetstream

Pour vue-i18n, la solution est uniquement côté front-end.

npm i --save-dev vue-i18n@next

Pour utiliser des fichiers JSON ou des traductions dans les fichiers Vue, il est nécessaire d'ajouter @intlify/vue-i18n-loader et de configurer webpack.

npm i --save-dev @intlify/vue-i18n-loader@next

Dans le fichier webpack.config.js :

module: {
        rules: [
            {
                test: /\\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
                type: 'javascript/auto',
                loader: '@intlify/vue-i18n-loader',
                include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
                    path.resolve(__dirname, 'src/locales')
                ]
            },
            {
                resourceQuery: /blockType=i18n/,
                type: 'javascript/auto',
                loader: '@intlify/vue-i18n-loader'
            },
        ]
    }

Utilisation de Vue-i18n dans un projet Laravel Jetstream

Il ne nous reste plus qu'à ajouter vue-i18n à notre instance de Vue.

Pour cela, on modifie notre fichier app.js.

import { createI18n } from 'vue-i18n'

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

// ajouter après .use(InertiaPlugin)
.use(i18n)

Il est alors possible de créer des blocs i18n directement dans un composant :

<i18n locale="fr">{
    "forgot_password": "Mot de passe oublié?",
    "login": "Se connecter",
    "remember_me": "Se souvenir de moi"
}</i18n>

Sinon, on peut mettre nos traductions dans un fichier js.

export default {
    "agree": "J'accepte les {tos} et la {privacyPolicy}",
    "email": "Email",
    "name" : "Raison sociale",
    "password": "Mot de passe",
}

Notre installation rend disponible une fonction this.$t() dans nos composants qui prend en paramètre la clef de traduction et renvoie le contenu en fonction de la langue définie.

Par exemple :

<jet-label for="password_confirmation" :value="$t('confirm_password')" />

Parfois, ce fonctionnement n'est pas suffisant. Je veux afficher le message

"J'accepte les Conditions d'Utilisation et la Politique de Confidentialité" et créer des liens vers 2 pages différentes.

Pour des cas complexes, vue-i18n permet de créer une balise i18n-t qui dans notre exemple va remplacer {tos} et {privacyPolicy} par les templates fournis. Coté traduction, on a juste à indiquer

"agree": "J'accepte les {tos} et la {privacyPolicy}".

<i18n-t keypath="agree">
    <template #tos>
        <a target="_blank" :href="route('terms.show')" class="underline text-sm text-gray-600 hover:text-gray-900">{{
                $t('tos')
            }}</a>
    </template>
    <template #privacyPolicy>
        <a target="_blank" :href="route('policy.show')" class="underline text-sm text-gray-600 hover:text-gray-900">{{$t('privacy_policy')}}</a>
    </template>
</i18n-t>

Vous aimez mes articles? Inscrivez-vous pour être alerté des nouveautés.