Using Laravel localization with JavaScript and VueJS

Serhii Matrunchyk
Mar 1, 2017 · 3 min read
Image for post
Image for post
The PHP Framework For Web Artisans

We do know that Laravel has a wonderful localization support out of box which by default is located in resources/lang folder. We can use it in PHP calling helper function like trans('auth.email') (or you can use also __ in newer versions). Laravel’s Blade template engine also has support of this helper:

<label for="email">{{ trans('auth.email') }}</label>

or (newer versions)

<label for="email">@lang('auth.email')</label>

So the code above would be rendered as:

<label for="email">Email:</label>

Passing Laravel language strings to JavaScript

But what about JS? It has neither trans() nor __() functions by default (at least up to version 5.6). And it doesn’t even know anything about localization strings, which by the way could be organized as JSON objects in PHP (since L5.4).

Yeah, we can use any package dedicated to bringing localization to JS, but let’s keep in mind that as many packages we have as dependencies as harder our application gets supportable. Dependency hell, right?

Passing JSON object with localization strings to the browser

All we need to do is add the following piece of code to our routes/web.php file (or app/Http/routes.php for earlier Laravel versions):

// Localization
Route::get('/js/lang.js', function () {
$strings = Cache::rememberForever('lang.js', function () {
$lang = config('app.locale');

$files = glob(resource_path('lang/' . $lang . '/*.php'));
$strings = [];

foreach ($files as $file) {
$name = basename($file, '.php');
$strings[$name] = require $file;
}

return $strings;
});

header('Content-Type: text/javascript');
echo('window.i18n = ' . json_encode($strings) . ';');
exit();
})->name('assets.lang');

So here we’re walking through all language files for a current system language and combining them down together and making them accessible via special route lang.js. Now we just need to pull this route in our HTML to make this object globally visible:

<script src="/js/lang.js"></script>

Done! From this moment we are able to use it referring to window.i18n object, for example:

console.log(i18n.auth.email);

We can even define a missing helper (es6 syntax)

// script.jsconst _ = import('lodash');window.trans = (string) => _.get(window.i18n, string);

Really cool.

VueJS meets Laravel localization

There’s no much code here as well:

// App.vueconst _ = import('lodash');Vue.prototype.trans = string => _.get(window.i18n, string);

Now we are completely free to use the same syntax in our .vue files (or even string templates in literal) as we use in Blade!

// LoginForm.vue<template>
<label for="email">{{ trans('auth.email') }}</label>
</template>

Exactly the same as we use in Blade. Unified solution.

From now on, we can easily migrate our templates from Blade to .vue.

Mission accomplished! We just have simplified our lives.

BONUS

If we need a support for parameterized language strings, we can easily modify the helper like this:

Vue.prototype.trans = (string, args) => {
let value = _.get(window.i18n, string);

_.eachRight(args, (paramVal, paramKey) => {
value = _.replace(value, `:${paramKey}`, paramVal);
});
return value;
};

But this time you can’t use Blade syntax as-is because of difference between PHP’s associative arrays and JS’ objects:

<strong>
{{ trans('validation.required', {attribute: 'email'}) }}
</strong>

But anyway, it’s a minor side-effect. This is still pretty usable feature and nice way to add a support for your Laravel application in Vue components with less efforts.

Serhii Matrunchyk

Written by

Owner & CEO @Digital Idea. Professional Full-Stack Web Developer. Lives in: Lutsk, Ukraine. Frameworks: VueJs, Node, Laravel, WordPress, AWS.

Serhii Matrunchyk

Written by

Owner & CEO @Digital Idea. Professional Full-Stack Web Developer. Lives in: Lutsk, Ukraine. Frameworks: VueJs, Node, Laravel, WordPress, AWS.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store