When using the get text plugin for language translation in VueJs, everything works perfectly on all browsers in linux-ubuntu OS. However, upon opening it in any browser on MacOS, I am encountering unknown symbols as shown below in the screenshots.
Image on chrome for ubuntu
https://i.sstatic.net/G4DDj.png
Image on safari on MacOS
https://i.sstatic.net/1G6Cv.png
Note - The issue is not specific to a particular browser, as I have tested with both safari and chrome on MacOs, and encountered the same problem in both.
I'm unsure if the problem lies with my approach, the Operating system, or if I have overlooked something. Below is the code snippet provided:
app.js
import Vue from "vue";
import GetTextPlugin from 'vue-gettext'
import translationsNL from '../translations/nl.json';
import translationsEN from '../translations/en.json';
import translationsDE from '../translations/de.json';
import VTooltip from 'v-tooltip'
Vue.use(VTooltip);
Vue.use(GetTextPlugin, {
translations: {
nl: translationsNL,
en: translationsEN,
de: translationsDE,
},
defaultLanguage: 'de'
});
window.Bus = new Vue();
Vue.config.productionTip = false;
some translations from translations/de.json
{
"request_completed": "Einen Moment bitten, die Artikel werden in Ihren Warenkorb gelegt",
"example_line": "Sie wechseln gerade zwischen Innen- und Außenbeleuchtung. Alle getroffenen Entscheidungen gehen verloren. Möchten Sie die Beleuchtungsart noch ändern? "
}