CODEWITHSUNDEEP
laravelvue.jsinternationalization
Maxiss
Maxiss

Reputation: 1056

Use i18n in both vuejs and blade.php

I would like to use i18n in both blade.php and vuejs views. Is it possible? I already made the json file for i18n, it looks like this:

export default {
    "en": {
        "menu": {
             "home":"Home",
             "example":"Example"
        }
    }
}

It works with vuejs but I wonder how to use it in laravel... Is this possible?

Otherwise, is there any way to access a cookie in both laravel and vuejs, or do I need to use axios request for storing it and get it in vue? (I would like to store and read use the lang).

Here is a blade.php view where I would like to use i18n

@if (Route::has('register'))
      <li class="nav-item">
             <a class="nav-link" href="{{ route('register') }}">{{ __('home.example') }}</a>
      </li>
@endif

In vue.js files, all I do is {{ $t('home.example') }}

I use this library: https://github.com/kazupon/vue-i18n

Thank you very much!

Upvotes: 0

Views: 2937

Answers (1)

D Malan
D Malan

Reputation: 11434

I don't think it's easily possible to use vue-i18n in Blade templates.

Blade templates allow you to use an @ symbol in front of curly braces ({{ and }}) to indicate that the expression should not be evaluated by Blade. I wanted to suggest you use that to your advantage and use @ {{ $t('home.example') }} inside Blade. I think it would have to be inside your Vue mounted element for Vue-i18n to pick it up. However, Vue replaces the mounted element since Vue 2.x so your Blade templates inside your Vue mounted element would probably get lost.

I think your best bet would be to use a generator to copy all of your Laravel translation strings to Vue-i18n. laravel-vue-i18n-generator looks like a nice package to do this.

Basically you would then store your translation strings in Laravel and would be able to use them in Blade as normal. Every time you update these strings, you would have to run the generator again to have them available in Vue-i18n where you can access them as usual with Vue-i18n.

Upvotes: 2

Related Questions