vue-i18n-async.js

import merge from 'lodash.merge';

export default {
  data() {
    return {
      translationMessageLoaded: false
    };
  },
  created() {
    if (!this.$root.i18nComponents) {
      this.$root.i18nComponents = [];
    }

    if (!this.$root.i18nComponents.includes(this.componentName)) {
      this.$root.i18nComponents.push(this.componentName);

      this.loadTranslationMessages();
    }
  },
  computed: {
    componentName() {
      return this.$options.name
        .replace(/\.?([A-Z]+)/g, function (x,y){return "_" + y.toLowerCase()}).replace(/^_/, "")
        .replace(/(_page|_layout)$/, '');
    }
  },
  i18n: {
    messages: {}
  },
  watch: {
    translationMessageLoaded(a) {
      if (a) {
        this.$forceUpdate();
      }
    }
  },
  methods: {
    async loadTranslationMessages() {
      const locale = this.$i18n.locale;
      const messages = (await import(/* webpackChunkName: "i18n-[request]" */ `src/i18n/${this.componentName}/${locale}.json`)).default;
      this.$options.i18n.messages[locale] = merge(
        this.$options.i18n.messages[locale],
        messages
      );
      this.translationMessageLoaded = true;
    }
  },
  render(createElement, children) {
    // return this.$scopedSlots.default({})
    // if (this.translationMessageLoaded) {
      return createElement("div", ['test', children]);
    // }
    // else {
    //   return createElement("div", []);
    // }
    // return createElement(
    //   "div",
    //   [
    //     "This is a parent element",
    //     ...children,
    //   ],
    // );
  },
}