Merge pull request #6 from panter/features/key-prefix

feat(options): introduce keyPrefix

README.md

@@ -210,6 +210,35 @@ Vue.component('app', {
 
 ```
 
+There is also the possibility to prefix what key the component is using.
+
+``` javascript
+
+const locales = {
+  en: {
+    message: {
+      hello: "Hello"
+    },
+  }
+};
+
+i18next.init({
+  ...
+});
+
+const i18n = new VueI18next(i18next);
+
+Vue.component('app', {
+  i18nOptions: { keyPrefix: 'message'},
+  template: `
+    <div>
+      <strong>{{ $t("hello") }}</strong>
+    </div>`,
+});
+
+```
+
+
 ## Build Setup
 
 ``` bash

examples/app.js

@@ -44,6 +44,10 @@ Vue.component('app', {
           <strong>a</strong>
         </i18next>
       </div>
+      <div>
+        <h3>Prefix</h3>
+        <key-prefix></key-prefix>
+      </div>
     </div>`,
 });
 
@@ -78,6 +82,16 @@ Vue.component('load-bundle', {
   },
 });
 
+Vue.component('key-prefix', {
+  i18nOptions: {
+    keyPrefix: 'message',
+  },
+  template: `
+    <div>
+      <p>{{$t('hello')}}</p>
+    </div>`,
+});
+
 new Vue({
   i18n,
 }).$mount('#app');

src/install.js

@@ -9,15 +9,26 @@ export function install(_Vue) {
 
   Vue = _Vue;
 
+  const getByKey = i18nOptions => (key) => {
+    if (i18nOptions && i18nOptions.keyPrefix) {
+      return `${i18nOptions.keyPrefix}.${key}`;
+    }
+    return key;
+  };
+
   Vue.mixin({
     computed: {
       $t() {
-        if (this._i18nOptions) {
+        const getKey = getByKey(this._i18nOptions);
+
+        if (this._i18nOptions && this._i18nOptions.namespaces) {
           const { lng, namespaces } = this._i18nOptions;
           const fixedT = this.$i18n.i18next.getFixedT(lng, namespaces);
-          return (key, options) => fixedT(key, options, this.$i18n.i18nLoadedAt);
+          return (key, options) => fixedT(getKey(key), options, this.$i18n.i18nLoadedAt);
         }
-        return (key, options) => this.$i18n.i18next.t(key, options, this.$i18n.i18nLoadedAt);
+
+        return (key, options) =>
+          this.$i18n.i18next.t(getKey(key), options, this.$i18n.i18nLoadedAt);
       },
     },
 
@@ -30,13 +41,13 @@ export function install(_Vue) {
       }
 
       if (this.$i18n && this.$options.i18nOptions) {
-        const { lng = null } = this.$options.i18nOptions;
+        const { lng = null, keyPrefix = null } = this.$options.i18nOptions;
         let { namespaces } = this.$options.i18nOptions;
         namespaces = namespaces || this.$i18n.i18next.options.defaultNS;
         if (typeof namespaces === 'string') namespaces = [namespaces];
         this.$i18n.i18next.loadNamespaces(namespaces);
 
-        this._i18nOptions = { lng, namespaces };
+        this._i18nOptions = { lng, namespaces, keyPrefix };
       } else if (this.$i18n && options.parent && options.parent._i18nOptions) {
         this._i18nOptions = options.parent._i18nOptions;
       }

test/unit/render.test.js

@@ -108,4 +108,32 @@ describe('$t loaded languages', () => {
       expect(text.textContent).to.equal('Hello');
     });
   });
+
+  describe('prefix key', () => {
+    let vueI18Next;
+    beforeEach(() => {
+      vueI18Next = new VueI18Next(i18next);
+      i18next.init({
+        lng: 'en',
+        resources: {
+          en: { translation: { messages: { hello: 'Hello' } } },
+        },
+      });
+    });
+
+    it('should use the keyPrefix property', async () => {
+      const el = document.createElement('div');
+      const vm = new Vue({
+        i18n: vueI18Next,
+        i18nOptions: { keyPrefix: 'messages' },
+        render(h) {
+          return h('p', { ref: 'text' }, [this.$t('hello')]);
+        },
+      }).$mount(el);
+
+      const { text } = vm.$refs;
+      await nextTick();
+      expect(text.textContent).to.equal('Hello');
+    });
+  });
 });