CODEWITHSUNDEEP
javascriptvue.jsinternationalizationvue-i18n
Ben Jerry
Ben Jerry

Reputation: 81

Vuejs and i18n for custom variable items

I fetch some items with its own translation per item. But somehow I cant get this to work nicely with vue-i18n(https://vue-i18n.intlify.dev/).

My current translations are getting loaded via json files, which works great. But i cant find any current information to add dynamic variables with vue-i18n.

So I wrote a small code to achieve this.

<template>
  <div class="products">
    <ul>
      <li v-bind:key="value.id" v-for="(value,key) in items">
         {{ c(key) }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { i18n } from '../lang/i18n'

// items remotely fetched
const items = {
  title: {
    en: 'english title',
    de: 'englischer Titel'
  },
  desc: {
    en: 'english description',
    de: 'deutsche beschreibung'
  },
  upcoming: {
    en: 'english upcoming'
  }
}

const c = (text) => {
  return (items[text][i18n.global.locale] ? items[text][i18n.global.locale] : items[text][i18n.global.fallbackLocale])
}

</script>

It works very wel, but I dont wanna reinvented the wheel again if it already exist. is something like this possible?

Upvotes: 0

Views: 1106

Answers (1)

Leonardo Martelotte
Leonardo Martelotte

Reputation: 21

change const c = (text) to a computed property, like this:

const c = computed((text) => {
  return (items[text][i18n.global.locale] ? items[text][i18n.global.locale] : items[text][i18n.global.fallbackLocale]);
})

This should do the job.

Upvotes: 2

Related Questions