Use with VueJs

[Salier Guillaume]

Is there an option to return the right translated sentence for a VueJs Component?

Right now, this package return an object for each translatable field wich contains all languages ​​but when I use the object in VueJS, I'd like to see the right translation directly.

For Example, my Controller returns a User Model wich contains:

• name: Guillaume
• job (translatable): {"en": "developper", "fr": "développeur"}
• email: [e-mail]

If I want to display it in blade (locale = fr):

<ul>
 <li>{{ $user->name }}</li>
 <li>{{ $user->job }}</li>
 <li>{{ $user->email }}</li>
</ul>

Will display:

• Guillaume
• Développeur
• [e-mail]

Give this object to Vue and here is the result:

name: Guillaume
job: Object
- en: "developper"
- fr: "développeur"
email: [e-mail]

How can I deal with this ?

Is it possible to return an object with the right translation in it if we add a param to the request ? I don't want to return all translations.

Thanks for your help

[Freek Van der Herten]

Use Laravel's API resources to transform the output to the format you need.

[margaritacoco]

@freekmurze Laravel's API resources accept models, but how do you return a translated model.(coming from a NuxtJS perspective)
Ex: Return a French User, excluding the other translations

Also, I don't think he's working with an API if he's using Blade.

[Claudio Ludovico]

@freekmurze Laravel's API resources accept models, but how do you return a translated model.(coming from a NuxtJS perspective)
Ex: Return a French User, excluding the other translations

Also, I don't think he's working with an API if he's using Blade.

In nuxt you will have the locale set up for the user. Use the same locale to fetch the right translation key and if the translation key is not present just fallback to whatever is your default fallback.