feat: component namespace

One can overwrite the namespace name that is generated for the component:

- function `getComponentNamespace(vm)`

Should return: `{ namespace: ‘new-namespace’, loadNamespace: true}`
`namespace`: is the new namespace to use
`loadNamespace`: tells if the namespace should be loaded. Be aware that if the global options `loadComponentNamespace === false` then the namespace will not be loaded even if `loadNamespace === true`.

src/install.js

@@ -19,6 +19,20 @@ export function install(_Vue) {
     return key;
   };
 
+  const getComponentNamespace = (vm) => {
+    const namespace = vm.$options.name || vm.$options._componentTag;
+    if (namespace) {
+      return {
+        namespace,
+        loadNamespace: true,
+      };
+    }
+
+    return {
+      namespace: `${Math.random()}`,
+    };
+  };
+
   Vue.mixin({
     computed: {
       $t() {
@@ -55,35 +69,40 @@ export function install(_Vue) {
           });
         }
 
+        if (options.i18nOptions) {
           const { lng = null, keyPrefix = null, messages } = this.$options.i18nOptions;
           let { namespaces } = this.$options.i18nOptions;
           namespaces = namespaces || this.$i18n.i18next.options.defaultNS;
 
           if (typeof namespaces === 'string') namespaces = [namespaces];
-          namespacesToLoad = namespaces.concat(namespacesToLoad);
+          const namespacesToLoad = namespaces.concat([namespace]);
 
           if (messages) {
             inlineTranslations = deepmerge(inlineTranslations, messages);
           }
 
           this._i18nOptions = { lng, namespaces: namespacesToLoad, keyPrefix };
+          this.$i18n.i18next.loadNamespaces(namespaces);
         } else if (options.parent && options.parent._i18nOptions) {
           this._i18nOptions = options.parent._i18nOptions;
         } else if (options.__i18n) {
-          this._i18nOptions = { namespaces: namespacesToLoad };
+          this._i18nOptions = { namespaces: [namespace] };
+        }
+
+        if (loadNamespace && this.$i18n.options.loadComponentNamespace) {
+          this.$i18n.i18next.loadNamespaces([namespace]);
         }
 
         const languages = Object.keys(inlineTranslations);
         languages.forEach((lang) => {
           this.$i18n.i18next.addResourceBundle(
-          lang,
-          namespace,
-          { ...inlineTranslations[lang] },
-          true,
-          false);
+            lang,
+            namespace,
+            { ...inlineTranslations[lang] },
+            true,
+            false,
+          );
         });
-
-        this.$i18n.i18next.loadNamespaces(Array.from(new Set(namespacesToLoad)));
       }
     },
   });