Access $t from outside this (Global $t function)

I have a use case where I would like to translate keys in places like:

• props
• component data
• vuex state

However, this.$t() is not available there.

I have seen people solve this when using vanilla vue-i18n import;

// i18n.js
import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

const messages = {
  en: {
    messages: {
      placeholder: "Placeholder"
    }
  },
  cz: {
    messages: {
      placeholder: "Zástupný symbol :)"
    }
  }
};

export default new VueI18n({
  locale: "en",
  messages
});

// some-file.vue
import i18n from "../i18n";

export default {
  name: "HelloWorld",
  props: {
    placeholder: {
      type: String,
      // default: this.$t("value") - Wont work as `this` is not Vue instance
      default: i18n.t("messages.placeholder") // Works
    }
  }
};

Is there an equivalent way to do this using the nuxt-i18n module, or do I have to switch to this approach above with the vanilla package?

[roselily8]

Hi @rchl is there an example for scenario 2?

For any place where you don’t have access to $i18n or Nuxt context, you need to just pass the translation key and resolve it later.

What the best way to localize vee-validate custom rules in plugin files?

[rchl]

I don’t know vee-validate but maybe you can create a Nuxt plugin from which you would do something like:

import { configure } from 'vee-validate';

export default function({ app }) {
  configure({
    generateMessage: context => {
      return app.i18n.t(context.rule.name);
    },
  });
}

I haven’t tested it and you would likely also need to extend this logic more but maybe it will work as a start.

reference: https://vee-validate.logaretm.com/v4/guide/i18n