Multi-language site and translation

Hi @mvnobrega

Maybe you could give this solution a try: https://laravel-news.com/laravel-localization-vue-package

Other possible solution (although it's an older article so I believe the first option should be better): https://medium.com/@codebyjeff/using-laravel-translation-strings-in-vue-js-e2e35b7aafca

Hope this helps!

That way doesn't work very well for me.

I am trying as follows:

my blade.php --> <nav-bar lang="{{ json_encode(__('lang')) }}"></nav-bar>

my component:

<template>

<nav class="middle-section ">
        <ul>
            <li><a href="#">{{ lang.navbar.inicio }}</a></li>
        </ul>
    </nav>

</template>

But I have two problems. The first is that the return of the props comes like this: lang="{"navbar":{"inicio":"In\u00edcio","contato":"Contato","sonhos":"Sonhos","blog":"Blog","langIcon":"flag-icon flag-br","meuPerfil":"Meu Perfil","meusRelatos":"Meus Relatos","msg":"Mensagens","notif":"Notifica\u00e7\u00f5es","prefer":"Prefer\u00eancias","lang":"Idioma:","sair":"Sair"},"home":{"headerH1":"\u201c\u00c9 t\u00e3o incr\u00edvel;}}

The second problem is that I can't call the component like this: {{ lang.navbar.home }}

Any suggestion ?

If you wish to keep your way of passing translations as a prop to your component instead of using Lang.js, simply add a : to lang so your JSON encoded data is processed as a JS object.

<nav-bar :lang="{{ json_encode(__('lang')) }}"></nav-bar>

As for the second part of the problem, have you defined lang as a prop in your component ?

<script>
  // ...
  export default {
    // ...
    props: {
      lang: {
        type: Object,
        required: true
      }
    }
    // ...
  }
</script>

{!! json_encode(__('lang')) !!} Partly resolved. But now there seems to be an accentuation problem. Accents do not appear to be configured for UTF-8. Example: In\u00edcio

How do I solve this?

@mvnobrega I deleted my previous answer because I looked at your issue too quickly. Check out my rewritten answer.

Basically omitting the : treats your content as a string, but adding : (which is a short for v-bind:) treats the content as JS logic.

I defined the props as an object and put ":lang" but it doesn't work. I have the same problem of &quot and accentuation.

I ended up finding this alternative:

<nav-bar :lang="{!! json_encode(__('lang'), JSON_UNESCAPED_UNICODE) !!}"> </nav-bar>

But I can't access the translation this way: {{ lang.navbar.inicio }}

the generated json is as follows:

<nav-bar :lang="{"navbar":{"inicio":"Início","contato":"Contato","sonhos":"Sonhos","blog":"Blog","langIcon":"flag-icon flag-br","meuPerfil":"Meu Perfil","meusRelatos":"Meus Relatos","msg":"Mensagens","notif":"Notificações","prefer":"Preferências","lang":"Idioma:","sair":"Sair"}}"></nav-bar>

Any tips?

@mvnobrega You're passing your JSON to :isguest, not :lang.

It was my fault when publishing here. But the code is correct and the problem remains.

Buddy, it worked! I don't know what I had done before that it wasn't working. I just remade and it worked perfectly.

Thank you very much