Reload translations without page refresh

[martijnmichel]

So im trying to hot reload translations. The changes are detected and i can do a console.log with the correct new translations, but the ui itself is not updated weird enough.

import Vue from "vue";
//import VueI18n from "vue-i18n";
import i18next from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";

import VueI18Next from "@panter/vue-i18next";

import messages from "src/i18n";

//import { applyI18NextHMR } from "i18next-hmr";

Vue.use(VueI18Next);

import moment from "moment";

i18next.use(LanguageDetector).init({
  resources: messages,
  fallbackLng: "en-US",
  ns: ["translation", "md", "wiki"],
  defaultNS: "translation"
});

const i18n = new VueI18Next(i18next);

moment.locale(i18next.language);

if (module.hot) {
  module.hot.accept("src/i18n", () => {
    // this method will be invoked each time webpack sees a change in `src/i18n` import
    const newResources = require("src/i18n");
    Object.keys(newResources).forEach(lang => {
      const langObj = newResources[lang];

      Object.keys(langObj).forEach(namespace => {
        const nsResource = langObj[namespace];
        i18next.addResourceBundle(lang, namespace, nsResource);
      });
    });
  });
}

export default ({ app }) => {
  app.i18n = i18n;
};
export { i18n };