DEV Community

How to use Laravel translations in JS (vue) files?

Daiyrbek Artelov on October 04, 2019

After some research on this topic, I found out that none of the existing solutions satisfy my needs. Most of them required either recompilation of ...

Read full post

Alecs • Feb 12 '20 • Edited

hey,

thank you for the nice article but i think this is not correct.
I implemented it as described and I have this error

[Vue warn]: Error in render: "TypeError: _.forEach is not a function"

I tried to import that from odash and still there is another error... Also where so you put the Vue.mixin(require('./trans')) ? I've put it after the registration of components in app.js. Is this correct?

Daiyrbek Artelov • Feb 12 '20

Hi @Alecs,

Make sure you have lodash imported and globally available. I have my imports in /resources/js/bootstrap.js file which is then imported in the app.js file:

import _ from 'lodash'
window._ = _

I've put it after the registration of components in app.js. Is this correct?

Yes, I have them right there in bootstrap.js file after components registration.

Alecs • Feb 12 '20 • Edited

hey @4unkur ,

thank you for the reply first of all.
I was having the require bootstrap commented out.

I have one last question and that is what is the idea behind this hole scripts/logic? we cache the translations one time for life and then use it in the app? how can a person extend this to switch the languages if only one language is cached?

Sandman • Feb 20 '20 • Edited

@Alecs:
I solved this problem by combining this solution with the solution described here:
laraveldaily.com/multi-language-ro...

Then, the problem of once-in-life caching is still there, however, you have a middleware, which you can use for all necessary routes.
I moved the content of the TranslationServiceProvider's boot method into the handle method of the SetLocale middleware, this granted the calls to Cache::rememberForever in a regular manner.

My technical debt:
I observed, that
$tmpLoc = app()->getLocale();
$tmpSeg = $request->segment(1);
behave not as expected inside the handle method of SetLocal. I.e. while
$tmpSeg = $request->segment(1);
behaves as expected,
$tmpLoc = app()->getLocale();
sometimes overtakes and is set to the current language even before the line
app()->setLocale($request->segment(1));

The consequence is, that the cache is not refreshed in all circumstances it should be. However, I added another field to the cache wherein I track the current language manually. I check this field inside the handle method instead of app()->getLocale(), compare it to $request->segment(1) and if they do not match I call Cache::forget('translations');

So, in the end, I assume, the middleware handle method is the proper place to apply the translation, but there are calls somewhere, which change the app localization even before the middleware is called.

Daiyrbek Artelov • Feb 25 '20

@Alecs

Thanks for pointing out. I was busy and not able to check it until now and I can confirm that the solution is not working as expected. I'll probably update the article, but currently, I have no idea how can I solve it. Do you have any ideas?

@Sandman

Your solution seems to be in the right direction, I'll check that too.

Thanks.

Daiyrbek Artelov • Feb 25 '20

@morpheus_ro , @sandman83
Please check the updated version guys

Luis Nicho • Jul 2 '20

I think it is better to import the single function you need from lodash instead of importing the whole library: window._forEach = require('lodash/forEach');

anejjar Elhoucine • Apr 30 '20

Hello bro,
i'm trying to use your solution but i got some errors like

this error comes from this block of code
if (translationNotFound) { translation = window._translations[window._locale]['json'][key] ? window._translations[window._locale]['json'][key] : key }

abalest14 • Dec 24 '20

i have the same error how did you solved?
thanks

anejjar Elhoucine • Dec 24 '20 • Edited

you should just check if window._translations is set or not
dev-to-uploads.s3.amazonaws.com/i/...

abalest14 • Dec 24 '20

thanks this fixed the console error. Another problem i get window._translations undefined and con't understand what i make wrong is like is not passing window._translations from blade to JS. You have some advise?

anejjar Elhoucine • Dec 25 '20

did you put this in app.blade.php, but sometimes the {!! cache('translations') !!} is not returning any data so the window._translations is null

Matt Miller • Mar 3 '22

Do you have any updates so far? I've struggling with that particular issue and it's occur totally random. I would very appreciate if so!

anejjar Elhoucine • Mar 7 '22

i used same package but i found a lot of issus and i have updated the code many times to work for me. and i dont know how to explain my method to you unless i see your code and the error your are having

Ulimn • Nov 25 '19 • Edited

Exactly the solution I was looking for! Thank you!

P.S.: I had to extend this to handle locale switching, but it was only a few lines of code.

Daiyrbek Artelov • Nov 29 '19

You are welcome!

Can you share those lines?

PatricNox • Apr 10 '20

Great guide, it's super beneficial to know and also works great, thank you for this!

I did however need to adjust the provider a little, to automatically detect which languages the transliteration should support. I achieved this by recursively scanning every folder within resources/lang, and get the locales from there.

App/Providers/TranslationServiceProvider.php

/**
 * Bootstrap the application services.
 *
 * @return void
 */
public function boot()
{
    Cache::rememberForever('translations', function () {
        $translations = collect();
        $locales = array_map(
            function($dir) {
                return basename($dir);
            }, glob('../../resources/lang/*')
        );

        foreach ($locales as $locale) {
            $translations[$locale] = [
                'php' => $this->phpTranslations($locale),
                'json' => $this->jsonTranslations($locale),
            ];
        }

        return $translations;
    });
}

This enables me to not having to edit the provider every time we add support for a new language.

Theofilos Intzoglou • Nov 17 '20

In case you are using json files which should be inside the /resources/lang/ directory, you should add the GLOB_ONLYDIR option to the glob function in the code above.

Aleksandr Dovbos • Feb 15 '20

On my last project I did yml translations => json file and injection in i18n-vuex(for vee-validate and etc.). But for new project I think your approach is perfect. Thank you for sharing new way, happy coding:)

Daiyrbek Artelov • Feb 25 '20

You are welcome

bArraxas • Jul 9 '20

Great post !
I had just need edit this line to be supported by windows too :

Before : $path = resource_path("lang/$locale");
After : $path = resource_path("lang" . DIRECTORY_SEPARATOR . $locale);

(markdown of the hell, 10 minutes lost for nothing...)

jalowin • Nov 4 '20

Hi, I am using this code in my app ans It's all Ok, but I need to know how can I translate the placeholder for a input

this code in laravel crash the compilation

Thanks for all

Juan Carlos Rodríguez • Dec 17 '20

Hey guys, it seems like I'm in the right path but I still have two questions because it is not working for me yet. 1. How to call the trans.js file? In the app.js? 2. Where exactly should I add the mixin? Thank you!

Pietro Zuntini • Jun 6

Hi @4unkur ,

I've used your code for about 3 years now and I'm very grateful for your solution!

I'm trying to upgrade my Laravel 9 app to Laravel 11, but when using your service provider, I'm now getting the following error:

php artisan serve

RuntimeException

This database engine does not support upserts.

at vendor/laravel/framework/src/Illuminate/Database/Query/Grammars/Grammar.php:1308
1304▕ * @throws \RuntimeException
1305▕ /
1306▕ public function compileUpsert(Builder $query, array $values, array $uniqueBy, array $update)
1307▕ {
➜ 1308▕ throw new RuntimeException('This database engine does not support upserts.');
1309▕ }
1310▕
1311▕ /*
1312▕ * Prepare the bindings for an update statement.
  +7 vendor frames 
8 app/Providers/TranslationServiceProvider.php:22
Illuminate\Support\Facades\Facade::__callStatic("rememberForever")
+7 vendor frames

16 [internal]:0
Illuminate\Foundation\Application::Illuminate\Foundation{closure}(Object(App\Providers\TranslationServiceProvider), "App\Providers\TranslationServiceProvider")