Create a reactive $translate from Plugin

[amplexdenmark]

Hello

I am trying to create a reactive version of the $translate example in the Plugin documentation.

Basically, I would like the $translate()d values to render/update automatically when the current language changes

The (simplified) Plugin goes something like this with 'ref()' and 'computed()':

But this fails with: 'TypeError: this.fn is not a function' at 'Unhandled error during execution of render function'

I suspect there is some missing context/'this' binding, but I can not figure out how to provide it.
Please advise, and thanks in advance.

/Flemming

export function install(app, options) {
  const {computed, ref, reactive} = Vue;
  let _curLang = 'en';
  let _fallBack = 'en';

  const curLang = ref(_curLang);
  const fallBack = ref(_fallBack);

  app.config.globalProperties.$translate = (key) => {
    return computed(!i18nDict[key] && "#"+key+"#" || i18nDict[key][curLang.value] || i18nDict[key][fallBack.value]);
  };

  app.provide("$setCurLang", (curLang,fallBack) => {
    curLang.value = curLang;
    if (fallBack)
      fallBack.value = fallBack;
  });
}

var i18nDict = {
  "Language": {
    "en": "Language",
    "da": "Sprog",
    "de": "Sprache",
    "sv": "Språk"
  },
  // ...
};

So I tried a version with 'reactive()' instead but this gives the same error

export function install(app, options) {
  const {computed, ref, reactive} = Vue;
  let curLang = 'en';
  let fallBack = 'en';

  const opts = reactive({curLang: curLang, fallBack: fallBack});

  app.config.globalProperties.$translate = (key) => {
    return computed(!i18nDict[key] && "#"+key+"#" || i18nDict[key][opts.curLang] || i18nDict[key][opts.fallBack]);
  };

  app.provide("$setCurLang", (curLang,fallBack) => {
    opts.curLang = curLang;
    if (fallBack)
      opts.fallBack = fallBack;
  });
}

var i18nDict = {
  "Language": {
    "en": "Language",
    "da": "Sprog",
    "de": "Sprache",
    "sv": "Språk"
  },
  // ...
};

[leopiccionia]

From the error message, I think it's reporting that the parameter you pass to computed is not a function. And, indeed, it isn't.

Try something like this:

computed(() => !i18nDict[key] && "#"+key+"#" || i18nDict[key][opts.curLang] || i18nDict[key][opts.fallBack])

[amplexdenmark]

That solved it (using the ref() variant.
Thank you, that was a lifesaver!