'how to access the i18n t function inside a vue3 component using typescript

I am trying to write a control that can automatically handle interpolation for i18n strings:

<script lang="ts">

import { ref, defineComponent, inject } from "vue";
import type { InterpolationItem, InterpolationData, myData } from "../types/types";
import { useI18n } from 'vue-i18n'
    
export default defineComponent({
  name: "LocCtrl",
  props: {
    locKey: {
      type: String,
      required: true,
    },
    page: {
      type: String,
      required: true,
    },
  },
  setup() {
    // something has to be done here with useI18n(). If I put it at the top, the compiler
    // says it has to be here, but what?
    const { rt, t } = useI18n();

    const myData = inject("myData") as myData;
    const data = ref<InterpolationData>({
      items: [],
    });

    return {
      data,
      myData
    };
  },
  mounted() {
    //currently t (or whatever i need) is undefined
    this.data.items = this.interpolate( t(this.page + "." + this.locKey));
  },

The questions of what I'm trying to do are commented above

Solution 1:^[1]

There were several problems with my setup. This project below gives you a project you can clone and copy configuration into your project, for example with Beyond Compare. You may have to use the package.json settings in this issue that I've posted on it so that npm install actually works.

https://github.com/xiaoluoboding/vue-i18n-practice/issues

I also had my hacky Locale.ts possibly interfering with the operation of i18n. Once completely removed i18n started working.

But once installed properly this.$t and this.$i18n are available in components everywhere.

mounted() {
    // just an example of changing the locale, you don't necessarily 
    // need to do this all the time:
    const storage = useLocalStorage("site_locale", "en-US");
    this.$i18n.locale = storage.value;

    // this calls my custom interpolation code, 
    // which is why I needed to do this
    this.data.items = 
      this.interpolate(this.getItem(this.page, this.locKey));
  },
  methods: {
    //functions that directly access i18n strings:
    getItem(page: string, key: string): string {
      return this.getLoc(page + "." + key);
    },
    getLoc(x: string): string {
      return this.$t(x);
    },

After you get i18n working, this example uses yaml for the loc file format, so using a yaml beautifier such as this one can catch formatting errors which have weird errors that tell you nothing when loading the locale files:

https://codebeautify.org/yaml-beautifier

Some lines have to have quotes on them if they contain certain characters such as : or brackets or @:lookupSomething.something references:

xBox:
  NC: "@:common.NC"
  CP: Change X
  PE: Pre-exisiting Conditions
  xDesc: "[petData^xAge] [*ageUnit**xData^ageUnit] old [xData^breed]"
  SO: Start Over
  WP: Wrong X?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'how to access the i18n t function inside a vue3 component using typescript

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]