Cockpit: Use localization and i18n in Frontend

[elpeyotl]

Hi

Im working on an nuxt project which gets data from cockpit CMS. I need to use translations. So I want to use i18n. I used i18n and nuxt alread with some local language files. As now the translations are coming from a CMS the json is different. Example:

Instead of:

en: { term1: 'I Accept xxx\'s', term2: 'Terms of Service Agreement' }

I get the following from the CMS:

{Title: 'Mexiko', Content: '<p><strong>This is mexico!</strong></p>\n<p>&nbsp;</p>\n<p>Testing the block</p>', Title_fr: 'MEXIKKKOOOO FRENCH', Title_de: 'Mexiko D', Content_fr: null, Content_de: '<p>DAs ist mexikanisch</p>' },

You see the keys have the local attached with an underscore.

So when I use:
{{ $t(country.Title) }}

Its giving me an error:

[vue-i18n] Value of key 'Mexiko' is not a string! vue-i18n.esm.js:14 [vue-i18n] Cannot translate the value of keypath 'Mexiko'. Use the value of keypath as default.

Is it possible to change the output for localized content in cockpit CMS? So it would be i18n compatible. I'm not sure if I can change the settings in i18n or if I should write a parser function in the frontend. Any help appreciated.

[aheinze]

please try to add a lang parameter with your request, e.g. lang=fr. then the value of Title_frwill get merged into Title

[elpeyotl]

Thank you! This solves my issue! On load I can give the locale dynamic to the api request. On each language change the api updates as well! Thanks!

[natemate90]

I got this messed up when I changed the cockpit settings after I already had created a collection with entries.

# Cockpit settings
i18n: en
languages:
  en: English
  de: German
  cn: Chinese

If anybody reads this, first make sure your cockpit settings are right, then create the collection with localization + entries.

http://yourapiserver.com/api/collections/get/collectionname?token=0123456789&lang=en