Nous avons vu précédemment comment utiliser les fichiers de traductions PHP qui se situent dans notre répertoire ressources. Malheureusement, si vous utilisez Vue JS pour afficher vos pages, ces traductions ne sont pas nativement disponibles (elles sont en PHP et pas en JS). Voyons comment pallier ce problème et conserver un seul référentiel.
L’installation:
On part du principe que vous avez déjà fait un npm install, et que vous avez lu mon tuto sur les notions de l’internationalisation de base sous Laravel.
Ma solution s’inspire de ce billet, de cette librairie , et de celle ci mais je vais essayer de détailler un peu plus. Pour commencer, faites:
composer require mariuzzo/laravel-js-localization
npm install webpack-shell-plugin –sav
Rajoutez ensuite le provider dans votre config\app.php
Mariuzzo\LaravelJsLocalization\LaravelJsLocalizationServiceProvider::class
Et générez le fichier de config avec:
php artisan vendor:publish –provider= »Mariuzzo\LaravelJsLocalization\LaravelJsLocalizationServiceProvider »
La configuration:
Dans votre fichier de config\localization-js.php, il vous faut ça:
return [
'messages' => [
'messages'
],
'path' => resource_path('assets/js/vue-translations.js'),
]; La première partie liste les fichiers à ajouter aux traductions, la seconde indique l’emplacement du fichier qui contiendra les traductions en javascript.
Ajouter la librairie à Vue JS:
Dans votre fichier resources\assets\js\app.js, ajouter ca, juste en dessous la ligne require(« vue »);
var Lang = require('lang.js');
import translations from './vue-translations.js';
// this is why we used the --no-lib in our commandline
var lang = new Lang();
//lang.setLocale('fr'); //To force local
lang.setMessages(translations);
//alert(lang.get('messages.Ascending_price'));
Vue.filter('trans', (...args) => {
return lang.get(...args);
});
Ici, on déclare la librairie de traduction, on lui indique le fichier contenant les traductions, et on lui ajouter la fonction trans pour effectuer les traductions.
Création du fichier des traductions vue-translations.js:
La commande php artisan lang:js –quiet –no-lib permet de générer ce fichier. Attention à bien spécifier l’argument no-lib sinon, vous aurez un fichier qui ne pourra pas être appelé directement dans Vue. Mais comme de toute façon, quand on fait du Vue JS, on passe par Laravel Mix, alors autant rajouter ces lignes à votre fichier webpack.mix.js afin de le compiler automatiquement lors de chaque build.
const WebpackShellPlugin = require('webpack-shell-plugin');
// Add shell command plugin configured to create JavaScript language file
mix.webpackConfig({
plugins:
[
new WebpackShellPlugin({onBuildStart:['php artisan lang:js --quiet --no-lib'], onBuildEnd:[]})
]
});
Appel de la traduction dans les components:
La variable doit être appelée comme une chaîne de caractères entre 2 brackets puis , il faut lui chainer la fonction trans de cette manière.
{{‘messages.Merchant’ |trans}}
La locale étant géré correctement par Laravel, pas la peine de la passer au composant.
Pour terminer, il faut faire un npm run prod.
Conclusion:
Ca y’est , on a fait le tour. Vous êtes maintenant paré pour vous lancer dans les sites internationaux. Bon courage à vous car maintenant, il va falloir pensez aux « vrais » problèmes concernant les taxes, les devises, les liens hreflang, et autres subtilités 😉
