How to use Laravel translations in JavaScript, in case of SPA application

How to use Laravel translations in JavaScript, in case of SPA application

Dima Botezatu
03 Jan, 2020
Max 2min read

By default Laravel has a folder in resources/lang that contains all the translations used in the application. We want to use these translations in JS, for example in the case of a SPA application.

We will use a web route where we will render translations only for the current language in the application.

We define this route right in in web.php

Route::get('js/translations.js', function () {
    $lang = config('app.locale');
    $strings = \Illuminate\Support\Facades\Cache::rememberForever('lang_'.$lang.'.js', function () use($lang) {
        $files = [
            resource_path('lang/' . $lang . '/common.php'),
            resource_path('lang/' . $lang . '/validation.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) . ';');

Pay attention to 2 things.

  1. We use Cache to store translations.
  2. We include only the files we need to translate, in our case: common.php and validation.php

In a blade, header or footer file, before the main scripts:

<script src="{{ route('translations') }}"></script>

Now we need to create a JS function that will help us easily translate from anywhere in our JS application. Make sure you have the lodash plugin installed. If not: 

npm i --save lodash

Now we will write this in our main script, let's say app.js

import getLodash from "lodash/get";
import eachRightLodash from "lodash/eachRight";
import replaceLodash from "lodash/replace";

window.translate = function(string, args){
let value = getLodash(window.i18n, string);

eachRightLodash(args, (paramVal, paramKey) => {
value = replaceLodash(value, `:${paramKey}`, paramVal);
return value;

Now we can call our function anywhere in the application to translate a key, for example:

translate('common.years', { nr: 10 });
// The result will be: 10 years

If you use VueJS, we can create a prototype:

Vue.prototype.trans = (string, args) => {
     return window.translate(string, args);

Then in a VueJS component:

      return this.trans('common.years', { nr: 10 });
Get weekly updates on the newest design stories, case studies and tips right in your mailbox.
A confirmation has been sent by email.
If you don't find it in your inbox, check your spam folder!