Utilizing translations with vue-i18n in my Vue application has been a smooth process (). My main.ts setup appears as follows:
// Setting up the Vue app
const app = createApp(App)
// Incorporating necessary plugins
app.use(i18n)
....
// Mounting the Vue app
app.mount('#app')
Translations are successfully implemented within my components, making everything run seamlessly.
Recently, I've been looking to develop a helper function for formatting durations into a more human-readable format at various points in my app - such as displaying "4 minutes, 2 seconds" in English and "4 Minuten, 2 Sekunden" in German.
To achieve this, I created a helper function in a separate file:
export default {
formatDuration: (value: number) => {
if (!value){
return null;
}
let duration = dayjs.duration(value, "seconds");
let secondsPart = duration.seconds();
let minutesPart = duration.minutes();
return (duration + " " + $t("seconds")); // encountering a build error
}
}
The compilation issue arises on the last line due to the absence of $t. I am searching for a way to access the translation system and retrieve a string based on the current language without being within a vue component context.