Limit the scope of a SFC component to some namespace and key prefix. about i18next-vue HOT 7 CLOSED

Would be great if this stays somewhat alined to react-i18next implementation so it's easy to switch from react-i18next to vue-i18next:

• namespaces: https://react.i18next.com/latest/usetranslation-hook#loading-namespaces
• prefix: https://react.i18next.com/latest/usetranslation-hook#optional-keyprefix-option

from i18next-vue.

Yes, this sounds good. I'd like to take some time to look into this and experiment, so we get an API that feels right (any ideally is compatible with react-i18next).

from i18next-vue.

In the new 2.0.0-beta.2 release i18nOptions will now be taken into account for the t retrieved via useTranslation().

This is a little more verbose than directly supporting it in useTranslation(), but it might work as an interim solution.

from i18next-vue.

As outlined above, this is implemented in v3.

from i18next-vue.

Is the t function supposed to be limited by the component's i18nOptions?
I'm using the function inside a computed property but the ns is not limited until after the onMounted and the computed property is not being updated.

from i18next-vue.

Hi @EranClientside,

yes, it should use i18nOptions. I included a working example below. If this does not help/not work in your setup, please open a separate issue so we can look into this.

<template>
  <h1>Issue 7b</h1>
  <p>computed: {{ term }}</p>
  <p>computed2: {{ otherTerm }}</p>
  <p>too early: {{ notLikeThis }}</p>
</template>


<script setup>
import { computed } from "vue";
import { useTranslation } from "i18next-vue";

const { t } = useTranslation();
const term = computed(() => t("some.key"));
// this is too early, because i18nOptions is only taking effect in `beforeCreate`, which runs after `setup`:
const notLikeThis = t("some.key"); 
</script>

<script>
export default {
  computed:{
    otherTerm(){
      return this.t("some.key");
    }
  },
  i18nOptions: {
    namespaces: "namespace1",
  },
  name: "issue-seven",
};
</script>

from i18next-vue.

We plan to include this in i18next-vue v3. In fact, you can try it in the alpha version already: https://github.com/i18next/i18next-vue/releases/tag/v3.0.0-alpha.0

The syntax is

  const {t} = useTranslation('namespace1', {
    keyPrefix: 'long.path.to',
  });

See #16 for other changes planned for version 3.

from i18next-vue.