I am working on creating a control that can automatically manage interpolation for internationalization (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() {
// The necessary steps with useI18n() should be implemented here. If placed at the top, the compiler
// prompts it to be placed here instead, but where exactly?
const { rt, t } = useI18n();
const myData = inject("myData") as myData;
const data = ref<InterpolationData>({
items: [],
});
return {
data,
myData
};
},
mounted() {
// At the moment, t (or whatever is needed) remains undefined
this.data.items = this.performInterpolation( t(this.page + "." + this.locKey));
},
The queries regarding my objective are highlighted in the comments above